Customizing a Web Card

Customizing a web card involves tailoring its content, design, and functionality to align with your specific goals, brand identity, and user preferences. Here are the steps to customize a web card effectively:

In the Web Card page editor, the Web Card is displayed on the right-hand side, and the Menu is displayed on the left-hand side.  In the Menu section, the following is displayed.

• Elements
• Configuration
• Display Settings 
• Card Settings

You can customize the Title, CTA, and Close Button by clicking on the Elements Icon in the Left Menu or clicking each element individually. 

Elements
Click on the Elements icon in the left menu. This will list out all the Elements in a Web Card.

• Floating Bar has 3 Elements: Title, CTA, and CloseButton. Click on each Element individually to customize.
  
  
• Slide-in: has 5 elements: Image, Title, Subtitle, CTA, and Close Button. Click on each Element individually to customize. 

Note:  Hide or Show the Elements by clicking on the Eye icon.
 

Configuration

• Click the Configuration icon in the left menu, the following message is displayed.
  
• Click the Web Card to display the Elements on the left Nav or you can click on each Element individually to customize. 

• Click on the Image on the page editor, the Image section opens to edit the Image and change [the styling. ]

   

  Add an image for the Web Card, the added Image is displayed in the editor page. 

• Click on the Title on the page editor, the Title section opens to edit the Title and change the styling. 

• Click on the Subtitle on the page editor, the Subtitle section opens to edit the Subtitle and change the styling.
  

  
  

• Click on the CTA on the page editor, and the CTA section opens. Under CTA, 

  • Button Text: enter a name for the button.
  • URL: add a URL to which you would like the visitor to be directed. 
  • Report As: In the drop-down, select either
    • None: to only reflect the CTA Clicks
    • Conversion: to reflect the CTA Clicks and Conversions in the Metrics section for a Web Card as well as in the Reports
  • Open In New Tab toggle is enabled, allowing the CTA URL to open in a new tab. When disabled it will open in the same tab.

    
    
    

• Click on the Close button, the Close button section opens with Content and Style options. You can select any option in drop down.

   .

• Note : Style Options is available for all the Elements . The Style options contain the following:  Visibility, Typography, Border, Background, Spacing, and Dimension. You can make the necessary changes under each section. To know more on styling, click here

  
  

Display Settings

Click Display Settings on the left panel, Under Display Settings, you have two sections, Position and Animation

Position:
A Floating Bar web card, has two positions for Desktop and Mobile view. 
A Slide-in web card has nine positions for Desktop view and three positions for Mobile view. You can position the Slide-in Web Card to any part of the Web Page.

 

Animation:

You can select any Animation effect from the drop down

                 

Card Settings

• Click on Card Settings, Card Settings opens with two tabs Content and Advanced.
  
  • Content: To make the page more interactive, add JavaScript (Optional).
     
  • Advanced Settings: in Advanced settings you can use specific attributes and techniques to add more customization and control to elements. Here are three settings: Element Id, Class Name and Custom CSS. 
    • Element Id: Use Element ID to link to a specific section of a page. Learn more about Element Id here.
      
    • Class Name: Give a Name to define the Custom CSS for a particular section.
    • Custom CSS: Create Custom CSS for unique styles and selectively apply it to specific elements, enhancing visual appeal, and aligning with branding across the Web Card.
      
      
  • Once the changes are made, click Publish.
    
    Note: Once a Web Card is published it cannot be deleted.