Wix
Step 1: Set Up Your Chatbase Chatbot
To begin the integration process, you'll need to sign into your Chatbase account. If you haven't created an account yet, sign up for a free account. Once logged in, proceed to set up your chatbot by uploading relevant data sources. These data sources can include files, text snippets, websites, or question-and-answer pairs, which will form the knowledge base for your chatbot.
If you need help with setting up a functional Chatbase chatbot, here is a step-by-step guide for setting up and deploying your Chatbase chatbot.
Step 2: Generate and Copy the Chatbase Chatbot Embed Code
1. After configuring your chatbot, navigate to your dashboard page and select the specific bot you wish to embed. Clicking on the chosen bot should take you to the bot's preview page.
2. On the chatbot preview page, locate and click on the Connect tab.
3. Next, a new page will appear displaying the HTML code snippet for embedding your chatbot. Copy this code by clicking the "Copy Script" button.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F200eb333540579d72b4e861c3269fd72894ab9b3-1547x845.png&w=3840&q=75&dpl=dpl_Ck7BjGitMjcCiR1cXDae9fe2kWuP)
With the embed code in hand, you are now ready to proceed with the integration process within your Wix application.
Step 3: Sign Into Your Wix Account and Embed Your Chatbot
1. Sign in to your Wix website and head to your dashboard.
2. On your dashboard, locate and click on Design Site in the top right corner of the page.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F7d82fbbca6624bda63a9ca63dae1979ae608abbb-1505x817.jpg&w=3840&q=75&dpl=dpl_Ck7BjGitMjcCiR1cXDae9fe2kWuP)
3. Your site should load your site on the Wix website editor.
4. Scroll down to any section of the website you wish to add the Chatbase chatbot.
5. Click the big plus (Add Elements) button on the left sidebar of the Wix site editor.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2Fda3ea441cf605ed5aacdd5007c6debea3b3e536b-1863x751.jpg&w=3840&q=75&dpl=dpl_Ck7BjGitMjcCiR1cXDae9fe2kWuP)
6. Scroll down to locate and click on Embed Code, followed by Popular Embeds and then Custom Code.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F49da4f638723e37c65db2a3ba734e1164bd8248a-1885x823.png&w=3840&q=75&dpl=dpl_Ck7BjGitMjcCiR1cXDae9fe2kWuP)
7. The custom code widget should pop up, click + Add Custom Code in the top right
8. Paste the code snippet into the custom code editor.
9. Provide a name for your code.
10. Choose an option under Add Code to Pages.
11. Choose where to place your code under Place Code in
12. Click Apply. Once you've applied the changes, preview your website and you should see the floating Chatbase chat icon on your website.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F51d9ae5c0432f8c90fe339e1240fbac82eb40f5e-1165x447.png&w=3840&q=75&dpl=dpl_Ck7BjGitMjcCiR1cXDae9fe2kWuP)
Congratulations, your Chatbase chatbot is now live on your Wix website.
Note: You can customize the appearance and colors of your bot on your Chatbase dashboard. To do this, go to your dashboard, choose a bot, click the Settings tab on the top of the page, and then click Chat Interface on the left sidebar to reveal the chatbot customization options.