On-Site Engagements Design

When it comes to design, it is possible to globally style the four types of on-site engagements - thin bar, modal, corner box and sticky call-to-action. Find the On-Site Engagements Design under the Global Styling tab of the editor.


1. Thin Bar


1.1. General

In this section it is possible to define a background color or media, as well as the border color, width, style, radius and general spacing, both in terms of margin and padding.


1.2. Title

In this section it is possible to define the title's font color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options, as well as alignment and spacing, both in terms of margin and padding.


1.3. Text

In this section it is possible to define the general text's font color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options, as well as alignment and spacing, both in terms of margin and padding. 


1.4. Text Links

In this section it is possible to define the links' font color, weight and decoration in all available states - normal and hover.


1.5. Close Icon

In this section it is possible to define the close icon color and background color in both normal and hover states, as well as the icon width, height and size.


1.6. Button

In this section it is possible to define the button's text color, size, line height, family, weight, uppercase options and alignment. Moreover, it is possible to style the button's background, border and spacing.


2. Modal


2.1. General

In this section it is possible to define a background color or media, as well as the border color, width, style, radius and general spacing, both in terms of margin and padding.


2.2. Title

In this section it is possible to define the title's font color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options, as well as alignment and spacing, both in terms of margin and padding.


2.3. Text

In this section it is possible to define the general text's font color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options, as well as alignment and spacing, both in terms of margin and padding. 


2.4. Text Links

In this section it is possible to define the links' font color, weight and decoration in all available states - normal and hover.


2.5. Close Icon

In this section it is possible to define the close icon color and background color in both normal and hover states, as well as the icon width, height and size.


2.6. Button

In this section it is possible to define the button's text color, size, line height, family, weight, uppercase options and alignment. Moreover, it is possible to style the button's background, border and spacing.


2.7. Inputs

In this section it is possible to define the input's font color, size, family, weight, letterspacing, italic and uppercase options, as well as the input's background, border  and spacing.


2.8. Map

In case you have chosen the map location message type preset, in this section it is possible to define the overall spacing, both in terms of margin and padding.


2.9. Form

In this section you can define the overall spacing of the form section of your on-site engagement, both in terms of margin and padding.


3. Corner Box


3.1. General

In this section it is possible to define a background color or media, as well as the border color, width, style, radius and general spacing, both in terms of margin and padding.


3.2. Title

In this section it is possible to define the title's font color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options, as well as alignment and spacing, both in terms of margin and padding.


3.3. Text

In this section it is possible to define the general text's font color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options, as well as alignment and spacing, both in terms of margin and padding. 


3.4. Text Links

In this section it is possible to define the links' font color, weight and decoration in all available states - normal and hover.


3.5. Close Icon

In this section it is possible to define the close icon color and background color in both normal and hover states, as well as the icon width, height and size.


3.6. Button

In this section it is possible to define the button's text color, size, line height, family, weight, uppercase options and alignment. Moreover, it is possible to style the button's background, border and spacing.


3.7. Inputs

In this section it is possible to define the input's font color, size, family, weight, letterspacing, italic and uppercase options, as well as the input's background, border  and spacing.


3.8. Form

In this section you can define the overall spacing of the form section of your on-site engagement, both in terms of margin and padding.


4.Sticky CTA


4.1. General

In this section it is possible to define the background color, the border color, width, style and radius, and spacing, both in terms of margin and padding, of the overall sticky on-site engagement.


4.2. Icon

In this section it is possible to style the icon in terms of width, height, color (in all states), overall size, background color, border color, style, width and radius, and spacing in terms of margin.


4.3. Title

In this section you can define the title's font color, size, family, weight, text decoration, line height, uppercase options, and spacing in terms of padding.


4.4. Submit Button

In this section you can define the button placement; the button's text in terms of font color, size, line height, family, weight and uppercase options; the button's background color; the button's border color, width, style and radius; and the button's spacing, both in terms of margin and padding.


4.5. Inputs

In this section you can customize the input fields of your form engagement. It is possible to define the font's color, size, family, weight, letterspacing, italic and uppercase options; the field's background color; the field's border color, width, style and radius; and the input's spacing, both in terms of margin and padding.


4.6. Form Thank You Message

The Thank You Message is displayed once a user has filled in the form on your sticky on-site engagement. In this section, you will be able to customize the message's font color, size, line height, family, weight and uppercase options, as well as spacing in terms of margin and padding.


4.7. Form

Finally it is possible to define the overall spacing in the form section of your engagement, both in terms of margin and padding.

 

Anything we’ve not covered?

Contact Us