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.
Add the inbox in Front
Step 1
Click the gear icon on the top right of Front and into the Company or Personal settings tab, depending on which space you are working with.
Step 2
Create a new shared inbox or individual inbox.
Step 3
When prompted to add a channel, choose Front Chat from the channel menu.
Step 4
Give this chat channel a name and click Next.
Step 5
Configure your channel settings for your chat channel (more details here).
Step 6
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, 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 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
deferto the script tag. This delays loading the script and can cause the chat initialization to fail. - The
chatIdin theinitcall 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.
12 replies
-
this is very compelling for us - will you add an api for this ? much like https://api.slack.com/rtm or https://www.pubnub.com/products/chatengine/
-
sss@redcarpetup.com Yes - https://dev.frontapp.com/chat.html#introduction
-
How do I move the chat icon to the left side of my website?
-
Curious: Is there a way I can provide a LINK that a user can click on to access the chat interface? I want to include a block on our website that shows how to contact our support team.
-
Russ Porteous Sure - you could hide the chat widget by default, and have a Javascript onClick callback fire when clicking that link - you could use that to trigger the FrontChat('show') method to display the chat widget - https://dev.frontapp.com/chat.html#frontchat-39-show-39
-
Can I embed the chat widget in an external link? Something like Crisp is able to do: https://help.crisp.chat/en/article/how-can-i-embed-the-crisp-chatbox-in-an-external-link-bkfh98/
Thank you for your help! -
Édouard Hi there, currently Front Chat lacks the ability to do this. We'd be happy to open a feature request, though!
-
Hi, is there a way to add a link to the "Welcome Message" in Front Chat Inbox?
-
Andrew yes, you can include a link in the Welcome Message.
-
Hi Cori Morris , apologies as I didn't phrase my question correctly. I meant is there a way to include "masked links"?
Example:
"Please login to your account..." whereby login links to the login page instead of pasting the full login page url outright -
Andrew no, that's not currently possible!
-
Ah.. That's unfortunate. All good, thanks a lot for your response!