"Style" tab

• Introduction
• "Style" tab default values
• Text and/or Title
• Buttons
• Container (🎦)
• Border
• Underlay
• Close button (🎦)
• Other groups of styling

---

Introduction

The "Style" tab will help you "merge" the widget with your own design (colors, font-faces, border-radius...), all these little details that make your website design unique. This will help your visitors feel that the widget is part of the experience and not just a third-party add-on that you put on top of it.

In this documentation, you will find explanations on styling subtleties and tricks to save time and advices to style the widgets at their best.

---

"Style" tab default values

By default, we apply a style to the widget so you can:

• see it
• see what can be done in terms of styling
• do nothing if you don't have time and urgently need to add one

However, these default values are directly inspired from the AB Tasty design system.

• Title, links, button background or border color is #007F91 @ 100%
• Text is #393939 @ 100% and centered
• Underlay is #000000 @ 60%
• Drop shadow is #393939 @ 25%
• Background color is #F7F7F7 @ 100%
• Border-radius is 4px
• Font size is 14px
• Button border color is #57B8C7 @ 100%
• Margin is 0px 0px 0px 0px
• Padding is 35px 60px 35px 60px

They are very often the same among the widgets.

For many widgets, the font-family is inherited from your website. You can now override this by selecting one of the 1,000 available Google Fonts in more and more widgets.

Changing the default values can take some time so here are two tricks about it to save time:

1. You can directly paste the hexadecimal color code in the color picker (in order to not have to open the pipette box). 3, 4, 6 or 8-digits HEX codes are accepted, welcomed, interpreted (transformed in 6-digits + opacity value) and encouraged.

2. Once set (manually or by pasting an HEX code), you can save up to 14 colors in your own color palette and reuse them at will.

---

Text and/or Title

 

Depending on the widget, sometimes you have a title element. We offer the same options of the two types of content. Nothing special here about the alignment, color or size.

However, we must make a short focus on the font and the style. We've integrated the Google Fonts API and now offer 1,000+ fonts, each one with a short or long list of available weights ; in italic or not.

By default, the widget inherits the font of your website and here is how you can change it:

You can add elements and classes in the textarea of the "Content" tab in order to have stylable elements with the editor. In any case, finish the styling of the widget first, save and use the "Edit Style" feature of the visual editor after on these elements. Not before you finish your widget configuration. Otherwise, the text styling in the widget configuration form will override the changes done with the “Edit Style" feature.

---

Buttons

If the button border thickness is set to 0, the border color picker is hidden as there is no need to define a color. 🤷‍♂️

Border thickness is limited to 50 px and button border radius is limited to 30 px. For both, if you need more, you can use the "Edit Style" feature in the visual editor.

For popin widgets (Simple Pop-in, Image Pop-in, Video Pop-in) & the Countdown widget you can define the position of the button within the container. You have four different options: 

• Left
• Center
• Right
• Full-width (100%)

---

Container

Margin (px) & Padding (px)

Configure the external margins and inner margins (in pixels). Let's see how it works in a gif.

Background color

Select a background color for the widget. If you reduce the opacity of the background of the container to 0%, you will see the color of the underlay appearing. You can obviously make something nice out of it. But, on the other hand, if your underlay color is not fully opaque, then you start to see the website beneath and it starts to be confusing. In short, playing with opacity is fun but not on both the container background and the underlay.

Background image

Upload an image as a background of the widget. Some restrictions apply. This image, as it can be a png or a gif can be partially transparent. So be sure to have a fully opaque container background color.

Then, depending on the image ratio and the widget ratio, you can use the background fitting options to adapt it to your needs. As an example, let's use a 400 x 300 px widget (blue rectangle) and a 500 x 500 px image (Princess Leia).

Ok, so here is how the background will be managed if you use Cover, Contain Fill (sorry Princess) or None.

• Cover: Keeps the ratio - takes full width of the container.
• Contain: Keeps the ratio - takes full height of the container.
• Fill: Breaks the ratio - adapts to both width and height of the container.
• None: Keeps the ratio - does not adapt dimensions to width and height of the container.

Background image position

If "Cover", "Contain" and "None", you will have the possibility to define where the image position "starts": 

• Top
• Bottom
• Center
• Left
• Right
• Top left
• Top right
• Bottom left
• Bottom right

Let's take an example with the "Contain" fitting option.

 

Repeat background image

With "Contain" or "None" options, a new toggler is displayed: "Repeat background image". By toggling it, you will replicate the image all over the available background space. Really useful if you want to use a pattern. Here is an example with the famous "Pied-de-poule" pattern.

Drop shadow

Enable a drop shadow around the widget. You can however define the "Drop shadow color (and opacity)" and the "Drop shadow blur radius (px)".

The shadow is oriented towards the bottom of the widget. It can be overridden with custom CSS.

---

Border

Nothing really tricky here. You should immediately see the impacts of your changes on the widget.

---

Underlay

This block is only available when the selected layout is "modal" or the widget is modal (pop-in).

Overlay color

In general, we advise you to use a dark color with at least 50% of opacity. If you prefer to use white or a light color as an underlay, we really recommend to use 80% or above of transparency.

If needed, you can make the underlay "disappear" by selecting 0 opacity.

Overlay clickable to hide widget

Toggle to hide the widget when your visitors click on the underlay. If you untoggle it and also hide the close button, your visitors will have no way to hide the modal / close the widget. They will remain kinda "stuck" on the pop-in. We really advise you to let at least one of the two options, if not the two.

---

Close button

Enable or disable a close button in the top-right corner of the widget.

If enabled, you will have a list of styling options:

• Close button position (inside or outside the widget)
• Cross size
• Cross color
• Close button background color
• Close button border radius
• Close button border thickness
• Close button border color (only if border is >= 1px)

If positioned outside the widget, make sure to test your close button in different contexts so that it is contrasted enough with the underlay (or absence of it) or the background (the page itself).

On modal layouts, you can make the underlay clickable to close/hide the widget.

If you're not using a modal layout and if you hide the close button, the users will not be able to close/hide the widget. Except if you use a click on the button or a click on the whole widget to close/hide the widget.

---

Other groups of styling

In other widgets such as NPS or Countdown, you will find other styling groups (like "Preview", "Digits" or "Legend"). Read each widget documentation to view in details their impacts.