Your trigger toast features a number of customizable elements. Learn how to easily change font sizes, font families and button colors.
Note: If you are new to Trggr, consider our basics article on how to get started.
Saved Themes
Trigger comes with two standard toast styles – a default light theme, and an alternative dark theme. You can choose which theme suits your needs, or further edit either themes once you’ve selected it. Alternatively, you can create your own theme to reuse across multiple triggers by choosing the “Save your own theme here” link.
Customize Toast Background Color
Simply add a HEX value to change the background color of your toast. A HEX (hexadecimal) color is a 6-digit combination of numbers and letters defined by a mix of red, green and blue values.
Find the HEX value you wish to use and paste it into the Toast Background Color input. You or your designer will likely have the HEX color values of your company brand – but many free online tools provide you with the ability to generate your own HEX colors (https://htmlcolorcodes.com/color-picker/). Simply paste in the HEX code along with the preceding “#” mark as shown below:
Customize Action Button Color
Find the HEX value you wish to use and paste it into the Action Button Color input. Simply paste in the HEX code along with the preceding “#” mark as shown below:
Including custom font families
To use custom fonts in your toast, you will need the name of the font family being used on your website. Trigger can reference whatever custom font family exists inside your website styles. You may need to speak with your website designer to determine what fonts are installed on your website property before accessing the font family names.
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.
Once you’ve determined the font family you would like to use, simply paste the font-family name in the inputs as shown below. The font requires no quotes when pasting into the input field named Heading Font Family or Body Font Family, but may include hypens or underlines (depending your unique website font style names).
Changing font colors
To change both the Heading Font Color and the Body Font Color of your trigger, simply place the HEX color values you wish to use in the inputs shown below. Remember to use the “#” preceding the HEX value for your font colors to work.
Adjust font sizes
Trigger toasts use pixels to determine the font sizes of your text. Simply include the pixel size you prefer in the Heading Font Size and/or the Body Font Size inputs as shown below. Please include the “px” suffix when including the font size.
Need more help?
Let us know if you need more assistance customizing your trigger, choosing a theme style or adding custom fonts. Contact us today, we’re here to help. This post covers styling your trigger toast, but other options such as Geo-Location are also available.
