On site messages and signup forms styles

In the on site message and signup form designer, the Styles window is organized into four sections:

• Layout section
• Text section
• Form section
• Advanced section

Layout section

Configure the options related to the overall layout of the on site message or signup form.

• Layout
  • Message type:
    Choose the type of on site message or signup form: Popup, Full page, Toast, Fixed banner, Sidebar, Embedded, or Custom HTML
  • Width:
    Change the width of the on site message or signup form. You can choose S, M, L, XL, or a custom width.
    With the custom option, you can enter a fixed width in pixels. For all other options, the height automatically adapts to the number of objects in the workspace
  • Animation:
    None, Fade, Zoom, or Bounce
• Overlay
  • Overlay color:
    Sets the color applied to the overlay
  • Opacity (%):
    Sets the opacity percentage applied to the overlay
• Background
  • Background color:
    Changes the background color of the on site message or signup form
• Images
  Configure the images included in the on site message or signup form. To show the image only on desktop, clear both checkboxes related to mobile settings
  • Show image on the left (Desktop)
    On desktop, displays the image to the left of the text
  • Show image on the right (Desktop)
    On desktop, displays the image to the right of the text
  • Show image at the top (Mobile)
    On mobile, displays the image before the text
  • Show image at the bottom (Mobile)
    On mobile, displays the image after the text
• Close
  • Show close button:
    Adds the close icon inside the on site message or signup form
• Spacing
  • Lateral internal margin:
    Sets the horizontal padding based on the selected size
  • Vertical internal margin:
    Sets the vertical padding based on the selected size
  • Minimum height (not available for Full page on site messages or signup forms):
    Sets the minimum height in pixels for the on site message or signup form
  • Content alignment:
    Aligns the content at the top or in the center
• Border
  • Border width:
    Applies a border with the selected width to the box
  • Border radius:
    Rounds the corners of the popup based on the selected size
  • Shadow:
    Adds or removes a shadow effect from the popup

On site message and signup form types

Message types correspond to the templates available when you create an on site message or a signup form. They define how the content is displayed on your website, and you can change them at any time from the Message type field in Styles > Layout.

Popup

Displays the content in a window that overlays the web page. This is the best template for drawing attention to promotions, signups, announcements, and calls to action.

Full page

Displays the content full screen, covering the underlying page. It can include one or more pages and is ideal when you want to focus the visitor's full attention on your message.

Toast

Displays a side panel that remains visible while visitors browse the website, without interrupting their experience.

Fixed banner

Displays a banner in a fixed position on the page. It's ideal for persistent communications such as promotions, announcements, or service information.

Sidebar

Displays the content in a sidebar, keeping it accessible throughout the visitor's browsing session.

Embedded form

Inserts the content directly into a page on your website. It's useful for embedding a form or a call to action within the natural flow of the page.

Custom HTML

Lets you create a fully customized layout using HTML code. It's recommended for advanced users who are familiar with web development.

Text section

In this section, you can configure and edit the text settings used in the on site message or signup form.

• Body text
  • Text size (px):
    Customize the size of the main text. All other text sizes and spacing automatically adapt to the selected value.
  • Text color:
    Sets the text color.
  • Font management:
    Choose whether to inherit the website font or use a Google Font. Selecting Customize displays the Primary font and Fallback font options.
  • Primary font:
    Choose the primary Google Font from the available list.
  • Fallback font:
    Used when the Google Font is not available, takes too long to load, or cannot be displayed correctly.
  • Line height:
    Sets the line spacing of the body text.
• Headings
  • Heading font:
    Choose the primary Google Font from the available list.
  • Fallback font:
    Used when the Google Font is not available, takes too long to load, or cannot be displayed correctly.
  • Line height:
    Sets the line spacing of headings.
  • Bold:
    Displays headings in bold.
• Links
  • Color different from text:
    Enables the Link color field so you can choose a dedicated color for links.
  • Link color:
    Sets the color of links in the on site message or signup form.
  • Underline:
    Displays links with an underline.
  • Bold:
    Displays links in bold.

Form section

In this section, you can configure the appearance of form fields used in the on site message or signup form.

• Buttons
  • Primary color:
    Used as the background and border color of the primary button, and as the text and border color of the secondary button.
  • Secondary color:
    Used as the text color of the primary button and the background color of the secondary button.
  • Shape:
    Square, Rounded, or Pill.
  • Font weight:
    Normal, Medium, or Bold.
  • Secondary button border:
    Sets the border thickness for secondary buttons that use inverted colors.
• Fields
  • Fierlds style:
    Standard, Transparent background, or Modern.
  • Field size:
    XS, S, M, or L.
  • Question text:
    Sets the color of the question text.
  • Field text:
    Sets the color of the field text.
  • Field background:
    Sets the background color of form fields.
  • Border:
    Sets the border color of form fields.
  • Focus:
    Sets the color applied when a field receives focus.
• Validation
  • Asterisk (*) for required fields:
    Displays an asterisk next to form fields marked as required.
  • Errors color:
    Sets the color used for validation error messages.

Advanced section

This section is intended for advanced users who want to customize the code of an on site message or signup form.

• Custom CSS:
  Lets you add custom CSS. Be aware that custom CSS may affect the design of your on site message or signup form.
• Custom code:
  Lets you add custom HTML. Giotto code is not supported.
  Note: custom code is not executed in Design or Preview mode.
• Unlock designer scroll:
  Enables manual scrolling inside the popup while using the designer. This may affect the display of some contextual menus.