The Dynamic VCard section allows the user to customize the visual appearance of the Dynamic VCard templates. These controls change the card’s colors, button appearance, card backgrounds, social icons, and the position of the sticky action button.
The system includes two Dynamic VCard templates:
For the clearest results, select one of these designs in the Templates section before configuring the Dynamic VCard appearance.
Changes made in this section affect the design rather than the card’s contact information or content. The user can therefore update the appearance without re-entering names, telephone numbers, services, products, or other information.
From the dashboard:
On a phone or smaller screen, select the menu icon inside the editor to display the available editing sections.
The Dynamic VCard screen contains the appearance controls on one side and a card preview area on the other side.
Each color setting includes a color-selection control. Select the displayed color area to open the color picker.
Depending on the browser and device, the color picker may allow the user to:
A hexadecimal color code begins with a number sign and contains six characters, such as:
After selecting a color, review the preview area to determine whether text, buttons, and backgrounds remain easy to see.
Use Primary Color to establish the main accent color of the Dynamic VCard.
The primary color may be applied to prominent design elements such as:
Choose a color that matches the cardholder’s company, organization, personal brand, or campaign identity.
For example, a company that uses dark blue and gold may select gold as the Primary Color and use dark blue for one of the background settings.
The programmed default Primary Color is:
The default is only used when a custom color has not already been saved.
Use Background Secondary Color to set one of the supporting background colors used by the Dynamic VCard.
This color may appear behind secondary areas, visual layers, or card sections that contrast with the main page background.
The programmed default is:
Choose a color that complements the Primary Color while remaining different enough to distinguish individual card areas.
Use Background Color to set the primary page or section background used by the Dynamic VCard.
The programmed default is:
When selecting a dark background, use lighter label and description colors. When selecting a light background, use darker text colors.
The Background Color and Background Secondary Color should work together rather than appearing as unrelated colors.
Use Button Text Color to control the color of text displayed inside the Dynamic VCard’s buttons.
The programmed default is:
The button text must remain easy to read against the Primary Color or whichever color is used for the button background.
For example:
Avoid using two similar shades, such as light yellow text on a pale yellow button, because visitors may not be able to read the button label.
Use Label Text Color to control the color of headings, labels, names, and other prominent text elements in the Dynamic VCard.
The programmed default is:
Use a label color with strong contrast against the Background Color and Background Secondary Color.
This color is generally more prominent than the Description Text Color and should help visitors identify major sections quickly.
Use Description Text Color to control the color of descriptions, supporting text, and secondary information.
The programmed default is:
Description text can be slightly less prominent than labels, but it must still be clearly readable.
Do not select a color that blends into the card background. Visitors should be able to read descriptions without increasing their screen brightness or zooming the page.
Use Cards Background to control the background color of smaller content cards and panels displayed inside the Dynamic VCard.
These may include areas containing:
The programmed default is:
When using a light card background, choose dark text. When using a dark card background, choose lighter text and icons.
The Cards Background should remain visually distinct from the main Background Color so visitors can recognize the boundaries of each content area.
Use Social Icon Color to control the color of the social-media icons displayed on the Dynamic VCard.
The programmed default is:
Select a color that makes the icons visible against the area where they are displayed.
The same selected color may be applied across all social icons, rather than using each social network’s individual brand color.
The sticky button is a visitor action control that remains positioned along the side of the Dynamic VCard while the visitor views the page.
The Dynamic VCard settings allow the user to place it on either side:
The programmed default position is Right when no previous Dynamic VCard setting has been saved.
This positioning setting is separate from the Hide Sticky Bar control covered in Basic Details 3.
The two settings work as follows:
Select Left to place the sticky action control along the left side of the public Dynamic VCard.
This position may be useful when:
After selecting Left, review the preview and public card to make sure the button does not cover text or images.
Select Right to place the sticky action control along the right side of the public Dynamic VCard.
This is the default position.
The right-side position may feel familiar to mobile users because floating communication and support buttons often appear on the lower-right side of websites.
Review the card on a mobile device because the available screen width is smaller than on a desktop computer.
The Dynamic VCard provides ten button appearance options:
Each option is displayed as a visual sample in the editor. Select the style sample that best matches the desired card appearance.
When no custom button style has previously been selected, Style 1 is used as the default.
Styles 2 through 10 provide alternative button shapes and visual treatments.
When reviewing the available styles, consider:
Some styles may use rounded corners, while others may use sharper, more rectangular, or decorative shapes.
A more prominent button style may be appropriate when the visitor’s main purpose is to call, book an appointment, request information, or purchase a product.
Choose a style that resembles the buttons used on the cardholder’s main website, marketing materials, mobile application, or other branded content.
Confirm that the Button Text Color remains clear in the selected style.
Review the button appearance on a mobile device. Decorative details that look attractive on a large screen may feel crowded on a smaller display.
When unsure which design to select, begin with Style 1.
Save the Dynamic VCard settings and open the public card. Review the buttons in the actual card layout before comparing another style.
Changing only one setting at a time makes it easier to identify which style works best.
The Dynamic VCard screen includes a preview area beside the customization controls. Use this preview to inspect how the selected colors and button options work together.
While reviewing the preview, check:
The editor preview is useful for design decisions, but the complete public card should still be opened after saving because the live card may contain more sections than the preview panel.
After selecting the colors, sticky button position, and button style, select Save.
The Dynamic VCard form records:
The screen provides a Save button and a Discard button beneath the preview and customization controls.
Wait for the success confirmation before leaving the section.
Select Discard to leave the Dynamic VCard section without saving the current changes.
The system returns to the VCards area, and the previously saved Dynamic VCard settings remain in place.
Discard does not delete the digital card or remove the selected template.
After saving:
Pay particular attention to sections containing longer descriptions, images, products, services, and testimonials because their backgrounds and text may use several of the selected colors.
Begin by selecting the two main brand colors.
Use one as the Primary Color and one as the Background Secondary Color. Then choose a main Background Color that provides sufficient contrast.
Next, configure the Label Text Color and Description Text Color. Confirm that both remain easy to read.
Set the Cards Background so content panels can be distinguished from the main page.
Finally, choose the Button Text Color and Social Icon Color.
This order reduces the need to repeatedly change text and icon colors after the backgrounds have been selected.
A visually attractive card must also remain usable.
Avoid combinations such as:
Also avoid using too many unrelated colors. A professional Dynamic VCard normally works best with:
Use the preview and live public card to confirm that visitors can understand where to click and can read every section without difficulty.
At the end of this chapter, the user should understand how to customize the Dynamic VCard’s complete color system, position the sticky action button, select from ten button styles, preview the design, save the changes, and review the completed public card.