Onsite Campaigns: Element Settings

This article will describe the different settings available for each element in the Onsite Campaign Editor. The settings are divided in 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), such as width, colors and margins, while some are unique for its element type (special), eg. checkbox color for Consent. 


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.

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, RGBA or HSLA. 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 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.

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
For pure text elements, there will also be a tiny editor in the canvas next to the element, for making the text bold, italic or underlined. 

Font Family
Change the font in the font family dropdown.

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.

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. U pload your icon here, or select from your previously added icons.

Note: If you want to add an emoji, there's no need to upload it is an icon. Simply go to any emoji website and copy-paste it as text 😄👍

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

Actions

These options are available on the regular 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 Slide (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. 

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 add the link to want to link to. 

Execute Script

This option is available on all buttons. Use this function to add any script to your widget, which will be triggered on the button click.

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

Did this answer your question? Thanks for the feedback! Please reach out to [email protected] if there's anything you'd like to add. There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us