Using Front Chat

Overview

Front Chat is the simplest way for teams to manage live chat in Front. With the Front Chat application installed on your website, messages from your site visitors appear instantly in Front for follow up from your team.

Check out this article once you're ready to create your Front Chat inbox.


Settings

Customize your chat widget

Front Chat also allows you to customize your widget with custom colors, logos, header greetings, and website placement. You can also set a team name, configure an automated welcome message to be pushed to every site visitor, and enable email capture with a custom prompt.

Below is a screenshot of various settings. You can edit these at any time in your channel settings for your Front Chat channel.

Manage teammate display name and avatar

By default, each teammate’s name and avatar set in Front will be displayed in chat conversations with customers. If you’d like to customize the name and avatar shown in the chat widget, you have the option to use your team name and company logo instead using the Name and avatar for display setting. This change will be applied for all Front Chat teammates.

This feature is available only on the Scale plan or above.

Set offline hours to hide your chat widget

Front Chat will be always be visible on your website by default. If you'd like to hide your chat application when your team isn't available (such as at night), set your Offline hours in your Front Chat channel settings.

Keep in mind that offline hours hides the widget from view, but does not turn off chat if a customer already has the widget open before your offline hours started, and have not refreshed the page. Customers will still be able to send you messages in the open widget, so best practice is to use an auto-response during your offline hours to set the expectation for when they will receive a response.

Attachments in the chat widget

By default, visitors are allowed to send all supported attachment types in the widget. You can restrict certain file types or prevent visitors from sending attachments altogether.

Collect visitor information in a pre-chat form

You can configure a pre-chat form to collect visitor details at the start of a conversation and build routing, tagging, and assignment workflows for your team. The pre-chat form will appear after any welcome message you’ve added. 

Customize your pre-chat form

By default, your pre-chat form will include email as an optional field for visitors to provide. To further customize your pre-chat form, click Add field to collect additional information (maximum of 3 fields). You can choose to collect existing contact fields, as well as build new contact fields for use within the form. When adding new fields, you can easily rearrange the order of the fields by clicking on the “grab” icon dots to the left of the field name and description.

If you’re creating a custom field for the pre-chat form (e.g., company size or issue type), it will be created as a custom contact field. The pre-chat form currently supports the following field types: Text, Number, Dropdown, Yes or No. Only company admins will have the ability to create custom contact fields for the pre-chat form.

Starter plans will only be able to collect name and email in the pre-chat form. Growth plans and above have the ability to fully customize the fields in the pre-chat form. 

Set optional and required fields

Once you’ve configured the fields you want to collect, you can select which fields you’d like to be optional vs. required. Visitors will need to fill out required fields before starting a conversation, and can choose to supply information for any optional fields configured. In the pre-chat form, visitors will also have the ability to include a message to give your team more context on their issue. Note that if visitor information is already supplied programmatically via the Front Chat SDK, visitors will not be prompted to input that information in the pre-chat form.

Supported visitor response types for the pre-chat form within the widget include text, numbers, customizable dropdowns, and yes/no dropdowns.

If you configure email as an optional field, you’ll also have the ability to prompt visitors to provide their email 10 seconds after a chat is initiated via a banner within the widget. You can customize the message visitors see on this email collection banner.

View pre-chat form information

To properly save the information collected from chat visitors, a contact will be auto-created regardless of what you may have configured in your Automatically create contact company setting.

All information visitors supply in the pre-chat form will be saved to that contact. You can access this information by clicking on a visitor’s name/avatar in the chat conversation, or by viewing the Contact details plugin in your sidebar.

Recognize logged in users

If you are using Front Chat in a web or desktop application and need to identify logged in users, after adding the code snippet you will need to complete an additional step in your setup.

Copy your Verification Secret from your channel settings. This token will be required to create a server-side generated HMAC, which you will use to compute a hash of your users' emails. This hash is what you will have to send to the Front Chat API to authenticate your users — the identity verification will fail unless a user hash is provided. More technical details can be found here.

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.

Manage chat conversations across multiple websites

Your custom chat application can be installed on as many pages as you wish, from a same domain. All messages will flow into a single chat inbox, and the conversation will be persistent for the customer across your entire site.

Your sessions will however not be maintained over different domains or subdomains. To share an example:

If you are managing multiple domains or subdomains, you can handle chat conversations separately for each site by creating a separate chat channel for each site.

Customize each application to match each site's branding, install the appropriate scripts, and the chat conversations for each website can be handled in separate inboxes in Front.


Workflow

Once you set up a Front Chat channel, your team can chat with your website visitors in real-time directly from Front. Use the same rules, analytics, tags, and workflows for Chat that you use for your other channels (email, SMS, Twitter, etc) in Front.

Match visitors with your Front contacts or CRM integrations

If the visitor is logged in and verifies or enters their email in the pre-chat form, Front will search for that email address in your contacts. You can tell if a visitor has submitted their email if this message appears: "User submitted their email: me@company.com".

If the email address doesn't match an existing contact, a new contact will be created in Front. If the address matches an existing contact, the chat message will be linked to that contact's details. You can view all of their past conversations by viewing the Contact details plugin in your sidebar. 

If you have any integrations enabled that use an email address to identify records, those details will be displayed on the conversation. This applies to Front's CRM integrations: Salesforce, Pipedrive, Base, HubSpot, and Zoho.

If a site visitor does not enter their email address in the pre-chat form or Notify Me prompt, the visitor will be anonymous unless you are using identity verification to pass user names and email addresses.

Transition conversations from chat to email

When a visitor enters their email address in the pre-chat form or Notify Me flow, or has their verified identity set, Front can easily transition the conversation to email if they leave your site without following up.

When a Front user replies to a chat message and the visitor does not respond within 5 minutes, Front will automatically send an email transcript of the last 10 messages to the address the visitor submitted.

You can choose the email address your transcripts are sent from in your channel settings in the Chat Transcript section. It must be sent from a team email channel that you have connected to Front. After setting up email capture in your Front settings, any new visitors to your site or a refresh of your site will get the email option.

When a transcript is emailed to a site visitor, you will see it recorded as an activity within that conversation. The chat transcript email will also be linked to the original chat conversation (and vice versa) so you can easily navigate between the two.

When a site visitor replies to the email transcript, the message will arrive in your chosen shared email inbox in Front. It will not be assigned to anyone, but you can use rules to assign conversations automatically (see below).

Use rules and analytics 

You can use rules and run analytics reports for your Front Chat channel the same way you use them for email, SMS, or other channels in Front.

Here are some example rules for Front Chat to help you get started:

Respond to messages automatically during offline-hours

Assign chats in a round-robin

Assign email follow ups to the user who replied to the chat

For Inbox is, choose the email inbox that your chat transcripts are sent from. For Body Contains, enter the teammate's chat transcript signature. Chat transcript signatures are always "- [User] at Front."

Route chats based on Front Chat visitor URL

Build rules based on information supplied in pre-chat form

Once you’ve configured a pre-chat form with the information you‘d like to collect from visitors, you can build rules to automatically route, tag, and assign these conversations leveraging the custom contact fields in the form. Three popular workflows you can use the pre-chat form for are (1) triaging support inquiries, (2) qualifying sales leads, and (3) routing based on language preferences.

Triaging support inquiries

You can set up your pre-chat form to collect information to identify and triage support inquiries using fields such as (1) Email (2) Are you an existing customer? (3) Issue type (billing, account, cancellation). Then, you can configure rules for these conversations based on the information provided in the custom contact field(s) you created to ensure you’re tagging the conversation correctly and assigning it to the right teammates.

Qualifying sales leads

You can also utilize information collected in the pre-chat form to qualify potential sales leads. For instance, you can configure fields such as (1) Email (2) Company Name (3) Company size (1-10, 11-100, 101-1000, 1000+). Then, you can configure a rule including this custom contact field to route to a specific sales team or sales representative based on information provided. For instance, if it’s a larger prospect, you can tag the conversation with a VIP tag and route it to your enterprise sales team.

Routing based on language preferences

You can use the pre-chat form to identify which language your visitors prefer to converse in using a language custom contact field. Then, you can configure rules to route or assign the conversation to language specialists in your team.

Share content

Customize the feel of your conversations by sharing GIFs, using emojis, or sending files. Both Front users and website visitors can:

  • Send and receive plain text messages and click full URLs
  • Choose attachments (files up to 25mb) and preview images and GIFs. The supported attachment types are .pdf, .png, .jpg, .gif, .txt, .mp4, and .mov.
  • Send shared links to Google Docs or Dropbox files for other content types

Front users have additional formatting options:

  • Bold, italics, and strikethrough
  • Bulleted and numbered lists
  • Embedded hyperlinks
  • Quotes

See what page your visitor is on

Understand where your visitor is on your website. Click the Visitor URL icon on the right side of any message view it. You can also click the link to navigate to the page.

You can also set up rules that automatically tag or route Front chat conversations to specific inboxes based on the URL a Front Chat visitor is initiating a conversation from.

Online and seen indicators

When a visitor has read your message, a Seen indicator will appear. You will also see a green Online indicator if the visitor is currently active.

Typing indicator

You can see when a visitor is typing in the chatbox in real-time. This is what the visitor sees when you add Front Chat to your website:

This is what you'll see when replying to the visitor in Front:

Karen, a teammate in Front, is replying to the visitor (named "Purple Panda") from the Front Chat inbox.

Front Chat notifications

By default, Front Chat notification sounds are distinct from other channel notification sounds to make it easier for your team to identify and prioritize responding to chat messages quickly. You can reference this article to ensure your sound notifications are configured correctly.

The Front Chat sound cannot be customized.


FAQ

Are there character limits for Front Chat messages?

Yes. Each message has a 2000 character limit. 

Is Front Chat supported on mobile applications?

Yes. You can use a webview to implement Front Chat on mobile applications. You can find more information on this here.

Can I log Front Chat messages into Salesforce?

Yes. You can use Front's rule engine to sync every inbound and outbound chat to Salesforce. The rule would look something like this: WHEN Inbound messages, IF Inbox is [chat inbox], THEN Send as task to Salesforce. In order for this to work, you will need to first have the Salesforce integration enabled in your settings. Salesforce will log the chat messages to the contact with a matching email address, similar to the logging email functionality Salesforce provides.

When is the welcome message displayed?

We will only display the welcome message the first time a visitor loads the widget.

This is related to the PROACTIVE_MSG_USER_COOKIE (appears as fcpmuc in the browser) that gets set the first time the message displays.  If that cookie is present we won't show the message again to avoid a “noisy” experience.

This cookie is set to expire at the end of the session (browser/tab close), so the welcome message will be displayed the next time the site is visited.

If you'd like to override this behavior, your site will need to remove the "fcpmuc" cookie before loading the chat widget.


Pricing

Front Chat is available on all plans. See additional details about pricing of certain Front Chat features below:

Feature Starter Plan Growth Plan Scale Plan Premier Plan
Rule library templates to create rules for Front Chat inboxes
Custom rules for Front Chat  
Analytics for Front Chat  
Pre-chat form customization beyond name & email fields  
Name and avatar for display feature    

Some legacy plans with different names may also have these features.

31 replies

    • Kelsey_Kaufman
    • 5 yrs ago
    • Reported - view

    Hi Cori - thanks for pointing me here! And thanks advance for your help. Two things...

    (1) I'd really like to ask users to submit their email as the first step - making it required. Please tell me this is possible (fingers crossed...)

    (2) When users are *not* identified, they're being assigned random, funny names. This is fine on the surface, but is becoming problematic when I start to use my bank of responses. For example... I just used a response that uses the name customization field, and if I hadn't caught it, I would have called my customer "Tangerine Rhinoceros" because that's what her "name" was, according to the chat. Advice?

    Thanks for your help! =)

    • front
    • 5 yrs ago
    • Reported - view

    Kelsey Kaufman No problem!

    1. Currently there's no way to require email, but we hope to make this improvement in the future.

    2. At this time, there's no workaround here either. I'd suggest not personalizing the canned response, or using 'Hi there'.

    • Kelsey_Kaufman
    • 5 yrs ago
    • Reported - view

    Cori Morris  Many thanks! May I please register an *extreme* request for the mandatory email address. We are transferring from another chat system that had that feature, and I really miss it. Thank you!!

    • front
    • 5 yrs ago
    • Reported - view

    Kelsey Kaufman No problem. I'll share this request with our Product team 😀

    • sam_Kim
    • 5 yrs ago
    • Reported - view

    Hi Cori Morris

    We have a situation where a lot of our users are already signed into our system before starting front chat. We want to be able to provide their IDs to front chat so they don't need to enter their emails again.

    Is there a way to associate our users with front chat conversations without having to ask them for emails? If not, is there any plan to implement that?

    • Eric_Hurkman
    • 5 yrs ago
    • Reported - view

    Hey Cori Morris When is authenticated chat coming? Right now it's 100% worthless for anything private since you can type in anyone's email address. I need to be able to pass in the user's email along with a signature that Front can verify that my app signed it to be clear the user is who they say they are.

    • Support Program Manager
    • Helena_Li
    • 5 yrs ago
    • Reported - view

    Hi Eric Hurkman 

    We will be adding this feature in the future. I don't have an exact timeline for it yet, but will let you know when it happens!

    • Head of Customer Support
    • Kenji_Hayward
    • 4 yrs ago
    • Reported - view

    Eric Hurkman great news! we just released this feature. Be on the look for an email for more info thanks for your patience. 

    • Jorgen
    • 4 yrs ago
    • Reported - view

    Hi there. We really need inline image support (from saved responses), and bulleted lists (from saved responses) to really commit to using Front Chat. We'd really like to switch to you guys from Intercom, but not having those features is a dealbreaker. 

    • Support Program Manager
    • Helena_Li
    • 4 yrs ago
    • Reported - view

    Hi Jorgen , could you send us an email to support@frontapp.com with this request, and we can properly log it so that our team can follow up with you if they'd like more information? We're not able to see a contact email for you here in the forum. Thanks! :)

    • Luis_Eduardo_Vilella
    • 4 yrs ago
    • Reported - view
    Cori Morris said:
    1. Currently there's no way to require email, but we hope to make this improvement in the future.

    Hi there, is there a way now to ask users to submit their email or name as the first step?

    • Support Program Manager
    • Helena_Li
    • 4 yrs ago
    • Reported - view

    Hi Luis Eduardo Vilella, the chat currently offers to get their email, but it isn't required. We have a feature request open for this, so we'll let you know if it does get incorporated into an update!

    • Russ_Porteous
    • 3 yrs ago
    • Reported - view

    Can you do a tutorial or webinar how you do the chat that is shown on the https://frontapp.com website. I'm trying to figure out how you do the questions when the chat opens!

    • Brady_Patrick
    • 3 yrs ago
    • Reported - view

    Jorgen This is a huge feature for us as well! Helena Li any update on this item?

    • Andrew_Park
    • 3 yrs ago
    • Reported - view

    Russ Porteous Yes, I agree!  We would like to have our Front Chat the same way!

    • Andrew_Park
    • 3 yrs ago
    • Reported - view

    Helena Li Is there an update for feature request on mandatory email?

    • Customer Support Representative
    • Lemuel_Chan
    • 3 yrs ago
    • Reported - view

    Andrew Park Hey Andrew, no new updates yet but we'll follow up with you when that's changed.

    • Christopher_A_Scott
    • 3 yrs ago
    • Reported - view

    Hello is it possible to show the form on specific pages only?

    • laura
    • 3 yrs ago
    • Reported - view

    in case I get a text/sms from my client and wish to get in touch more efficiently using the chat, can I send him a link to the chat?

    when you get the client's email address is the request form GDPR compliant? thanks

    • jenlau
    • 3 yrs ago
    • Reported - view

    We also need the email address to be mandatory before starting a new chat from our visitor. Are there any news? Thanks Jens

    • Leo
    • 3 yrs ago
    • Reported - view

    Jorgen your comment caught my eye because my company is assessing their current chat tool. Would you be open to sharing your experience with me (if you ended up transition to Front chat)?

    • Murray_Seaton
    • 3 yrs ago
    • Reported - view

    Another here just signed up for trial with Front and looks like I'll be going elsewhere based on no ability to require an email before starting a chat. Can I further suggest you consider ability to add pre-survey chat options, where admin can choose which fields are included in the survey (e.g. email address) and whether those fields are mandatory/non-mandatory. We like to include a phone number field too, and a sales/support selector, which could be used in Front to tag a chat, or direct it to a particular inbox.

    • Brady_Patrick
    • 3 yrs ago
    • Reported - view

    laura We could absolutely use this feature hundreds of times a week! 

    • Brady_Patrick
    • 3 yrs ago
    • Reported - view

    I have sent these features to Front support for feedback, but I will post about them here for everyone to see.
    The features/improvements are really needed for Front Chat! 

    • Display Read Status
    • Three dots populating when a response is being typed
    • Some sort of Mobile SDK for native apps (I know Front has custom channel route for chat, but it doesn't allow for images which is a deal-breaker https://help.frontapp.com/t/q52vgd/how-to-create-a-custom-channel-in-front#api-endpoints)
    • Front Chat API allowing more fields to be passed via the 'identity' https://dev.frontapp.com/chat.html . Currently, it's allowing us to add Name, but it's not supported. I would be nice to be able to pass the contact field data.
    • Front Chat allowing images to be pasted right into the text box on the user side just like the agent side.  This is an easy improvement to make user experience better. 
    • Ability to send a unique live chat link to users to get in touch more efficiently.
    • Brady_Patrick
    • 3 yrs ago
    • Reported - view

    Transition conversations from chat to email... If we can have the option for the email to appear in the same thread as the live chat instead of separate conversations this would be fantastic. Intercom does this well.