Test a chat button prior to deployment to a website

To quickly test a Chat Button before deploying it to your website, you can either create a local HTML file or use a Visualforce page. Both methods let you load the Chat Button code and Deployment code directly in a browser without publishing to your live site.


Take the following into consideration when testing a Chat button in production:

• An existing Chat Configuration can be used
• An existing Deployment can be used
• When using a new Skill, or an existing one consider the following:
  • When using an existing Skill, if agents are assigned to the skill, they will receive chats from your button
  • To not disturb Agents, use a separate Skill, which is assigned to yourself, or a user to test with
• When running into issues with a Chat Button, best practice would be to troubleshoot the simplest setup of the button first, and then add options:
  • Type: "Chat Button" instead of "Automated Invitation"
  • Routing Type: "Choice"
  • No Queue
  • No Chat Button Customization

Testing with a Visualforce page

• Open a new Visualforce page in the developer console or in the Visualforce setup page
• From a Chat Button or an Embedded Service component, copy the code snippet between the two <apex:page> tags
  • In the Classic chat button, remove the exclamation mark from these parts:

  • <!-- Online Chat Content -->
    <!-- Offline Chat Content -->​

• Copy the Deployment Code from a Deployment into the text editor under the Chat button code.

Testing with a local HTML file

• Open a basic text editor like Notepad
• From a Chat Button or an Embedded Service component, copy the code snippet into the text editor
  • In the Classic chat button, remove the exclamation mark from these parts:

  • <!-- Online Chat Content -->
    <!-- Offline Chat Content -->​

• Create some blank lines below the Chat button code
• Copy the Deployment Code from a Deployment into the text editor under the Chat button code.
• Save the file as an html file
  • For Windows Notepad, choose File Save
  • First change the "Save as type" to "All Files (*.*)"
  • Then supply a filename, at the end, add ".html"

  • chatbutton.html

• ​Save your file, paying attention to where you save it

To test the Chat Button:

• Find the file and open it in a browser
• Either yourself or an Agent with the assigned Skill, should go online, and should be able to test.

When having trouble with a Chat Button, but it works with a basic setup, start adding options one by one to see what causes issue.