Create Pre-Chat and Offline Support Forms

Learning Objectives

After completing this unit, you’ll be able to:
  • Describe the benefits of using a pre-chat form to gather information about your customers.
  • Describe the benefits of offering an offline support form for when your support agents are offline.
  • Add a basic pre-chat form and offline support form.

Get to Know the Customer

Maria showed Sita and Roberto a demo of web chat, and they’re thrilled to offer it on their website. They think it can satisfy their customers and lighten the case load on their support team. But they have some initial feedback for Maria to work through before web chat goes live.

They’ve asked Maria if she can connect these chats to other Salesforce records, like contacts, so their agents won’t have to manually search for the right records. They also want to know if there’s a way to get a gist of what the customer wants to ask the agent about before the chat starts, so their agents can skip the initial “What brings you here?” small talk.

Maria does some research and sees that the setup flow gave her a quick and easy pre-chat form out of the box. This pre-chat form gathers some initial information about the customer, like their name or email address, and uses it to find existing records in Salesforce. So if a longtime customer named John Smith with the email address starts a chat with an agent, John’s contact record opens alongside the chat transcript, so long as the Embedded Chat deployment uses the basic scenario or service scenario.

John Smith's contact and case records open alongside the chat in the console with the Service scenario

The fields in the pre-chat form are customizable, so you can design the perfect pre-chat form for your business. Maria finds that one of the available fields is Case Reason, which lets customers select a reason for starting the chat.

It looks like both of Sita and Roberto’s requests can be fulfilled with a simple pre-chat form. All Maria has to do is set it up.

Add a Pre-Chat Form

You can update your pre-chat form to your Embedded chat deployment in Embedded Service setup. Let’s follow along with Maria.

  1. From Setup, enter Embedded Service in the Quick Find box, then select Embedded Service Deployments.
  2. Click the arrow beside your Embedded Service deployment and select View.
  3. Click Edit next to Chat Settings.
  4. In the Pre-chat page section, click Edit.
  5. Click Next. There are a few fields included in your pre-chat form automatically. Let’s add another field.
  6. In the Case section, click the plus + to add a field.
  7. Select Case Reason from the list and click Add.
  8. Click Finish.

That’s it! Now, when a customer clicks the chat window, they see this pre-chat form with the new field.

To see the form in action, Maria double-checks that she’s online in the console, refreshes her Visualforce page, and clicks the chat window. When her pre-chat form opens up, she sees the newly-added Case Reason field on it. Voila!

Let Customers Log Cases

Sita and Roberto love the new pre-chat form because it helps their agents solve issues faster, and the experience is much more personalized for the customer. But Roberto asks an important question: “What happens when our agents are offline?”

Sita and Roberto agree: They want to make their customers feel valuable, which to them means giving their customers more than an offline chat button when their agents are away. Wouldn’t it be great if customers could let them know that they stopped by, and their agents could follow up when they’re back online?

Maria came across a solution for their concerns in her research—offline support. Offline support lets you create a web case form for your customers to fill out and submit when chat isn’t available. Customers aren’t left high and dry, and support agents don’t have to forgo sleep to make sure that customers have 24/7 chat support. Plus, Ursa Major can replace all of their Web-to-Case contact buttons with the embedded chat window, so every customer question has a chance to go through web chat before a case is logged. This should definitely make a dent in their caseload!

Create an Offline Support Form

Luckily for Maria, creating an offline support form is just as easy as creating the pre-chat form. Let’s follow along as Maria adds an offline support form to her chat window.

The offline support form is powered by Web-to-Case, so we first need to verify that it’s turned on.

  1. From Setup, enter Web-to-Case in the Quick Find box, then select Web-to-Case.
  2. Make sure that Enable Web-to-Case is checked. If it isn’t, select it.
  3. Click Save. Next, go back to your Embedded Service settings and create an offline support form.
  4. From Setup, enter Embedded Service in the Quick Find box, then select Embedded Service.
  5. Click the arrow beside your Embedded Service deployment and select View.
  6. Click Edit next to Chat Settings.
  7. If you see a warning to enable Guest Access to the Support API in the Offline support section, click the link to enable it.
    Warning in the Offline support section in Snap-ins setup.
  8. In the Offline support section, make sure that the radio button is set to Active. If it isn’t, activate it.
  9. Click Edit. Let’s add more fields to this form. Next we add Web Name and Web Email, so agents can follow up by email.
  10. Click the plus + to add a new field.
  11. Select Web Name from the list and click Add.
  12. Click the plus + to add a new field.
  13. Select Web Email from the list and click Add.
  14. Click Finish to return to the Chat Settings page. Finally, we need to regenerate the Embedded Service code snippet. This is a required step each time you enable or disable offline support.
  15. From the Chat Settings page, click Chat_Agents at the top of the page to navigate back to your deployment settings.
    Use the Chat_Agents link to go back to your Snap-ins deployment settings
  16. Click Get Code next to Embedded Service code snippets.
  17. Copy the Code Snippet and click Done. We recommend pasting it somewhere safe in case you lose it while you navigate to your Visualforce page.
  18. Enter Visualforce in the Quick Find box, then click Visualforce Pages.
  19. Click Edit next to your Web Chat page.
  20. Highlight the existing Embedded Service code snippet in the code, and paste the new one you just got.
  21. Click Finish.

To test the form, Maria goes offline in the console and refreshes her Visualforce page. Instead of seeing a static Agents Offline button, she sees a Contact Us button, which opens her new contact form right in the chat window. When she fills it in and clicks Submit, she notices that there’s a new case in the console. Fantastic!
Open Cases list view with the new case highlighted

Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities