The out-of-the-box Embedded Messaging components, such as the inbox and launcher badge, are added to your page through a Shadow DOM to ensure there are no style conflicts with your main application. You can fully customize the appearance of these components by setting CSS custom properties (variables) on your webpage.

📘

A Note on Naming

While the product is now "Embedded Messaging," the CSS variables use the legacy name --optimove_inbox_* for backward compatibility.

How To Apply Styles

To style the components, you should define the CSS variables within a :root selector in a <style> tag on your page.

Example:

<style>
    :root
    {
        --optimove_inbox_header_background_color: #F10A69;
        --optimove_inbox_badge_background_color: #F10A69;
        --optimove_inbox_badge_right: 15px;
        --optimove_inbox_badge_bottom: 15px;
    }
</style>

Inbox Component Variables

These variables affect the appearance and layout of the main inbox component.

Font Family

• Name: --optimove_inbox_font_family
• Description: The main font to use for the entire inbox.
• Example: Brush Script MT, cursive

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
• Description: Determines the z-index of the inbox and its various layers (like popup menus). Missing values are automatically incremented from the previous layer.
• Example: 9000

Background Color

• Name: --optimove_inbox_background_color
• Description: Changes the background color of the inbox.
• Example: orange

Width & Height

• Names: --optimove_inbox_width, --optimove_inbox_height
• Description: The width and height of the main inbox component when not in mobile (fullscreen) mode.
• Example: 40%, 400px

Margins

• Names: --optimove_inbox_margin_top, --optimove_inbox_margin_bottom, --optimove_inbox_margin_horizontal
• Description: Controls the gap between the inbox component and the edges of the page.
• Example: 20px

Header Styles

• Names: --optimove_inbox_header_background_color, --optimove_inbox_header_font_weight, --optimove_inbox_header_text_font_size, --optimove_inbox_header_text_color, --optimove_inbox_header_bell_background, --optimove_inbox_header_bell_fill, --optimove_inbox_header_close_button_background, --optimove_inbox_header_close_button_fill
• Description: A collection of variables to style the inbox header, including its background, text, and icons.
• Example: red

Message Styles

• Names: --optimove_inbox_message_background_read, --optimove_inbox_message_background_unread, --optimove_inbox_message_border_radius, --optimove_inbox_message_title_font_size, --optimove_inbox_message_content_font_size, --optimove_inbox_message_font_color
• Description: Variables to control the appearance of individual messages, including background colors for read/unread states, border radius, and font styles.
• Example: #EEEEEE (for read messages)

Message Image Styles

• Names: --optimove_inbox_message_images_border_radius, --optimove_inbox_message_images_small_width, --optimove_inbox_message_images_small_height, --optimove_inbox_message_images_small_border_radius
• Description: Controls the border radius and size of images within messages.
• Example: 50%

Action Menu Variables

These variables style the context menu that appears when clicking the "3-dots" button on a message.

Action Button Color

• Name: --optimove_inbox_message_action_button_color
• Description: The color of the "x minutes ago" text and the 3-dots menu button.
• Example: #00aaff

Action Menu Colors

• Names: --optimove_inbox_action_menu_background_color, --optimove_inbox_action_menu_color, --optimove_inbox_action_menu_hover_color
• Description: Controls the background color of the menu and the color of the text and icons within it, including on hover.
• Example: #91daff (for background)

Action Menu Font & Icon Size

• Names: --optimove_inbox_action_menu_font_family, --optimove_inbox_action_menu_font_size, --optimove_inbox_action_menu_icon_size
• Description: Controls the font and icon sizing within the action menu.
• Example: 16px (for font size)

Badge Variables

These variables control the positioning and appearance of the launcher badge.

Badge Position

• Names: --optimove_inbox_badge_position, --optimove_inbox_badge_left, --optimove_inbox_badge_top, --optimove_inbox_badge_right, --optimove_inbox_badge_bottom
• Description: These are passed directly to the corresponding CSS properties (position, left, top, etc.) to control the badge's location on the page.
• Example: 16px (for right positioning)

Badge Appearance

• Names: --optimove_inbox_badge_width, --optimove_inbox_badge_height, --optimove_inbox_badge_background_color, --optimove_inbox_badge_bell_color, --optimove_inbox_badge_border_radius, --optimove_inbox_badge_border
• Description: Controls the size, colors, and border of the badge itself.
• Example: 50px (for width)

Badge Alert Settings

• Names: --optimove_inbox_badge_alert_background_color, --optimove_inbox_badge_alert_font_color, --optimove_inbox_badge_alert_width, --optimove_inbox_badge_alert_height, --optimove_inbox_badge_alert_border
• Description: Controls the appearance of the small notification alert that appears on the badge when there are unread messages.
• Example: #ff8560 (for background color)