Campaign Element Settings

This article will describe the different settings available for each element 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 elements ( standard settings), such as width, colors, and margins, while some are unique for their element type (special settings), eg. color of the checkbox for Consent, or styling for the close button.

Standard Design Settings

The standard settings apply to almost all of the elements, to change their dimensions, background, and margins.

Width and Height

Change the width and height of elements in pixels or percent. You can also use the "scrubber" to automatically change the width/height by dragging the dot back and forth.

Horizontal Align

If you decrease the width elements to less than 100%, the aligning option will activate. This allows to you align the element horizontally within its parent element.

Background Color

Change the background color of the element. The color can be set through the color picker, hex or RGBA. You can also change the transparency of the color here.

Background Image

If you rather have an image as 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

Change the shape of the corners with this setting. A higher number gives more rounded corners. Change the type of setting to be able to change each corner separately. It applies according to top, right, bottom, left.

Border

Some elements can have a border. Activate the setting and select the color and size of the border. You can have different size of the border for different sides, eg. if you want to only have bottom-border.

Margin

Change the margins to move the entire element in any direction. Enter the margins in pixels to move it in relation to its parent element. Eg. the widget canvas will move around on the webpage itself (parent element), while buttons and other widget elements will adjust within the widget. Change the type to switch between editing all sides simultaneously, or one by one.

Padding

Change the padding of the element to adjust the space between the outer edges of the element and its content. Just like margins, padding can be changed all sides at once, or separately.

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 element the shadow should spread.

Hide on Mobile/Desktop

Use this setting to hide a certain element on desktop or mobile devices. Maybe you don't need the image on smaller devices or want to switch between headlines.

Special Design Settings

The special settings apply only to some of the elements, depending on their functionality.

Text Formatting

For text elements, or elements containing text (consent, Instagram, etc.), there will be text formatting available in the edit menu.

Tiny Editor
Elements that have text in them, like text elements 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 element settings menu.

Font Family
Change the font in the font family dropdown. Pick one of your own fonts or select from the default fonts.

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
Change the alignment of the text (the contents horizontal position within the element).

Font Size & Line Height
Change the font size and line-height by pixels. The Line height will automatically adjust when you change the font size, but can be edited separetely.

Font Weight

Change the weight of the font. All font weights are available for all default fonts, but for your custom fonts- each weight has to be uploaded in order to be applicable.

Required Fields

All input fields, except for email, can be either required or not. Simply check or uncheck this box to toggle.

Vertical Align

If you have more than 1 container, you can change the vertical-align of them, ie. the position of the content within the container from top, center to bottom.

Icon Image

For buttons, you can upload icon images, ie. an image that will be rendered inside the button. Upload your icon here, or select from your previously added icons.

Note: If you want to add an emoji to your button, there's no need to upload it is 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

Use the regular text formattings to change the font, color, size, etc. for the consent text. Apart from that, you can also change the actual policy text, the link to your policy and the color of the checkbox.

Image Size

Image sizes can be adjusted with the slider. Simply drag-and-release to desired size.

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 button click. Will redirect the user in the same window.
Open URL in new tab: Add the URL to the link you want to open on button click. Will redirect the user in a new window.
Change Step (only active if widget has more than 1 slide): Select what slide you want to change to on button click.
Close widget: Select this option to simply close the widget on button click.
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 above actions, there are also some more advanced actions you can use.

Log a goal in Triggerbee: Add a goal to all visitors that clicks 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 to automatically happen after X seconds. Perfect for auto-closing after submissions!

Whole Slide is a button

This option is available on the Widget Canvas. Activate it if you want your whole widget to link somewhere, ie. if you click anywhere on it. Then select the wanted action of the click.

🎉 Nice job! Now that you have designed your widget, let's move on to the Campaign Settings.