Onsite Campaigns: Elements

The Widget Elements

Layout elements. Together with the Canvas itself, the layout elements are what you use to set the base structure of your widget. Read more about them here
Static elements. Use static elements like text and images to fill your widget with content. Read more about these elements here.
Form elements. Form elements require input or action from the user. Use these to collect personal data, have the user answer questions or perform an action. Read more about form elements here.
Triggerbee elements. The Triggerbee elements are unique, dynamic elements to enhance your widget even more. Use the countdowns to create FOMO, or use the Coupon Code to give the user a simple click-to-copy functionality. Read more about these elements here.

Note: This article will only describe the functionality of the elements. Some settings will be mentioned, but to learn more about all settings, and how to edit the elements in detail, read this guide about element settings

Layout Elements


The Canvas is the base of the Widget. This is where you set your base width, height, and background settings. The width will also adjust when adding elements into the canvas.

Note: If you want the whole widget to be clickable, select the option "whole slide is a button" at the bottom of the edit menu. Then select what should happen on click. 


The widget canvas can have one or more containers. Use containers for dividing your widget into sections. The containers are vertical and new ones will always be added on the right side. If the height of one container is adjusted (by adding elements to it), the other ones will inherit. 

Align the content of the container by selecting top, center or bottom at the top of the edit menu.

Adjust the width of the containers by the percentage of the canvas width. When removing, or adding a new container, the width of the others will adjust accordingly.


Use the spacer element to create extra space between your elements. Adjust the height of the spacer in pixels.

Static Elements


Use images to add graphic elements to your widget. Images can be both static and dynamic (gif). Select from your previously uploaded images, or upload a new one. 


The text element should be self-explanatory, use it to add text to your widget. Use one text element per formatting, eg. if you want two different text sizes, you will need two text elements. It is possible to add new rows and spacing within the same text element though. 

Some of the text formattings, as changing the text to bold, italic and or underline is edited in the tiny editor next to the text. The rest of the settings are available in the right menu as for the rest of the elements.

Form Elements

Input Fields

Use Input Fields to collect data from your visitors. Use the input field for email to collect emails, phone input for phone numbers etc. The collected data will be added to the corresponding contact fields of each visitor in Triggerbee, and may be sent to your integrated systems. 


For users within the EU, that are working under the GDPR law, the Consent element can be used to collect consent from your visitors. If you are using the Triggerbee Consent Plugin, the Consent will be collected and stored within Triggerbee according to your setup. If not, the consent will still be collected, but only as opt-in true/false on the contact card of your visitors.


There are two types of buttons.

  • Submit Button: The submit button should be used when you have a form in your widget, ie. something you want to "submit" to Triggerbee. When using this, the Form Settings option will activate for you to enter your submit settings, ie. what should happen on submit.
  • Regular Button: The regular button (or just "button") is used for redirecting your visitor somewhere, either within your webpage or outside. It can also be used to switch between the different states in the widget. 

Triggerbee Elements


Note: As per April 2020, the Countdown elements has not yet been released, but will be available soon.

The countdown elements are used to create hype and/or FOMO around your promotion. There are two types of counters.

  • Countdown Timer: The timer counter should be used for short deadlines, to have the visitor perform a certain action within the same session. For example "Special offer! Only Valid for 15 minutes and 27 seconds".
  • Countdown Deadline: The deadline counter should be used for longer deadlines, eg. deadlines a couple of days, weeks from now. For example "Summer edition will be released in 4 days 3 hours 26 minutes".

Coupon Code

The Coupon Code element is a dynamic element where you can add your discount code together with a copy-button, which have built-in copy functionality, ie. when clicked, the code will be copied.

Instagram Follow

The Instagram Follow element is used when you want to add an Instagram-follow as a condition for your promotion, eg. "Follow us on Instagram to get your discount code". It can also be combined with newsletter signup or some other condition. The user will have to go to your linked Instagram profile before they can access their discount code.

🎉  Now that you know all about the elements, it's time to learn about the settings and adjustments that can be done to refine your widget.

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