# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ping-me.gitbook.io/pingme-document/main-features/live-chat-bubble.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.