Widget Appearance

customize the look and feel of elements to match the design of your site intelliprove widgets support visual customisation, which allows you to match the design of your site with the themeoverrides option the layout of each widget remains consistent, but you can modify colors and fonts configure your widget appearance docid 2kl5bnrb 6uicqrfaqsig if needed, fine tune individual widgets by overriding widget appearance docid 2kl5bnrb 6uicqrfaqsig customer theming the widgets share the same customer theming as configured for the plug in by default they will visually match with the rest of the design for more information on how the customer theming is configured, refer to the customisation docid\ rjgsa73gtgnctkq9ufeug theming variables the appearance of each individual widget can be fine tuned by overriding the customer level theming variables colors each individual color in the customer theme can be overridden for an individual widget by passing the themeoverrides object when intelliwidgets js sdk docid\ dekcuoaphrmczxe caj5v set the color value for a theme variable to the color hex code, prefixed with "#" const themeoverrides = { "surface primary" "#ffffff", "surface primary support" "#eaedf1", "surface neutral" "#dbe1e7", "surface focus" "#3a79ff", "surface positive" "#3bd66f", "surface positive support" "#edfcf2", "surface warning" "#f5b71e", "surface warning support" "#fef8e8", "surface error" "#ff4667", "surface error support" "#ffebef", "surface shadow" "#09218719", "surface hover" "#00000019", "surface video overlay button" "#00000019", "surface modal overlay" "#ffffffeb", "border primary" "#dbe1e7", "border disabled" "#eaedf1", "text heading" "#092187", "text body" "#092187", "text secondary" "#7186a0", "text focus" "#ffffff", "text disabled" "#dbe1e7", "text overlay disabled" "#ffffff33" } fonts the intelliprove widgets automatically inherit the font family from the css of the enclosing container this script configures the font family for the whole website body 👉 set global font / set font for the entire page / body { font family 'arial', sans serif; / specify the font family / }