Triggerbee provides a range of campaign components for you to be able to build world-class onsite campaigns. We divide our components into five groups.
Layout Components: Together with the Canvas itself, the layout components are what you use to set the base structure of your widget.
Static Components: Use static components like text and images to fill your widget with creative content.
Form Components: Form elements require input or action from the user. Use these to collect personal data, have the user answer questions or perform an
action.Triggerbee Components: The Triggerbee components 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.
Survey Components: Use stars, smileys, thumbs, NPS, or CSAT components in your widget to turn it into a survey and let your visitors rate your features or brand.
This article will only describe the functionality of the components. Some settings will be mentioned, but to learn more about all settings and how to edit the components in detail, read this guide about component settings.
Layout components
Canvas
The canvas is the base of the campaign. This is where you select the layout and position of the campaign, and enter your base width and height. The height will adjust automatically when adding components to 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.
In the canvas, you will also find settings for Transitions, which can make your campaign slide or fade in.
Containers
The canvas can have one or more containers. Use containers for dividing your campaign into sections, and are particularly useful for having an image on one of the sides of your Form.
Containers are vertical, and new ones will always be added on the right side. If the height of one container is adjusted (by adding components to it), the other ones will inherit. The width of the containers is decided by percentage. When removing or adding a new container, the width of the others will adjust accordingly.
Align the content of the container by selecting top, center or bottom in the Vertical alignment setting.
Columns
By default, components are stacked horizontally within your containers. Use columns to put components vertically. This is useful for having two buttons, or email + submit button next to each other. For these two use cases, we also have premade components ("Two buttons" and "Email & Submit").
Add components to your columns from the +ADD options directly in the editor or from the layout menu.
Spacer
Use the spacer component to create extra space between your components. Adjust the height of the spacer in pixels.
Static components
Image
Use images to add graphic components to your widget. Images can be both static (JPG, PNG, SVG) and dynamic (GIF). Select from your previously uploaded images, upload a new one, or link to an external image.
Headline & Text
The headline and text components add a text field to your widget. The headline component will add a <h> tag, and the text component a paragraph (<p>).
Text components will get your Brand Settings by default, but feel free to adjust to your specific campaign.
Use one text component per formatting, eg, if you want two different text sizes, we recommend that you use two text components. It is possible to add new rows and formatting within the same text components, though. If you want a specific word to be in another color, bold, or bigger, you can do that in the "tiny editor" on top of the text.
Sticker
The sticker component is a floating component placed on top of the canvas with a bit of overlap, adding some effect to the widget.
Tip! Remove the background color and text in the sticker, and add a background image instead, that way you can have any shape or image you want!
Bullet List
The bullet list component allows you to list arguments or content to support your campaign. Add more items in the menu on the right-hand side, and upload any icon of your choosing.
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 campaign, close the campaign, or execute scripts. Buttons can have cool animations, to make them wiggle or color-swipe on hover, for instance.
Buttons will be styled according to your Brand Settings by default, but can be adjusted to fit your current campaign under the Style tab.
Iframe
Add any link to the iframe component to have Triggerbee render the content from that website into your campaign. Perfect for adding videos to your campaign!
Form components
Input Fields
Use Input Fields to collect data from your visitors. We offer a set of default input fields, such as email and phone number, but also custom fields like radio buttons, single line field and a date picker to gather any other data. The collected data will be added to the corresponding contact fields of each visitor in Triggerbee and may be sent to your integrated CRM or email tool.
One input field must always be required, but the rest can be optional. You will find this setting in the Field Data menu of each input field.
Buttons will be styled according to your Brand Settings by default, but can be adjusted to fit your current campaign under the Style tab.
You can add Validation to make sure that your visitors are adding their phone numbers or email addresses correctly.
When adding input fields, a submit button will be added automatically. A submit button is necessary to submit the form, and differs from regular buttons that are used for links and other actions.
Default Input Fields
The default input fields will automatically be saved to the corresponding fields in Triggerbee, and map correctly to your integrated CRM or Email tool. They are:
Email
Name
Separate First and Last Name
Basic Phone Number and International Phone Number
Custom Input Fields
The custom fields are fields that you can use for collecting any other data that you wish. For instance, use single-line to collect postal numbers, radio buttons for gender, checkboxes for pets, dropdown for shoe size, etc. Anything is possible!
These fields will not automatically be mapped to Triggerbee or your integrated tool, but this is easily done in the Form Settings and Field Data settings.
The custom fields available are:
Multi-line field: Used to collect comments or longer text input
Single-line field: Used to collect text or numerical inputs, such as addresses, postal numbers, and personal numbers. There are some premade validations available for ID numbers and zip codes, but you can also use custom RegEx.
Radio buttons: Used for single-selection, ie, when you want visitors to select from a list of options.
Checkboxes: Used for multi-selection, ie, when you want visitors to select one or more options from a list.
Date field: Used to collect birthdays or other dates
Button Choices: A visual version of radio buttons, where you can use icons or icon + text for your selection. Suitable for genders or preferences.
Dropdown: Used for single-selection, ie, when you want visitors to select from a list of options.
Country: Allow visitors to select from a list of countries, with a flag icon. You can select specific countries or from a premade list (eg. "EU Countries").
Password: Used to create passwords when working with creating members in your CMS (Centra integration).
Consent
For users within the EU, that are working under the GDPR law, the Consent component 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.
Submit Button
The submit button should be used when you have a form in your widget, ie. something you want to "submit" to Triggerbee or your CRM. When using this, the Form Settings option will activate for you to enter your submit settings, ie. what should happen on submit. You can read more about Form Settings here.
Triggerbee components
Deadline
The deadline component is 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 & Unique Coupon Code
The Coupon Code components are dynamic components where you can add your discount code together with a copy button, which has built-in copy functionality, ie. when clicked, the code will be copied.
Coupon Code: If you would like to use a static discount code for all visitors, for example "Welcome10," use the Coupon Code component.
Unique Coupon Code: if you want to generate unique discount codes for each visitor, you can use the Unique Coupon Code component. This component requires configurations; read more about it here.
Close Button
By default, Triggerbee will add a close button to your widget. We have some premade styles for the button, but you can upload your own to match your brand. You can also change the size, color and position of the button. Close buttons come in two main styles:
Close Style. Close buttons with an X indicate that the widget will be closed on click.
Minimize Style. The minimized style (arrow up/down) allows you to switch to another step, ie, minimize (or maximize) the widget. It is mainly used with the minimized step (teaser). If you have a minimized step already, the action of the button will be switched to "minimize widget" automatically.
Instagram Follow
The Instagram Follow component 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.
Share with a friend
The sharing component has two variants, one displayed for browsers that have share dialog support (all phones and some desktop browsers) - and one variant for browsers without share dialog. For both variants, you may select a text and link to share.
Note: The "Share with a Friend" component is only available in Referral campaigns.
Custom Code
Use the Custom Code component to add custom HTML, CSS, and JavaScript to your campaign. This is useful when you want to add some cool HTML block that we currently don't have as a premade component.
Note: Custom Code differs from Custom Script in the sense that Custom Code is an HTML component within the widget for adding extra visual elements. The Custom Script feature allows you to add CSS and JavaScript (not HTML) for extra styling and tracking.