How to set up a Front Chat inbox in Front

Overview

Setting up a Front Chat inbox allows you to live chat with your customers directly from Front so that all your customer interactions occur in one place.

Front Chat will work for any website, Electron web and desktop applications, and mobile webpages. You can also add Front Chat to iOS and Android mobile apps using a webview via the instructions here.

See this article to learn more about Front Chat.

Instructions

Step 1

Click the gear icon on the top right of Front and select company, workspace, or personal settings in the left sidebar, depending on the space you’re working with.

Step 2

Click Inboxes in the left menu and create a new shared inbox or individual inbox.

Step 3

Click Channels in the left menu, then click the Connect a channel button.

Step 4

Select Front Chat from the channels menu.

Step 5

Give this chat channel a name and click Continue.

Step 6

Choose the inbox that conversations will route to and click Save.

Step 7 (optional)

Click into the channel to configure the settings for your chat channel (more details here). You can also click the Chatbots tab to configure the chatbot automatically created for your chat channel.

See the next section to install Front Chat onto your website or app to start receiving and sending messages in Front.

Install Front Chat on your site or an app

If you do not need to recognize logged in users

Grab the code snippet by clicking into the Channel you just created, and copying the code displayed in the Code Snippet section, and insert it before the '</body>' tag on your webpage. You will need to do this before messages will start syncing from your webpages with your Chat inbox in Front.

Here's an example of what that of a code snippet will look like:

<script src="https://chat-assets.frontapp.com/v1/chat.bundle.js"></script> <script>  window.FrontChat('init', {chatId: 'b107a36...', useDefaultLauncher: true}); </script>

Your Chat inbox is now live. Start chatting with your customers!

If you need to recognize logged in users

If you are using Front Chat in a web or desktop application and need to identify logged in users, first follow the instructions above to add the code snippet. After adding the code snippet, you will need to complete an additional step.

Copy your Verification secret from your channel settings. You can use this to pass information to the Chat widget securely from your site or app to the chat widget using the Front Chat API.

To reject messages from users not logged in to your site or app, toggle on Only accept messages from verified users in your channel settings. If you want to accept messages from anonymous visitors browsing your site, do not enable this toggle.

Troubleshooting

If you're experiencing issues with your instance of Front Chat, there are 3 main areas to check:

Check widget location

The first step to check in the case of a Front Chat instance having trouble showing up is to ensure that it has been installed in the correct place. We recommend locating the widget's code just above the closing </body> tag. You can check the position of the code by right-clicking on your website > View page source, and then performing a search for the code snippet.

If this widget code is not found within in the <body>...</body> HTML element, it may have been compressed into one of your Javascript asset files, and will likely require further investigation. Please contact us with those details.

If you can see the widget appear on the page, but not within the </body>...</body> HTML element, this is likely the cause of the problem.

Check widget code

If your widget code appears in the right location, ensure that it appears as provided in the channel settings. Common changes / issues with the widget code itself include:

Adding defer to the script tag. This delays loading the script and can cause the chat initialization to fail.
The chatId in the init call is missing or incorrect.

You can find your chatId in your channel settings.

Check widget settings

If all of the above checks appeared valid but you're experiencing issues receiving messages from your Front Chat, it could be because your channel is configured to only receive messages from users that had their identities verified.

Here is what this setting looks like:

If this setting is true, it should be expected that you will not receive new inbound messages from unverified visitors.

Pricing

This feature is available on all plans. See additional details about pricing of certain Front Chat features here.