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.
8. Then, drag and drop the CTA button, Close button, or Next Screen button onto the canvas.
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: A concise but useful description for shoppers with visual impairments or who otherwise use assistive technology.
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: A concise but useful description for shoppers with visual impairments or who otherwise use assistive technology.
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: A concise but useful description for shoppers with visual impairments or who otherwise use assistive technology.
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, you can duplicate additional layers by clicking on the layer, then selecting the option from the layer options drop-down menu. 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.