> For the complete documentation index, see [llms.txt](https://ping-me.gitbook.io/pingme-document/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ping-me.gitbook.io/pingme-document/main-features/live-chat-bubble.md).

# Live Chat Bubble

### <mark style="color:blue;">**1. Turn it on**</mark>

One tiny switch lets you turn on and off bubble chat.&#x20;

:thumbsup: Let's toggle it on to explore a wide range of options available for you to display your Facebook chat in your Shopify store.&#x20;

![](/files/Nab596YwtehzWzm7cvNY)

### <mark style="color:blue;">**2. Design**</mark>

Your chat widget does not match your theme color? Don't worry. PingMe can take care of that.

:thumbsup: Or enjoy out [chat template](/pingme-document/main-features/chat-template.md) here!

![Normal design of ](/files/izbhEPbTzaXCnJiLFHN5)

* Go to "Facebook Messenger" section -> "**Design**" tab.

![](/files/Ql5TYsx777ZTiHiSN8sT)

You can easily change the icon, color, position and message of your bubble chat with real-time preview. Let's see what you can do:

<table data-header-hidden><thead><tr><th width="150"></th><th></th></tr></thead><tbody><tr><td>Language</td><td>A large number of languages are supported in the app to display text on the message box</td></tr><tr><td>Customize tab</td><td>One set of chat icons for you to pick</td></tr><tr><td>Widget position</td><td>Adjust the horizontal position of the chat</td></tr><tr><td>Margin bottom</td><td>Adjust the vertical position of the chat</td></tr><tr><td>Greeting message</td><td>Pop-up message box.</td></tr><tr><td>Color, style, size</td><td>Set up bubble chat style blended with your store</td></tr><tr><td>Auto display of the welcome message box</td><td>Auto display of the welcome message will avoid the issue of double clicking on the chat icon from Facebook default settings</td></tr><tr><td>Custom CSS</td><td><p>Customize button, color, text… by adding CSS code</p><p>Here are some identified classes for you:</p><ul><li>Button: .otFacbookChat .ot-fb-logo.facebook-chat-button</li><li>Message box: As the Message box is loaded directly from Facebook to an iframe, you can not add CSS to Message box. You can only customize with .otFacbookChat .fb-customerchat.fb_invisible_flow.fb_iframe_widget iframe</li></ul></td></tr><tr><td>Mobile chat type</td><td><p>Select either live chat or redirect to the Messenger page</p><ul><li>Live chat: Users chat and stay on your store</li><li>Redirect to Messenger: Users will be redirected to Messenger on their devices</li></ul></td></tr></tbody></table>

* And tada! You've got your chat with your style!

![](/files/GfadLTW5RCSYr5dSPoFV)

### <mark style="color:blue;">3. Behavior</mark>

With "**Behavior**" tab, you can:

* Set time to show chat bubble
* Select a specific working dates & time and timezone to show the chat in your store
* Select a device to show the chat icon
* Select specific pages to show the chat bubble (for example: most popular product page)

{% hint style="info" %} <mark style="color:blue;">**PingMe help:**</mark> Don't hesitate to contact our support through live chat! We will consult about color setting so you can get the style you want.
{% endhint %}