Use buttons within your on-site campaigns to direct users to complete an action or follow a workflow. There are three different types of buttons that can be used when building a popup.

Access the Bluecore Site™ Visual Template Editor by following the below steps.

1. Navigate to the flag icon on the left-hand navigation.
2. Go to Site.
3. Then Campaigns.
4. Click Create New Campaign.
5. Go to the Message tab.
6. Click Create from Existing or Create in VTE.
7. Add a layer to begin using the below element.

Learn more about each button type below.

CALL-TO-ACTION BUTTON

A call-to-action button can be used to drive a user to a specific link within the popup. For example, after they've entered their email address, direct them to continue shopping, view their coupon code, or link a specific product or page on your site.

Design

Configure a button design using the button editor or upload the button as an image using the image library.

  • Custom CSS Class Name: Add a class name here to automatically add to the CSS layer. CSS is a common reference for the styling associated with HTML.

  • Accessibility Label: The text a voice machine will read for visually impaired users.

  • Button Editing Options: Button text, link, open the link in a new tab, size, color, font, decoration, text transform, height, letter spacing, and border.

  • Padding: Inner top/bottom and left/right padding, overall left, right, top, and bottom padding (pixels). Padding is used to align the element in the design.

  • Container Background Color: Change the background color of the button.

Position
You can drag and drop the element on the canvas on the right-hand side, or apply any of the below position options.

  • Left and Top Position: Enter a percentage of left and top alignment.

  • Layer Alignment: Select auto (horizontally/vertically), left (vertically), center (vertically), or right (vertically) alignment on the layer.

  • Stick to side: Offset the element to a specific side (pixels). This option helps with the responsiveness of the button when the popup is resized.

Animation

  • Animation Effect: Catch the users attention by selecting an animation for the text. Enter a start delay and a speed for the animation.

CLOSE BUTTON

Configure a button design using the button editor or upload the button as an image using the image library.

Design

  • Custom CSS Class Name: Add a class name here to automatically add to the CSS layer. 

  • Accessibility Label: The text a voice machine will read for visually impaired users.

  • Button Text: Enter text or a simple x for a dismissive call-to-action (for example, thanks, not for me). 

  • Button Editing Options: Size, color (button and font), font, decoration, text transform, height, letter spacing, and border.

Position and Animation
The position and animation settings available for a close button follow the same options available in explained above in the call-to-action section.

NEXT SCREEN BUTTON

The next screen button is used to drive users between the different screens of the popup. It cannot be used to link externally from the popup.

Design

Configure a button design using the button editor or upload the button as an image using the image library.

  • Custom CSS Class Name: Add a class name here to automatically add to the CSS layer. 

  • Accessibility Label: The text a voice machine will read for visually impaired users.

  • Button Editing Options: Button text, link, open the link in a new tab, size, color, font, decoration, text transform, height, letter spacing, and border.

  • Padding: Inner top/bottom and left/right padding, overall left, right, top, and bottom padding (pixels).

  • Container Background Color: Change the background color of the button.

Position and Animation
The position and animation settings available for a close button follow the same options available in explained above in the call-to-action section.

Layer Options
After an element has been added to a layer, layers can be duplicated using the layer options at the top right-hand side of the screen. Duplicate the layers themselves, or duplicate the layers to any additional screens of the popup.


Now that you've added buttons to your campaign, add text, images, and dividers, coupons, or email capture.

Did this answer your question?