23.1 Overview

The Advanced section provides controls that affect the VCard’s access, design, custom functionality, and branding.

The programmed Advanced screen contains:

These settings apply to the selected VCard only. Changing one card’s Advanced settings does not automatically change another card.

Because Custom CSS and Custom JavaScript can directly alter the public card, these fields should be managed carefully and tested after every update. The Advanced editor stores the password, CSS, JavaScript, and branding preference through the main VCard update form.

23.2 Opening the Advanced Section

From the dashboard:

1. Select VCards.
2. Locate the digital card you want to configure.
3. Select the card name or the Edit icon.
4. Open the additional VCard editing options.
5. Select Advanced.

On a phone or smaller screen, select the menu icon inside the VCard editor before choosing Advanced.

The Advanced section is separate from the Fonts section. Advanced controls password protection, custom code, and branding, while Fonts controls the card’s font family and text size.

Password Protection

23.3 Understanding the Password Field

The Password field allows the card owner to protect the public VCard from unrestricted viewing.

When a password is assigned, visitors must enter the correct password before accessing the protected card.

Password protection may be appropriate for:

1. Private employee cards
2. Internal company directories
3. Invitation-only events
4. Customer-specific information
5. Private portfolios
6. Restricted project pages
7. Early product previews
8. Member-only resources
9. Confidential presentations
10. Training materials intended for a limited audience

A password should not replace proper security controls for highly sensitive records. Do not use a public VCard to store information that should remain inside a secured business system.

23.4 Setting a VCard Password

To protect the card:

1. Open Advanced.
2. Select the Password field.
3. Enter the password visitors must use.
4. Review the Custom CSS, Custom JS, and branding settings.
5. Select Save.
6. Open the public card in a private browser window.
7. Confirm that the password screen appears.
8. Enter the password.
9. Confirm that the card opens.

The password field is displayed as a concealed password input so the characters are not immediately visible on the screen.

23.5 Showing or Hiding the Password While Editing

An eye icon appears inside the Password field.

Use it to temporarily show or hide the entered password.

Hidden

The characters are concealed to reduce accidental exposure.

Visible

The characters can be reviewed for accuracy before saving.

When using the visible option:

1. Make sure unauthorized people cannot see the screen.
2. Do not display the password during screen sharing.
3. Hide it again after reviewing it.
4. Avoid taking screenshots that include it.
5. Do not leave the editor open on an unattended device.

23.6 Existing Passwords in the Editor

When a password has already been saved, the Advanced editor loads it into the Password field and conceals it by default.

An authorized editor can use the eye icon to reveal it.

Because the existing password can be viewed from the editing screen:

1. Limit account access to authorized users.
2. Protect the account with a strong login password.
3. Sign out from shared computers.
4. Do not allow unapproved users to edit the card.
5. Change the VCard password when an authorized person leaves the organization.

The VCard password and the account-login password serve different purposes.

Do not use the same password for both.

23.7 Choosing a Strong Password

The interface does not display a visible minimum-length requirement for the VCard password. Use a strong password even when the form accepts something simpler.

A recommended password should contain:

1. At least 12 characters
2. Uppercase and lowercase letters
3. Numbers
4. Symbols
5. No personal information
6. No company name
7. No predictable sequence

Weak examples:

Stronger structure:

Do not use the example above as an actual password.

Use a password manager to create and store unique passwords.

23.8 Sharing the VCard Password

Share the password only with the intended audience.

Safer methods include:

1. Direct verbal communication
2. An approved password manager
3. A separate secure message
4. A protected customer portal
5. A controlled internal communication system

Avoid placing the password:

1. On the public VCard
2. In the VCard description
3. In a Custom Link
4. In the QR code destination
5. In public social-media posts
6. In the same public message as the VCard link
7. Inside Custom JavaScript
8. Inside Custom CSS

When distributing the VCard link by email, send the password through a separate approved communication method when practical.

23.9 Visitor Password Experience

When password protection is active, a visitor opening the public URL is directed to the card’s password process before normal content is displayed.

After the correct password is accepted, the visitor can access the card during the current browsing session.

The visitor may need to enter the password again after:

1. Closing the browser
2. Ending the browser session
3. Clearing browser data
4. Switching to another browser
5. Switching to another device
6. Opening the card in a private window

Do not promise permanent password access.

23.10 Changing the Password

Change the password when:

1. It was shared with the wrong person.
2. A former employee knows it.
3. A private campaign has ended.
4. Access should be limited to a new group.
5. The password may have been exposed.
6. The organization’s security schedule requires a change.

To change it:

1. Open Advanced.
2. Reveal the existing password only when necessary.
3. Replace it with the new password.
4. Select Save.
5. Test the old password in a private browser window.
6. Confirm that the old password no longer grants access.
7. Test the new password.
8. Securely inform approved visitors of the change.

23.11 Removing Password Protection

To return the card to normal public access:

1. Open Advanced.
2. Clear the Password field.
3. Select Save.
4. Open the card in a new private browser window.
5. Confirm that no password prompt appears.
6. Confirm that the public content loads normally.

Do not rely only on a browser session that previously passed the password screen. A private window provides a more accurate test.

23.12 Password Protection and QR Codes

A QR code continues to direct visitors to the VCard’s public URL.

When the card is password protected:

The QR code itself does not automatically provide the password.

Before distributing a protected QR code:

1. Scan it with a phone.
2. Confirm that it opens the correct card.
3. Confirm that the password screen appears.
4. Test the approved password.
5. Confirm that the card loads correctly after authentication.

23.13 Password Protection and Custom Domains

A VCard connected to a custom domain can still use password protection.

After enabling or changing the password, test:

1. The standard VCard URL
2. The custom-domain URL
3. Desktop access
4. Mobile access
5. Private-browser access
6. QR-code access

Confirm that every public route applies the expected protection.

23.14 Password Protection Limitations

VCard password protection controls access to the public card, but it should not be treated as a complete document-security system.

Do not place the following on a VCard merely because a password is enabled:

Use an appropriate secured system for sensitive business and personal information.

Custom CSS

23.15 Understanding Custom CSS

The Custom CSS field allows the card owner or developer to add Cascading Style Sheet rules that change the visual presentation of the public VCard.

Custom CSS may be used to adjust:

1. Colors
2. Borders
3. Spacing
4. Button shapes
5. Font presentation
6. Section backgrounds
7. Image sizing
8. Alignment
9. Element visibility
10. Mobile layout behavior

The Advanced form provides a multiline Custom CSS field for the selected VCard.

23.16 When to Use Custom CSS

Use Custom CSS when the selected template is generally appropriate but requires a controlled design adjustment.

Examples include:

1. Matching a company’s brand colors
2. Increasing spacing between sections
3. Changing button corner styles
4. Adjusting heading sizes
5. Improving contrast
6. Correcting an image’s public dimensions
7. Hiding a decorative item
8. Improving a specific mobile presentation

Do not use Custom CSS as the first solution when the desired result can be achieved through:

1. Template selection
2. Dynamic VCard controls
3. Fonts
4. Manage Section
5. Cover settings
6. Button-color settings
7. Standard editor fields

Built-in controls are generally easier to maintain.

23.17 CSS Selectors Depend on the Template

Each template can use different class names, structures, and layouts.

A CSS rule that works in one template may:

1. Have no effect in another template.
2. Change the wrong element.
3. Affect several sections unexpectedly.
4. Break after a template update.
5. Cause mobile-layout problems.

A developer should inspect the public card’s HTML structure before creating template-specific CSS.

Do not copy random CSS from another website and assume it will work correctly.

23.18 Entering Custom CSS

To add CSS:

1. Open Advanced.
2. Locate Custom CSS.
3. Enter the reviewed CSS rules.
4. Select Save.
5. Refresh the public VCard.
6. Review every affected section.
7. Test the card on desktop and mobile.
8. Test it in a private browser window.

Enter CSS rules rather than a complete webpage.

Example structure:

The example class must be replaced with the actual class used by the selected VCard template.

23.19 Using Comments in Custom CSS

Comments can help another developer understand why a rule was added.

Example:

Keep comments concise and do not include confidential project information.

23.20 Avoiding Overly Broad CSS Rules

Broad rules can change the entire card unexpectedly.

Risky example:

This could hide most of the public VCard.

Another risky example:

This may make links unreadable on light backgrounds.

Use specific selectors that target only the intended element.

23.21 Do Not Hide Required Information Improperly

Custom CSS can technically hide page elements, but it should not be used to conceal information visitors must be able to access.

Do not intentionally hide:

1. Prices that apply to an order
2. Cancellation information
3. Required legal notices
4. Payment terms
5. Privacy links
6. Important form labels
7. Error messages
8. Required consent controls
9. Safety information

Use Manage Section to control optional public content and update the underlying information when it is incorrect.

23.22 Responsive CSS

Visitors commonly open VCards on phones after scanning a QR code.

A CSS adjustment should therefore be reviewed at several screen sizes.

A responsive rule may use a media query:

Only use selectors verified for the selected template.

Test:

1. Desktop
2. Tablet
3. Standard phone
4. Smaller phone
5. Portrait orientation
6. Landscape orientation

23.23 CSS and Accessibility

Custom styling should preserve readability and usability.

Confirm that:

1. Text contrasts with its background.
2. Links remain recognizable.
3. Buttons remain large enough to select.
4. Focus indicators are not removed.
5. Text is not reduced excessively.
6. Important content is not hidden from screen readers.
7. Form labels remain visible.
8. Color is not the only way information is communicated.

Avoid CSS that makes the design attractive but difficult to use.

23.24 CSS and Template Changes

After changing the VCard template:

1. Open the public card.
2. Review every section.
3. Check whether the old CSS still applies.
4. Remove rules that no longer match the template.
5. Correct rules that affect unintended elements.
6. Test desktop and mobile.
7. Save an external copy of the revised CSS.

Template changes can make existing CSS obsolete.

23.25 Removing Custom CSS

To remove all custom styling:

1. Open Advanced.
2. Copy the existing CSS into an external backup when needed.
3. Clear the Custom CSS field.
4. Select Save.
5. Refresh the public card.
6. Test in a private browser window.
7. Confirm that the template’s standard design has returned.

To remove only one adjustment, delete the related CSS rule and leave the remaining rules intact.

23.26 Maintaining a CSS Backup

Keep an external record containing:

The Advanced screen does not provide a visible CSS version history or restore button.

Custom JavaScript

23.27 Understanding Custom JS

The Custom JS field allows reviewed JavaScript to run as part of the public VCard experience.

Custom JavaScript may be used for controlled functions such as:

1. Additional visitor interactions
2. Custom button behavior
3. Approved tracking events
4. Display adjustments
5. Integration with an approved external service
6. Template-specific interface behavior

The Advanced form includes a multiline Custom JS field directly after Custom CSS.

Custom JavaScript is more powerful and more dangerous than ordinary content fields. It should be entered only by a qualified developer or under direct technical supervision.

23.28 Custom JavaScript Can Affect the Whole Card

Incorrect JavaScript may:

1. Stop buttons from working
2. Prevent forms from submitting
3. Produce browser errors
4. Hide content
5. Redirect visitors
6. Interfere with appointments
7. Interfere with product orders
8. Break sliders or media
9. Slow page loading
10. Create repeated popups
11. Conflict with built-in template scripts
12. Affect mobile performance

Test every public function after adding or changing JavaScript.

23.29 Entering Custom JavaScript

To add approved JavaScript:

1. Prepare and test the code outside the production VCard.
2. Open the VCard’s Advanced section.
3. Paste the reviewed JavaScript into Custom JS.
4. Select Save.
5. Open the public VCard in a private browser.
6. Test the intended function.
7. Test all standard VCard functions.
8. Repeat the test on a phone.
9. Review the browser console when technical troubleshooting is required.

Enter the JavaScript code itself rather than a complete HTML webpage.

23.30 Use Only Trusted Code

Do not paste JavaScript from:

1. Unknown websites
2. Unverified online forums
3. Unsolicited email messages
4. Untrusted contractors
5. Obfuscated code that cannot be reviewed
6. Browser-console instructions from strangers
7. “Free tracking” scripts with unclear ownership

Malicious JavaScript can redirect visitors, collect information, alter payment destinations, or damage trust in the VCard.

A qualified developer should review third-party code before publication.

23.31 Never Place Secrets in Custom JS

JavaScript sent to a public webpage can be viewed by visitors.

Never enter:

A public API identifier designed for browser use may sometimes be appropriate, but it should still be reviewed and restricted according to the service provider’s requirements.

Secret operations belong on a secured server, not in public JavaScript.

23.32 JavaScript and Visitor Privacy

Custom JavaScript may collect or transmit information.

Before adding analytics, tracking, chat, advertising, form, or behavioral scripts:

1. Identify what data the script collects.
2. Identify who receives the data.
3. Confirm the business is authorized to use it.
4. Update the VCard Privacy Policy.
5. Review consent requirements.
6. Confirm the destination service is approved.
7. Test whether the script respects visitor choices.
8. Remove scripts that are no longer used.

Do not collect personal information secretly.

23.33 Avoid Unapproved Redirects

Custom JavaScript can redirect a visitor to another page.

Use redirects only when they are necessary, approved, and clearly consistent with the visitor’s expectation.

Do not redirect visitors automatically to:

1. An unrelated website
2. An unapproved payment page
3. Advertising pages
4. Unsafe downloads
5. Another person’s VCard
6. An administrative login
7. A deceptive destination

A Custom Link or Banner is generally clearer when the visitor should intentionally select an external destination.

23.34 Avoid Duplicate Built-In Functions

Do not use Custom JS to recreate functionality already provided by the system unless there is a documented technical need.

Built-in functions include:

1. Contact actions
2. Enquiry submission
3. Appointment booking
4. Product ordering
5. Payment links
6. Social sharing
7. QR operations
8. Newsletter subscription
9. Gallery display
10. Blog navigation

Duplicate scripts may conflict with the existing application.

23.35 Testing After Adding JavaScript

Test the complete VCard, not only the new function.

Confirm that visitors can still:

1. Open the card
2. Enter the VCard password
3. Call and email
4. Open Social Links
5. Submit enquiries
6. Book appointments
7. Review Services
8. View Products
9. Submit orders
10. Open Payment Links
11. Use Custom Links
12. View Galleries
13. Open Blogs
14. Play embedded media
15. Open Privacy Policy and Terms
16. Subscribe
17. Download or add contact information

Also check for repeated loading, frozen controls, or unexpected browser warnings.

23.36 Recovering from Broken JavaScript

When the card stops working after a Custom JS update:

1. Return to the dashboard.
2. Open the affected VCard.
3. Select Advanced.
4. Copy the current code into a troubleshooting document.
5. Clear the Custom JS field.
6. Select Save.
7. Open the public VCard in a private window.
8. Confirm that normal operation returns.
9. Review the removed code before restoring any part of it.

Restore code in small, tested sections rather than pasting the entire broken version again.

23.37 JavaScript and Template Changes

A script written for one template may depend on:

1. Specific class names
2. Specific element identifiers
3. A particular section order
4. A particular slider
5. A particular form structure
6. A particular loading sequence

After changing templates, test all Custom JS again.

Remove code that no longer applies.

23.38 Maintaining a JavaScript Record

Keep an external record containing:

The Advanced editor does not display a version history or automatic rollback function.

Remove Branding

23.39 Understanding Remove Branding

The Remove Branding switch controls the platform-branding presentation associated with the public VCard.

When Remove Branding is selected, the card is configured to remove the standard platform branding from supported public template areas.

When it is cleared, the template may display the standard platform attribution or branding.

The checkbox is saved as part of the Advanced VCard configuration.

23.40 Enabling Remove Branding

To remove standard branding:

1. Open Advanced.
2. Select Remove Branding.
3. Select Save.
4. Open the public VCard.
5. Scroll to the bottom of the card.
6. Review any footer or attribution area.
7. Test on desktop and mobile.

The exact location and appearance can differ by template.

23.41 Restoring Standard Branding

To restore the default branding presentation:

1. Open Advanced.
2. Clear Remove Branding.
3. Select Save.
4. Refresh the public VCard.
5. Review the footer and other attribution areas.

Test in a private browser window when cached content remains visible.

23.42 Remove Branding Versus Made By

The Remove Branding switch is different from the Made By and Made By URL fields found in Basic Details 2.

Remove Branding

Controls the standard platform-branding presentation.

Made By

Provides custom attribution text for the card.

Made By URL

Provides the destination associated with the custom attribution.

Example:

Supported templates may present this information within a footer or attribution area.

After changing any of these settings, review the public VCard to confirm the final result.

23.43 Branding Review After a Template Change

Different templates can present attribution differently.

After changing templates:

1. Review Remove Branding.
2. Review Made By.
3. Review Made By URL.
4. Open the public card.
5. Inspect the footer and lower page areas.
6. Test any attribution link.
7. Confirm that the displayed business name is correct.

Do not assume every template places branding in the same position.

23.44 Branding and Duplicated VCards

After duplicating a VCard:

1. Open the duplicate.
2. Review Advanced.
3. Confirm the Remove Branding setting.
4. Review Basic Details 2.
5. Replace Made By information where necessary.
6. Test the public duplicate.
7. Confirm that it does not identify the wrong creator or business.

A duplicated card may retain the original card’s attribution settings.

Saving or Discarding Changes

23.45 Saving Advanced Settings

After completing the Advanced section, select Save.

The system stores the current:

Wait for the update confirmation before leaving the page.

Then test the public VCard.

23.46 Using Discard

Select Discard to leave the Advanced section without saving the current changes.

Discard returns to the VCards list and preserves the previously saved Advanced configuration.

It does not:

1. Remove the existing password
2. Delete existing CSS
3. Delete existing JavaScript
4. Reset branding
5. Delete the VCard
6. Deactivate the VCard

Unsaved changes made during the current editing session are lost.

Public Review Procedure

23.47 Complete Advanced-Settings Test

After saving:

1. Open the public VCard in a private browser window.
2. Confirm whether the password prompt appears as intended.
3. Enter the correct password where required.
4. Review the complete visual layout.
5. Confirm that Custom CSS produced the intended result.
6. Test all interactive functions.
7. Confirm that Custom JS works without errors.
8. Review the footer and branding.
9. Test on a phone.
10. Test the QR code.
11. Test the custom domain where used.
12. Repeat the test after changing templates.

Troubleshooting

23.48 The Password Prompt Does Not Appear

Confirm that:

1. A password was entered.
2. Save was selected.
3. The update confirmation appeared.
4. The correct VCard was edited.
5. The public card is active.
6. The test is being performed in a private browser window.
7. A previous authorized session is not being reused.
8. The correct standard or custom-domain URL was opened.

23.49 The Password Is Rejected

Confirm that:

1. Uppercase and lowercase letters match.
2. No extra spaces were included.
3. The correct password is being used.
4. The password belongs to the correct VCard.
5. The latest change was saved.
6. The visitor is not using an old password.

Reveal the saved password inside the authorized editor only when necessary to verify it.

23.50 Visitors Can See the Card Without a Password

Test in a new private browser window.

A normal browser may still contain an authorized session from a previous successful password entry.

When the card remains publicly accessible:

1. Reopen Advanced.
2. Confirm that the Password field contains the intended value.
3. Save again.
4. Retest privately.
5. Confirm that the correct VCard URL is being used.

23.51 The Password Screen Keeps Returning

This may occur when:

1. The browsing session ends.
2. Cookies or session data are blocked.
3. The visitor is using a private browser.
4. The browser clears data automatically.
5. The visitor changes devices or browsers.

Confirm that the password is correct and that ordinary session storage is permitted.

23.52 Custom CSS Does Not Appear

Confirm that:

1. The CSS was saved.
2. The selector matches the selected template.
3. The browser page was refreshed.
4. Cached styles were cleared.
5. The CSS contains valid syntax.
6. Another rule is not overriding it.
7. The correct VCard is being viewed.

Test one small rule at a time during troubleshooting.

23.53 Custom CSS Breaks the Layout

To recover:

1. Copy the current CSS into an external document.
2. Clear the Custom CSS field.
3. Save the VCard.
4. Confirm that the standard layout returns.
5. Review the code for broad selectors, missing braces, or mobile conflicts.
6. Restore only tested rules.

23.54 Custom JS Does Not Run

Confirm that:

1. The code was saved.
2. The JavaScript contains valid syntax.
3. The intended element exists in the selected template.
4. The script waits for the page element when necessary.
5. The browser is not blocking an external service.
6. Another script is not producing an earlier error.
7. The correct VCard is being tested.

A developer may inspect the browser console for technical errors.

23.55 Custom JS Breaks Forms or Buttons

Immediately remove the Custom JS and save the card.

Then test:

1. Enquiries
2. Appointments
3. Product orders
4. Payment links
5. Custom Links
6. Social Links
7. Gallery controls
8. Blog navigation
9. Newsletter subscription

Restore the script only after the conflict has been identified and corrected.

23.56 Platform Branding Still Appears

Confirm that:

1. Remove Branding is selected.
2. Save was selected.
3. The public page was refreshed.
4. The correct VCard was edited.
5. The selected template’s attribution area was reviewed.
6. A custom Made By entry is not being mistaken for standard branding.
7. The card was tested in a private browser window.

23.57 Custom Attribution Is Missing

Confirm that:

1. Made By contains the desired text.
2. Made By URL contains a valid public address.
3. Basic Details 2 was saved.
4. The selected template presents custom attribution.
5. Remove Branding and Made By settings were reviewed together.
6. The public card was refreshed.

23.58 Advanced Settings Checklist

Before completing the Advanced section, confirm that:

1. Password protection is intentional.
2. The password is strong and unique.
3. The password was shared securely.
4. The public password process was tested privately.
5. No sensitive records were placed on the VCard.
6. Custom CSS was reviewed by a qualified person.
7. CSS selectors match the current template.
8. The complete layout was tested on desktop and mobile.
9. Custom JavaScript came from a trusted source.
10. No secrets or private credentials were placed in JavaScript.
11. JavaScript-related data collection is addressed in the Privacy Policy.
12. All forms, links, payments, and media still work.
13. Remove Branding is configured intentionally.
14. Made By information is accurate.
15. The public footer was reviewed.
16. Advanced settings were reviewed after template changes.
17. Duplicated VCards contain the correct Advanced configuration.
18. External backups of CSS and JavaScript are maintained.
19. Save was selected and the update confirmation appeared.

Chapter Completion

At the end of this chapter, the user should understand how to password-protect a VCard, manage visitor access, apply Custom CSS, use Custom JavaScript safely, control platform branding, save Advanced settings, and troubleshoot public-card problems caused by advanced customization.