Guides
AcademyOptiCircleoptimove.com

Styling Web Inbox

Suggest Edits

Contents

How To

Inbox Component Variables

Action Menu Variables

Badge Variables


How To

Both the web Inbox and badge widgets are added to your page through Shadow DOMs. This ensures there can be no conflict of styles/fonts etc with your main page. Styling is done through css variables, which are provided to the API as part of the config object styles property.

For example:

<style>
    :root
    {
        --optimove_inbox_z_index: 9000;
        --optimove_inbox_z_index_1: 2147483645;
        --optimove_inbox_header_background_color: #F10A69;
        --optimove_inbox_badge_right: 15px;
        --optimove_inbox_badge_bottom: 15px;
        --optimove_inbox_badge_width: 58px;
        --optimove_inbox_badge_height: 58px;
        --optimove_inbox_badge_background_color: #F10A69;
        --optimove_inbox_badge_border_radius: 50%;
        --optimove_inbox_badge_transform: scale(0.5);
        --optimove_inbox_badge_transform_origin: center;
    }
</style>

The sections below describe each variable and its effects.

Inbox Component Variables

The following variables affect the appearance and layout of the main inbox component.

font_family

Name: --optimove_inbox_font_family

Example'Brush Script MT, cursive

The main font to use for inbox (affects all fonts in inbox).

Example changing font family to cursive

Example changing font family to cursive

If using a custom font, make sure you import it in your head tag. For example:

<!DOCTYPE html>
<html>
    <head>
        <!-- Custom font -->
        <link href="https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap" rel="stylesheet">

        <style>
            :root
            {
                --optimove_inbox_font_family: 'UnifrakturMaguntia', sans-serif;
            }
        </style>

z-Index

Names:

  • --optimove_inbox_z_index
  • --optimove_inbox_z_index_1
  • --optimove_inbox_z_index_2
  • --optimove_inbox_z_index_3
  • --optimove_inbox_z_index_4

Example: 9000

This variable determines the z index of the inbox. Because inbox widget includes aspects such as popup context menus there are 5 values.

All layers are optional. Missing values are automatically filled in (defaulting to +1 of previous layer).

🚧

Do not set z_index to its maximum (2147483647) otherwise there will be no higher values for layers 1-4.

Background Color

Name: --optimove_inbox_background_color

Exampleorange

Changes the background color of the inbox.

Example changing background color to black

Example changing background color to orange

Width

Name: --optimove_inbox_width
Example: 40%

The width of the main inbox component when not in mobile (fullscreen) mode. Mobile mode kicks in when the width of the screen is below a given threshold.

Wider messages by setting inbox to 40% width

Wider messages by setting inbox to 40% width

Height

Name: --optimove_inbox_height
Example: 400px

The height of the main inbox component when not in mobile (fullscreen) mode. Mobile mode kicks in when the width of the screen is below a given threshold.

Note: percent values will take into account any top or bottom margin set on the inbox. To set the height to a percentage of the whole screen while also setting margins, use vh (viewport height) instead of %.

Top Margin

Name: --optimove_inbox_margin_top
Example: 20px

The gap between the inbox component and the top edge of the page.

Bottom Margin

Name: --optimove_inbox_margin_bottom
Example: 20px

The gap between the inbox component and the bottom edge of the page.

Horizontal Margin

Name: --optimove_inbox_margin_horizontal
Example: 40px

The gap between the inbox component and the side edge of the page.
Depending on whether the inbox is configured to show on the left or right side of the page, the margin will move the inbox away from the corresponding edge.

Vertical Alignment

Name: --optimove_inbox_vertical_align
Example: center

Possible values:

  • start
  • center
  • end

Controls the vertical positioning of the inbox component when the height is less than 100%.
Use start to align to the top of the page, center to align to the middle of the page, or end to align to the bottom of the page.
By default, the inbox is aligned to the top of the page.

Padding

Name: --optimove_inbox_padding
Example: 0px

The padding to use for the content area of the inbox

Removing padding from the message content area by setting padding to 0px

Removing padding from the message content area by setting padding to 0px

Header Background Color

Name: --optimove_inbox_header_background_color
Example: red

Changes the background color on the header of the inbox (where it says INBOX)

Changing header to red

Changing header to red

Header Font Weight

Name: --optimove_inbox_header_font_weight
Example: bolder

Making header font weight 'bolder'

Making header font weight 'normal'

Header Text Font Size

Name: --optimove_inbox_header_text_font_size
Example: 32px

Change the font size of the INBOX text in the header.

Making header font size very large (32px)

Making header font size very large (32px)

Header Text Color

Name: --optimove_inbox_header_text_color
Example: #AAFF00

Color for the Inbox header line.

Setting header text to green.

Setting header text to green.

Header Delete Button Background Color

Name: --optimove_inbox_header_delete_button_background_color
Example: #BB0000

A background can be added to the close button e.g. red.

Adding a red background to the close button

Adding a red background to the close button

Message Bottom Margin

Name: --optimove_inbox_message_bottom_margin
Example: 0px

Defines how much space exists between each message

Removing the grey line separating messages by setting the message bottom margin to 0px

Removing the grey line separating messages by setting the message bottom margin to 0px

Message Content Font Size

Name: --optimove_inbox_message_content_font_size
Example: 10px

The size of the main content of each message.

The font size has been changed to very small for the message content

The font size has been changed to very small for the message content

Message Title Font Size

Name: --optimove_inbox_message_title_font_size
Example: 10px

The size of the Title of the messages.

Title is very small (10px)

Title is very small (10px)

Message Background Read

Name: --optimove_inbox_message_background_read
Example: #EEEEEE

The background color to use for messages that have been read by the user (previously opened and viewed).

Example setting read messages color to gray (#EEEEEE). The blue color shows for the top message because it is unread.

Example setting read messages color to gray (#EEEEEE). The blue color shows for the top message because it is unread.


Message Background Unread

Name: --optimove_inbox_message_background_unread
Example: #FBFFA1

The background color to use for messages that have NOT been read by the user (or explicitly marked unread).

Example setting unread (new) messages to yellow. The other message which is old remains the default (white) color

Example setting unread (new) messages to yellow. The other message which is old remains the default (white) color

Message Border Radius

Name: --optimove_inbox_message_border_radius
Example: 15px

Creates a rounded border on messages.

📘

Large Image Radius

This setting does not affect the top border of large image cards. However this can be included by also setting --optimove_inbox_message_images_border_radius

Messages with a wide rounded border.

Messages with a wide rounded border (15px). Note that the large image top border is not affected.

Message Color

Name: --optimove_inbox_message_color
Example: TODO

🚧

TODO does not work

Message Images Border Radius

Name: --optimove_inbox_message_images_border_radius
Example: 50%

Controls the upper left and right borders of large image messages (lower left/right are fixed at 0). This can be combined.

Creating a rainbow shaped message with image border raidus (only affects large image format).

Creating a rainbow shaped message with image border raidus (only affects large image format).


Message Images Small Width/Height

Name:

  • --optimove_inbox_message_images_small_width
  • --optimove_inbox_message_images_small_height

Example: 50%

Determines the size of the image in 'small' image messages. Typically these should be kept the same as one another to avoid clipping square images.

The small image takes up 50% of the message width and height

The small image takes up 50% of the message width and height (both are set to 50%)

Message Images Small Border Radius

Name: --optimove_inbox_message_images_small_border_radius
Example: 50%

Controls how rounded the images are on the small message image.

Small image has a completely circular image (50% border radius)

Small image has a completely circular image (50% border radius)

Message Title Font Weight

Name: --optimove_inbox_message_title_font_weight
Example: bolder

The font weight for the Title of messages.

Bolder message title

Bolder message title

Message Title Font Color

Name: --optimove_inbox_message_title_font_color
Example: orange

Color of the title

Changing color of the title to orange.

Changing color of the title to orange.


Message Font Weight

Name: --optimove_inbox_message_font_weight
Example: lighter

Font weight of the main body of the message

Content of the message with 'lighter' font weight.

Content of the message with 'lighter' font weight.

Message Font Color

Name: --optimove_inbox_message_font_color
Example: orange

Changes the color of the main body of the message.

Message with orange font color.

Message with orange font color.

Action Menu Variables

This section relates to the context menu that appears when clicking on the '3 dots' button on the message.

Message Action Button Border

Name: --optimove_inbox_message_action_button_border
Example: TODO


Message Action Button Height

Name: --optimove_inbox_message_action_button_height
Example: TODO


Message Action Button Width

Name: --optimove_inbox_message_action_button_width
Example: TODO


Message Action Button Color

Name: --optimove_inbox_message_action_button_color
Example: TODO


Message Action Button Background Color

Name: --optimove_inbox_message_action_button_background_color
Example: TODO


Message Action Button Text Font Family

Name: --optimove_inbox_message_action_button_text_font_family
Example: TODO


Message Action Button Text Font Size

Name: --optimove_inbox_message_action_button_text_font_size
Example: TODO


Context Menu Background Color

Name: --optimove_inbox_context_menu_background_color
Example: TODO


Message Action Menu Font

Name: --optimove_inbox_message_action_menu_font
Example: TODO

Message Action Menu Font Color

Name: --optimove_inbox_message_action_menu_font_color
Example: #37474F

Action Menu Color

Name: --optimove-inbox-action-menu-color
Example: TODO

Action Menu Hover Color

Name: --optimove_inbox_action_menu_hover_color
Example: TODO

Action Menu Hover Scale

Name: --optimove_inbox_action_menu_hover_scale
Example: TODO

Action Menu Hover Transition

Name: --optimove_inbox_action_menu_hover_transition
Example: TODO

Action Menu Hover Opacity

Name: --optimove_inbox_action_menu_hover_opacity
Example: TODO

Bell Background

Name: --optimove_inbox_bell_background
Example: orange

🚧

TODO Spills outside border

Bell Fill

Name: --optimove_inbox_bell_fill
Example: orange

Inbox with the bell in the header set to orange

Inbox with the bell in the header set to orange

Bell Left

Name: --optimove_inbox_bell_left
Example: TODO

Badge Variables

These variables control the positioning and appearance of the launcher badge that shows when useBadge setting is enabled. To change the badge image itself (i.e. image path) see the main inbox settings.

Badge Position

Name: --optimove_inbox_badge_position
Example: TODO

Indicates the position of the launcher badge for Web Inbox when it is enabled

Badge Left

Name: --optimove_inbox_badge_left
Example: TODO


Badge Top

Name: --optimove_inbox_badge_top
Example: TODO


Badge Right

Name: --optimove_inbox_badge_right
Example: TODO


Badge Bottom

Name: --optimove_inbox_badge_bottom
Example: TODO


Badge Width

Name: --optimove_inbox_badge_width
Example: TODO


Badge Height

Name: --optimove_inbox_badge_height
Example: TODO


Badge Background Color

Name: --optimove_inbox_badge_background_color
Example: TODO


Badge Border Radius

Name: --optimove_inbox_badge_border_radius
Example: TODO


Badge Border

Name: --optimove_inbox_badge_border
Example: TODO


Badge Transform

Name: --optimove_inbox_badge_transform
Example: TODO


Badge Transform Origin

Name: --optimove_inbox_badge_transform_origin
Example: TODO


📘

TODO: are these Icon settings for badge too?

Icon Color

Name: --optimove_inbox_icon_color
Example: TODO


Icon Left Margin

Name: --optimove_inbox_icon_left_margin
Example: TODO


Icon Size

Name: --optimove_inbox_icon_icon_size
Example: TODO

Updated about 1 month ago