Campaign Elements

Triggerbee provides a range of campaign elements for you to be able to build world-class onsite campaigns. We divide our elements into four groups.

• Layout elements. Together with the Canvas itself, the layout elements are what you use to set the base structure of your widget. 
• Static elements. Use static elements like text and images to fill your widget with creative content.
• 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.
• 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.

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

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 width and height will also adjust automatically when adding elements 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. 

Containers

The canvas can have one or more containers. Use containers for dividing your campaign 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. The width of the containers are 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. 

Spacer

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

Static Elements

Image

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

Text

The text adds text to your widget. Use one text element per formatting, eg. if you want two different text sizes, we recommend that you use two text elements. It is possible to add new rows and formatting within the same text element though. If you want a specific word to be in another color, bold or bigger you can do that in the "tiny editor" next to the text on the canvas. 

Sticker

The sticker element is a floating element placed on top of the canvas with a bit of overlap, adding some effect to the widget. 

Tip! Remove the background color of the sticker and add an image instead, that way you can have any shape you want!

Bullet List

The bullet list element allows you to list arguments or contents 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. Buttons can have cool animations, to make them wiggle or color-swipe on hoover for instance.

Iframe

Upload any link to the iframe element to have Triggerbee render the content from that iframe into your campaign. Perfect for adding videos to your campaign! 

Form Elements

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 and date picker to gather any other data of your choosing. The collected data will be added to the corresponding contact fields of each visitor in Triggerbee, and may be sent to your integrated systems. 

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. 

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
• 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 shoesize, 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
• Single-line field
• Radio buttons
• Checkboxes
• Date field
• Button Choices
• Dropdown

Consent

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.

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. You can read more about Form Settings here. 

Triggerbee Elements

Deadline

The deadline element 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

The Coupon Code elements are dynamic elements 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 Element.
• Unique Coupon Code: if you want to generate unique discount codes for each visitor, you can use the Unique Coupon Code Element. This element requires configurations, read more about it here.

Close Button

Per default, Triggerbee will add a close button to your widget. But if you want to design your own, make sure to add the close button element. This will allow you to change the style, size, position and action of your close button.

• Close Style. Any close button with an X indicates that the widget will be closed on click, such are the settings of these buttons.

• Minimize Style. The minimize buttons (arrow up/down) allow you to switch to another state, ie. minimize (or maximize) the widget. Is mainly used with the teaser slide. If you have a teaser slide already, the action of the button will be switched to "change slide" automatically.

  

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.

Share with friend

The sharing element 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.

Custom Code

Use custom HTML, CSS, and JavaScript directly within the Campaign Designer.

In the scope of your code you have access to the widget with the "widget"-object. You can select HTML objects in your widget using for example this code, which would select an HTML object with the html-id of "myButton":

    const couponCodes = widget.querySelector('#myButton]');

If you want to select objects created in the Designer, such as Deadline campaign or specific form elements, you can make use of the External ID-property, which is available on all components in the Designer.

const couponComponent = widget.querySelector('[data-external-id="couponCodes"]');
const winLabel = widget.querySelector('[data-external-id="winnerLabel"]');