Have you had new ideas for a conversational assistant that you want to test, but only have chat set up in a production environment? If so, this blog is for you! I will walk you through how to create a quick and easy HTML file that you can add your chat to, in order to test different brands and assistants.
The setup is quite simple and only requires a few steps and minimal coding experience. The first thing you want to do is have a text editor program. You can download a text editor or use the built-in TextEdit for Mac or Notepad for Windows. Once in the editor, create a file with a .html extension.
Once you have the file created it’s time to add the Base HTML needed to add the chat code. You will only need a simple heading tag to allow the chat to render. That will look like this
. I usually like to add some content to mine so the page isn’t completely blank! The content can look like this:
Test Chat
After that you will need to go to your chat SDK code from the SDK tab on the chat configuration page.(Don’t forget to create an API key with the “generate API Key” button). Copy the code and add it below the h2 tag and save the file. Next, open the file into a browser and confirm the chat loads.
If the chat fails to load, there may be some configuration steps that could be blocking chat from loading locally. Most likely the cause is on the Domains tab of the chat setup page. If that does not seem to be the issue, please feel free to reach out to the support team at [email protected].
Once you have the chat loading, you will need to create a new “test” assistant. Once you have the new assistant created, copy the ID for the assistant (see screenshot below on where to copy the ID).
The last step will be to add the assistant ID to your Kustomer.start() method in the SDK. The final code should look like this:
Once your code looks like the above image, you can open the file in your browser and you will be able to test your chat!
Extra tips and documentation:
- You can also use this to add other options like business schedules or changing chat positions. You can access a full list of all options here
- You are able to create a new brand for testing and change the brand ID if you want to try different configurations
- Conversational Assistant documentation
- We also have a Kustomer University Module on Conversational Assistant Fundamentals
