Building A Test Environment For Chat 101

Key Takeaways

• Set up a test environment for your chat assistant to iterate quickly and stay competitive in delivering better user experiences.
• Follow a simple, step-by-step process to create and test your chat assistant using basic HTML and chat SDK integration.
• Empower teams by fostering innovation in conversational assistants, creating opportunities to better assist users and customers.
• Experiment with chat configurations in real-time to explore creative solutions for enhancing customer engagement.

If so, you’re in the right place! In this blog, I’ll guide you through creating a quick and easy HTML file to test different brands and assistants.

Getting Started

Setting this up is straightforward and doesn’t require much coding experience. Here’s how to get started:

• Choose a Text Editor: You can use any text editor you prefer. If you don’t have one, you can download a text editor or use built-in options like TextEdit on Mac or Notepad on Windows.
• Create an HTML File: Open your text editor and create a new file. Make sure to save it with a .html extension.

Adding Base HTML

Now that you have your HTML file ready, it’s time to add the basic structure needed for your chat code. You only need a simple heading tag to allow the chat to render. Here’s what it should look like:

<h2>Test Chat</h2>

Feel free to add some content to make the page look less blank! For example, you can use:

<h2>Test Chat</h2>

Integrating Your Chat SDK Code

Next, head over to your chat SDK code from the SDK tab on the chat configuration page. Don’t forget to create an API key by clicking the “Generate API Key” button.

Once you have your SDK code, copy it and paste it below the <h2> tag in your HTML file. After that, save your file.

Testing Your Chat

Open your HTML file in a web browser to see if the chat loads correctly.

If the chat doesn’t load, there might be some configuration issues preventing it from running locally. The most common cause is related to settings on the Domains tab of the chat setup page.

Creating a New Test Assistant

Once your chat is up and running, create a new “test” assistant. After creating it, copy the assistant ID (you can find where to do this in the screenshot provided).

Finalizing Your Code

The last step is to add the assistant ID into your Kustomer.start() method in the SDK. Your final code should resemble this:

Kustomer.start({
  assistantId: 'YOUR_ASSISTANT_ID'
});

Once your code looks like this, open the file in your browser again, and you’ll be ready to test your chat!

Extra Tips and Resources

• You can also customize other settings like business schedules or changing chat positions. Check out the full list of options available.
• If you want to experiment with different configurations, feel free to create a new brand for testing and change the brand ID.
• For more detailed information, refer to our Conversational Assistant documentation.
• Don’t forget to check out our Kustomer University Module on Conversational Assistant Fundamentals for additional learning!

Happy testing!