How To
Customizing Your Trigger
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:
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:
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:
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:
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:
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:
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:
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:
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.
Conclusion
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.
