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. We do not support iOS or Android mobile apps yet. 

Read more about how Front Chat works here.


Add the inbox in Front

Step 1

Click into Company settings.

Step 2

Click on Inboxes on the left menu and Add a team inbox.

Step 3

Fill out the name and description of your inbox. Click Create.

Step 4

Choose Front Chat by Front from the channel menu.

Step 5

Give this chat channel a name and click Next.

Step 6

Click the new channel to expand its settings menu. Choose the settings as you'd like.

Step 7

Choose the teammate access for this inbox, and whether you'd like to pin this inbox for teammates.

Step 8

Complete the remainder of the inbox settings. 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, turn on the “Only accept messages from logged in users” toggle 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, here are 3 main reasons that could be the causes of your trouble.

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 email us at support@frontapp.com 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

All plans have access to this feature.

7replies Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
Like Follow
  • 3 wk agoLast active
  • 7Replies
  • 9996Views
  • 9 Following