Widgets are the different build blocks you use to create your popup structure/design. Each of these has different functions and settings. Read more about each of these below.
- Block
- Button
- Checkboxes
- Columns
- Divider
- Dropdown
- Form
- Image
- Input
- NPS
- Radio buttons
- Slider
- Space
- Text
- Textarea
Text
Add a Text widget by clicking Add widget and then select the Text widget and finally click Add.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
Write your text in the input field and do simple styling changes with the buttons above the text field. For more detailed styling options please click the Style tab.
Notice that you can select parts of the text to only style that selection. You can for example change color, size, thickness, attached link, etc.
You can also add an external font and use it in your popup by clicking the plus icon next to the font dropdown. You will get a popup where you add the link to the font and also set the name for this. Notice that this must match the font-family name as this will be set in the CSS rule. After you added the font it will be available in the dropdown.
Notice If it's a font family already present on your site, you should not use this Add font function ( + ) at all. You can just type or paste the font family name in the dropdown input field where the current font is displayed.
Image
Add an Image widget by clicking Add widget and then select the Image widget and finally click Add.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
You can add an image in two different ways.
1. By entering the image URL directly in the input field.
2. By uploading the image from the computer, via the button. The image will be uploaded to our servers and you will get a unique URL that is populated in the input field. This can be re-used in other projects if wanted.
You can also add actions to an image. You can for example add a click interaction action and set the response to go to a specific URL. To do this click the Action tab and then click on Add action. Then click the three dots and choose Edit action. Then choose your interaction type and add a response to that action.
In the example setup in the image above, clicks on the image would redirect the visitor to the campaign page.
Button
Add a Button widget by clicking Add widget and then select the Button widget and finally click Add.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
You set your copy in the input field and then set your styling for this with the buttons above. For more styling options please click on the Style tab.
To set the functionality for the button, click the Action tab and then Add action. Then click the three dots and choose Edit.
Once inside the action settings, you first choose Action type and then the event type. Then you need to set a response that should be triggered when the action happens.
If you like you can add a Condition that states if the response should be called or not. This could be useful if you for example have a form and want to base the response upon how the end-user answers a specific question.
In the example above we have a setup that will do two things when the user clicks on the button. First, the form will be submitted and then the next page in the form will be shown.
The above settings is how to setup a form that has a two page structure. On the first page we have our form widgets ( where we and ask the question(s) ) and on the second page we show the thank you message that will be shown when the user has submitted the form.
Columns
Add a Columns widget by clicking Add widget and then select the Columns widget and finally click Add.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
When added there are two columns by default but you can easily add more if you like. These are set to 50% width each by default.
Add widgets to these columns to get a column layout. This is also the easiest way to align widgets horizontally. In the example above we have added an input field in the first column and a button in the second column.
Notice that you might need to add a Block widget if you want to align vertically as well.
Block
Add a Block widget by clicking Add widget and then select the Block widget and finally click Add.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
Block is used for aligning child widgets vertically. You can also use Block widgets to easily group widgets and set device type (visibility) for these so that these are all only visible for specific devices. This is done by clicking the device icon for any widget. Setting this on a parent widget will change the visibility for all child widgets as well.
Space
Add a Space widget by clicking Add widget and then select the Space widget and finally click Add.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
The Space widget is used for quickly adding a space between widgets. This can however also be accomplished by adding a top/bottom margin on the widget you wish to have a space from in the Style tab of that widget.
Divider
Add a Divider widget by clicking Add widget and then select the Divider widget and finally click Add.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
This is used for adding a distinct line between widgets. The Divider can be customized by changing styling in the Style tab.
Form
Add a Form widget by clicking Add widget and then select the Form widget and finally click Add.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
A Form widget has one Page by default. But you can easily add more pages if you wish to build a multi-step form. In the example image above we have a two-page structure where we have our input widget and a button and when the user submits the form we show the second page with the thank you message.
Notice that you can only have one Form widget so it's important that this is added at the correct place. This will differ for each layout but usually, it's easier if the Form widget is added as far up in the hierarchy as possible.
Dropdown
Add a Dropdown widget by clicking Add widget and then select the Dropdown widget and finally click Add. To be able to do this you have to add a Form widget first.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
First, start with changing the Report column name to one that makes sense in the form result later. We recommend entering the question you ask. In this example, we set it to Preferred language.
Then select if this is a required question or not. If this is unchecked you might receive empty answers for this question as this won't be validated when the form is submitted.
If you leave this checked you can also change the error message that will appear if a user does not select an answer for this question.
Now it's time to set your answers. First either set a placeholder text or use the default one. Then add your answers by filling out the value and label for these. Label is what the option will say and value is the value that will be submitted in the form. If you do not have a good reason just enter the same value for both inputs.
Notice that you can easily add more answers by clicking Add item. You can also (re-)sort these by dragging n dropping these as you wish by grabbing these to the left of the x.
You can change the styling for this widget by clicking the Style tab.
When you are done click Save changes and continue building your popup.
Checkboxes
Add a Checkboxes widget by clicking Add widget and then select the Dropdown widget and finally click Add. To be able to do this you have to add a Form widget first.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
First, start with changing the Report column name to one that makes sense in the form result later. We recommend entering the question you ask. In this example, we set it to Important product features.
Then select if this is a required question or not. If this is unchecked you might receive empty answers for this question as this won't be validated when the form is submitted.
If you leave this checked you can also change the error message that will appear if a user does not select an answer for this question.
Now it's time to set your answers. Add your answers by filling out the value and label for these. Label is what the option will say and value is the value that will be submitted in the form. If you do not have a good reason just enter the same value for both inputs. You can also set if one or more answers should be preselected.
Notice that you can easily add more answers by clicking Add item. You can also (re-)sort these by dragging n dropping these as you wish by grabbing these to the left of the x.
You can also add a free answer box to the last answer by checking the Toggle text area for last option. This will show a text area where the user can enter their own answer when the checkbox for this answer is checked. In the example, we have the answer choice Other tied to this.
You can change the styling for this widget by clicking the Style tab.
When you are done click Save changes and continue building your popup.
Radio buttons
Add a Radio buttons widget by clicking Add widget and then select the Radio buttons widget and finally click Add. To be able to do this you have to add a Form widget first.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
First, start with changing the Report column name to one that makes sense in the form result later. We recommend entering the question you ask. In this example, we set it to Our service.
Then select if this is a required question or not. If this is unchecked you might receive empty answers for this question as this won't be validated when the form is submitted.
If you leave this checked you can also change the error message that will appear if a user does not select an answer for this question.
Now it's time to set your answers. Add your answers by filling out the value and label for these. Label is what the option will say and value is the value that will be submitted in the form. If you do not have a good reason just enter the same value for both inputs. You can also set if one or more answers should be preselected.
Notice that you can easily add more answers by clicking Add item. You can also (re-)sort these by dragging n dropping these as you wish by grabbing these to the left of the x.
You can change the styling for this widget by clicking the Style tab.
When you are done click Save changes and continue building your popup.
Slider
Add a Slider widget by clicking Add widget and then select the Slider widget and finally click Add. To be able to do this you have to add a Form widget first.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
First, start with changing the Report column name to one that makes sense in the form result later. We recommend entering the question you ask. In this example, we set it to Rate our service.
Then you can set the range of the slider by setting the minimum and maximum values. You can also set the default value (where the slider handle should be on load).
You can change the styling for this widget by clicking the Style tab.
When you are done click Save changes and continue building your popup.
NPS
Add an NPS (Net Promotor Score) widget by clicking Add widget and then select the NPS widget and finally click Add. To be able to do this you have to add a Form widget first.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
First, start with changing the Report column name to one that makes sense in the form result later. We recommend entering the question you ask. In this example, we set it to Recommend us.
Then set the min and max labels. You can change the styling for this widget by clicking the Style tab.
When you are done click Save changes and continue building your popup.
Input
Add an Input widget by clicking Add widget and then select the Input widget and finally click Add. To be able to do this you have to add a Form widget first.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
First, start with changing the Report column name to one that makes sense in the form result later. We recommend entering the question you ask. In this example, we set it to Email.
Then select if this is a required question or not. If this is unchecked you might receive empty answers for this question as this won't be validated when the form is submitted.
If you leave this checked you can also change the error message that will appear if a user does not select an answer for this question.
Choose the type of input. In this example we choose Email. This will add email validation to the input field. You can change the error message for wrongly entered email addresses if you wish.
You can change the styling for this widget by clicking the Style tab.
Change the placeholder if you like and then click Save changes and continue building your popup.
Textarea
Add a Textarea widget by clicking Add widget and then select the Textarea widget and finally click Add. To be able to do this you have to add a Form widget first.
Notice that you can multi-select widgets to add more than one at a time. These will be added in the order you've selected them but can be moved later.
First, start with changing the Report column name to one that makes sense in the form result later. We recommend entering the question you ask. In this example, we set it to Feedback.
Then select if this is a required question or not. If this is unchecked you might receive empty answers for this question as this won't be validated when the form is submitted.
If you leave this checked you can also change the error message that will appear if a user does not select an answer for this question.
Enter the placeholder for your textarea. You can change the styling for this widget by clicking the Style tab.
When you are done click Save changes and continue building your popup.