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.
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.
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.
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.
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.
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.
Some elements can have a border. Activate the setting and select the color and size of the border.
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.
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.
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.
For text elements, or elements containing text (consent, Instagram, etc.), there will be text formatting available in the edit menu.
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.
Change the font in the font family dropdown.
Change the color of the text through the color picker, hex, RGBA or HSLA. You can also change the transparency of the color.
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.
All input fields, except for email, can be either required or not. Simply check or uncheck this box to toggle.
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.
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 😄👍
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.
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 sizes can be adjusted with the slider. Simply drag-and-release to desired size.
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.
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.