Skip to main content

How to embed the chat in a page

By default the chat opens from the floating button in the corner of the screen. With the eChat: Inline Chat widget you can place the chat directly in the page content instead, for example on a Service Center or Contact page, where the conversation is the main thing on the page.

note

A page shows one chat at a time, and the inline chat takes priority. On a page with the eChat: Inline Chat widget, the floating chat button is not shown; on every other page it works as usual.

1. Add the widget​

Add it like any other Magento widget, in one of two ways:

  • For whole pages or layouts: go to Content -> Widgets, click Add Widget, set Type to eChat: Inline Chat, choose the Design Theme and click Continue. Then pick the store views, and under Layout Updates choose the pages and the container to show it in, for example Main Content Area.
  • Inside a CMS page or block: in the content editor, use Insert Widget and choose eChat: Inline Chat.

2. Set the height​

On the Widget Options tab, set Height: the height of the chat area on the page. The chat fills this area completely.

  • Use a CSS length such as 600px or 80vh. The units px, vh, dvh, svh, rem, em and % are accepted.
  • A number without a unit is read as pixels, so 700 means 700px.
  • An empty or invalid value falls back to the default, 600px.
  • The chat area is never shorter than 400px.

3. Check it on the storefront​

Open the page. The chat shows in place of the widget and works as follows:

  • It opens straight into the visitor's current conversation, or starts a new one. There is no home screen.
  • Once the conversation has a message, the chat header shows a Start a conversation button (the pencil icon) for starting a fresh one.
  • There are no close, back or expand buttons: the chat stays where you placed it.
  • The floating chat button is hidden on this page, since the inline chat replaces it.
  • If a page has more than one inline chat widget, only the first one is used.

The inline chat follows the same loading rules as the floating widget: it does not appear on pages listed in Do not load the widget on pages, and with a cookie consent mode it loads only after the visitor consents. See General settings.

tip

Colors, titles and messages inside the chat come from the same eChat widget settings as the floating chat - see Widget settings.

4. Style the chat area (optional)​

The widget renders a <div class="mst-echat-inline"> element that belongs to your page, so your theme's CSS can style it like any other element: a border, rounded corners, a shadow, a maximum width or margins. For rounded corners, also set overflow: hidden so the chat is clipped to them:

.mst-echat-inline {
    max-width: 720px;
    margin: 0 auto;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
}

The chat itself is the #echat-content iframe inside that element, marked with [data-inline]. As with the floating widget, your CSS cannot reach the content inside the iframe. See How to customize the widget appearance with CSS.