How To

Customizing Your Trigger

Trggr offers you different options for customizing your Toast messages. Read on to learn how to changes colors, font sizes and how to leverage font-families on your website.

Customizing Your Toast

You will find the customization panel under the “Advanced Trigger Options” tab bar beneath Step 4 (Add Toast Details). See below for an example of the panel:

Customize Your Toast UI

Changing/Adding Your Colors

The color elements you may customize on your trigger include: the background of the toast message, the color of the action button, and the color of all of the text elements in your toast.

To change a color value in your toast element, you must include the HEX (hexadecimal color) code. HEX codes begin with an # sign and include six other digits. HTML Color Codes has a useful HEX color picker if you need to generate a custom value. You will likely have brand colors you and or your design team have designated for you brand. We encourage you to leverage those HEX colors when styling your toast message.

In the example below, we are changing the Toast Background Color to a light blue by adding in a light blue HEX color code: 

Adding in HEX Color Codes

Apply the same approach to adding custom colors to all other color inputs in the customization panel: Action Button Color, Action Button Text Color, Heading Font Color, and Body Text Color

Adding Font Families

Because Trggr is rendered on your website, you have the option to include any custom fonts currently being leveraged by your own website.

By default our Toast styles are “Sans-serif.” Sans-serif font faces include Arial, Helvetica, and Verdana. If you do not include a font-family name when customizing your Toast, your fonts will render as sans-serif. If you would like to display your fonts as serif, you may simple include: serif in the font-family name input.

If you would like to include a custom font family from your website, please source the style name of your font-family. For example: a popular font family offered by Google is “Open Sans.” If you website is using Open Sans from Google Fonts, the name of your font family would be: Open Sans. You do not need to add quotes around the name of your custom font family

See the example below where the font-family name is located on Google Fonts:

Example of a Font Family Name
You may need to speak to your website developer to access the correct font-family names used on your website.

In the example below, we are using Open Sans as the font family for the Heading of our Toast. Remember, you only need to include the correct font-family name in the input. You should not surround font-family in single or double quotes:

Adding in custom font-family names

Changing the Heading and Body Font Sizes

Changing the font sizes of the copy inside your Toast is simple. You may change Heading or Body text size using the relevant and labeled inputs in the customize panel. For most users, we recommend using pixels. Trigger toast text sizes can be rendered in pt, em or rems sizes as well – but the simplest method is to use px (pixels).

Simply enter the font size you want to use for the Heading and or Body text and add the “px” label after it:

Entering custom font sizes for your Toast

Understanding Presets

Trggr offers two default presets for you to leverage. The preset panel is located beneath the “Choose a saved preset?” label as shown below:

How to select a preset for customizing your trigger

Selecting either preset will automatically update the style panel with the pre-defined colors of the preset.

The “Light Theme” is our default preset for all toast messages and features a white background with a purple action button. 

The “Dark Theme” preset reverses out the look of the toast with a dark background, a white action button, and white text.

You may elect to simply use either preset to suit your needs, or you have the option to create a reusable preset of your own if you intend on creating a number of triggers. To create your own preset you may navigate to the link shown below:

Where to find the link to create your own preset

Creating Your Own Preset

You may create a custom preset which will then become available in the drop-down menu of presets while customizing your Toast.

Click or tap the “Add New Style” button to begin creating a custom style:

Create a Preset to save for your Toasts

Simply name the preset whatever you like, and include the relevant colors, font-families and styles. Once you have added all of the customizations, press the “Add Style” button. You Preset will now be available for use whenever you want to customize a Toast message.

Add and save your preset


We are constantly adding new customizations and features for styling and personalizing your Toast message. Look for new updates on additional customization options.

Contact Us

Have questions? We’re here to help. Reach out if there’s anything we can do to assist you and your user engagement needs.