This article will describe the different settings available for each component in the Campaign Editor. For the purpose of this guide, we have divided the settings into Design- and Action Settings. Design settings are settings that change the appearance of the widget, while Actions are settings for links, submissions, scripts, etc.
Some of the settings apply to all the components (standard settings), such as width, colors, and margins, while some are unique for their component type (special settings), eg. the color of the checkbox for Consent, or styling for the close button.
Standard Design Settings
The standard settings apply to almost all of the components, to change their dimensions, background, and margins.
Width and Height
Horizontal Align
If you decrease the width components to less than 100%, the aligning option will activate. This allows to you align the component horizontally within its parent component.
Background Color
Change the background color of the component. The color can be set through the color picker, hex, or RGBA. You can also change the transparency of the color here.
If you rather have an image as a background, upload one here, or select it from your previously added images. After selection, you can adjust the size- and position settings of the background image.
Rounded Corners
Border
Margin
Padding
Shadow
Change the shadow of the widget by adjusting the sliders and color.
Horizontal: Adjust the shadow from right to left.
Vertical: Adjust the shadow from top to bottom.
Blur: Adjust how transparent ("blurry") the shadow should be.
Spread: Adjust the length of the shadow, ie. how far away from the component the shadow should spread.
Hide on Mobile/Desktop
Special Design Settings
The special settings apply only to some of the components, depending on their functionality.
Text Formatting
For text components, or components containing text (consent, Instagram, etc.), there will be text formatting available in the edit menu.
Tiny Editor
components that have text in them, like text components or buttons, will also have a tiny editor in the canvas for text formatting. This is perfect for when you want to change color, size, or formatting on specific words in your text. Remember that the tiny formatting overrides any settings in the settings menu, ie. if you change the font size the tiny, you have to remove that formatting before changing it in the component settings menu.
Font Family
Color
Change the color of the text through the color picker, hex, RGBA, or HSLA. You can also change the transparency of the color.
Align
Font Size & Line Height
Font Weight
Required Fields
Vertical Align
Icon Image
Note: If you want to add an emoji to your button, there's no need to upload it as an icon. Simply go to any emoji website and copy-paste it as text 😄👍
Animation
Make your buttons a bit more creative with some animations! Have it wiggle every other second, or use the color-swipe to create a "netflix-next-episode-feeling".
Appearance on Mouseover (buttons)
With these settings, you can change the appearance of your button on hover/mouseover behavior. You can change the background color, text color, and border.
Animation on mouseover
Animations work on mouseover (hoover) too, so you can wiggle the button whenever the visitor hoovers the button. The animations available are color swipe, circle, and show icon.
Checkbox Settings
Image Size
Actions
Actions
These options are available on the regular buttons and images. Some are also available for the submit button and the close button.
Open URL: Add the URL to the link you want to open on the button click. It will redirect the user to the same tab.
Open URL in a new tab: Add the URL to the link you want to open on the button click. It will redirect the user to a new window.
Change Step (only active if the widget has more than 1 step): Select what step you want to change to on a button click.
Close widget: Select this option to close the widget with the click of a button.
No action: If you don't want to do anything on click. This is usually combined with executing a script in the script feature.
Additional action
Apart from the above actions, there are also some more advanced actions you can use.
Log a goal in Triggerbee: Add a goal to all visitors that click this button, eg. "clicked on button A" vs. B if you have several buttons in your campaign.
Add a tag to visitor: Add a tag to the visitor that clicks on this button, for instance adding "prospect" to all signups.
Open up campaign: Open up another (the other campaign must be published with the trigger "Manually" in order to appear in the dropdown)
Execute script: Use this function to add any script to your widget, which will be triggered on the button click.
Auto-trigger action: With this feature, you can have your selected actions automatically happen after X seconds. Perfect for auto-closing after submissions!
The whole Slide is a button
