Adding a tab preview to any Bluecore Site™ campaign allows your website visitors to reopen a closed or minimized on-site campaign. A tab preview can be added to any campaign, and is configured independently of other screens in the campaign.
Set up a Bluecore Site™ campaign by following the steps outlined in this article. Adding a tab to a Bluecore Site™ campaign doesn’t require an extra campaign setup and can be added to your existing campaign creatives. After you’ve configured the message settings and targeting rules, follow the below steps to configure a tab.
Navigate to a campaign in VTE.
Click the + icon at the top of the editor.
Click Add Tab. A tab button is added at the top of the canvas next to the screen 1 and 2 buttons.
Configure the following sections: tab settings, design, position, animation, and collapse settings.
TAB SETTINGS
Configure the follow section to determine how and when the tab should appear within a campaign.
How to render the campaign: Show the campaign initially collapsed with just the tab, expanded with the creative of the campaign, or with the campaign and tab together.
How long the tab should persist: Show the tab after it’s first viewed to customers until the user is within the same session, the same visit, or refreshes the page.
Should the tab be visible after it has been engaged with: Show the tab on the same page, show the tab on the next page (following the user), or don’t show the tab again at all.
Show the tab when clicking outside of the campaign: Show the tab when the campaign is clicked outside of, allowing the tab to be visible of the campaign is closed.
DESIGN
The text editor is similar to the text widget that’s available when creating the content of the campaign. Enter and configure the text here that appears when the tab is displayed on the website. For example, click to open or sign up now!
After the text has been added and styled, configure these other design elements:
Accessibility label: A concise but useful description for shoppers with visual impairments or who otherwise use assistive technology.
Custom CSS Class Name: Add a class name here to automatically add to the CSS layer.
Font size, line height, and letter spacing
Text Transform: None, capitalize, upper case, lower case.
Padding: Left, right, top, and bottom padding (pixels).
Border and Border Radius: Configure a border for the tab (left, right, top, or bottom) and adjust the radius of the border.
Container Background and Color: Change the background color of the tab or use an image as the background.
POSITION
Configure the following settings to determine the position of the tab on your website.
Tab Location: Select the top, bottom, left, or right position on the website.
Tab Alignment: Align the tab left, center, or right on the website.
Padding: Left, right, top, or bottom padding (pixels).
ANIMATION
Animation Effect: Catch the users attention by selecting an animation . Enter a start delay and a speed for the animation.
COLLAPSE SETTINGS
Indicate if the campaign creative should collapse on all close actions. For example, clicking the X on the campaign. If no is selected, configure the close buttons to collapse the creative.
Yes: This setting changes all buttons of the campaign to automatically convert into a collapse setting. This setting prevents the user from closing the tab.
No: This setting allows close buttons on the campaign to stay as-is, which allows you to set up the campaign to dismiss both the campaign and the tab.
SAVE AND LAUNCH
After you’ve set up the above configurations, you can save and launch the campaign!