Branding

Each widget has its own branding, so you can style every widget differently. If you want several widgets to look the same, apply the same settings to each one.

1. Go to Widgets
2. Select the widget to modify
3. Open the Branding tab

The settings are grouped in cards. Click a card to unfold it. The preview on the right updates as you change settings, but nothing reaches your website until you click Save at the top of the page. Reset discards unsaved changes.

Which cards you see depends on the widget’s layout. For example, Launcher Button only appears for launcher and pill widgets, and Size and borders only for embedded and overlay widgets.

Style

• Dark mode renders the widget with a dark colour scheme.
• Brand Color is the main colour of the widget, and Text Color is the colour of text shown on top of it. Enter a HEX, RGB or HSL value, or click the colour square to pick one.
• Border Radius sets how rounded the widget’s corners are.
• Logo (launcher widgets only) is shown in the panel header when the launcher is open. Drag an image onto the upload area or click it to choose a file (PNG, JPG or SVG). Use the Height slider to resize the logo; the width follows to keep its proportions. Reset restores the default height.

Launcher Button

For launcher and pill widgets, this card styles the button visitors click to open the widget. For pills it’s called Pill Button.

• Button Text, plus an optional Mobile Button Text for screens up to 480px wide. Leave the mobile text empty to show no text on mobile.
• Icon or Logo shown on the button
• Color and Text & Icon Color
• Border Radius of the button

Placement

For launcher widgets:

• Placement side puts the widget on the left or right of the screen.
• Horizontal offset and Vertical offset move it away from the screen edges, in pixels.
• Mobile horizontal offset and Mobile vertical offset apply only on screens up to 480px wide. Switch the preview to the phone view to see them.
• Stacking level, see below.

For pill widgets:

• Mount inside element (optional) places the pill inside an element on your page, given by its CSS selector (for example #target-element). Leave it empty to keep the pill floating at the bottom of the screen.
• Vertical offset and Mobile vertical offset move a floating pill up from the bottom of the screen.
• Stacking level of a floating pill, see below.

A pill placed inside an element fills the height of that element, so give the element a height, for example height: 600px. The pill is always at least 480px high, which is also its height when the element has no height of its own. The offsets and the stacking level don’t apply to it.

Stacking level

Stacking level is the CSS z-index of the launcher button or the floating pill. It decides which elements of your page appear in front of the widget. Increase it if another element, such as a cookie banner, covers the widget; decrease it if the widget covers something it shouldn’t. The default is the maximum supported value, 2147483646, so in most cases you can leave it as it is. The preview doesn’t show the stacking level.

Size and borders

For embedded and overlay widgets:

• Searchbar height, in pixels
• Element height (embedded widgets only), as a percentage of the screen height. For example, 70 takes up 70% of the screen.

Custom CSS

When Custom CSS is enabled for your widget, this card lets you add your own CSS rules to the widget or launcher, for example [data-raffle-role="launcher-button"] { border-radius: 9999px; }. Contact Raffle Support if you need it enabled.