- Guide
- Squarespace
Squarespace
Step 1: Sign Into Your Chatbase Account and Set Up Your Chatbot
Integrating your Chatbase bot into your Squarespace website is a simple process. To get started, access your Chatbase account by signing in. Don't have an account yet? No problem! You can easily create a Chatbase account for free.
Once logged in, you'll be able to create and train your bot by providing it with various data sources. This can include files, text snippets, website URLs, or even question-and-answer pairs.
Not familiar with how to set up a Chatbase chatbot? Follow this step-by-step guide to set up your Chatbase chatbot.
Step 2: Generate and Copy Your Chatbot Embed Code
1. Once you've completed the setup process for your chatbot, navigate to your Chatbase dashboard. From there, locate the specific chatbot you wish to integrate into your Squarespace website and click on it.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2Fb4d45b779372348610998b8e99cb9a4f4b016a79-1871x737.png&w=3840&q=75&dpl=dpl_BMTcHdiw8bsSqPfUjghTawCD9Yv2)
2. After clicking on a bot, you should be taken to the chatbot's Playground page. Click on the Connect tab at the top of the page.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F2c9e1b24f5344226f7b46ccf9d5338cbe3dd7c02-1184x874.png&w=3840&q=75&dpl=dpl_BMTcHdiw8bsSqPfUjghTawCD9Yv2)
3. Up next, click on Copy Script on the page that comes up to copy your chatbot embed script.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F200eb333540579d72b4e861c3269fd72894ab9b3-1547x845.png&w=3840&q=75&dpl=dpl_BMTcHdiw8bsSqPfUjghTawCD9Yv2)
With the chatbot embed code copied, you're now ready to proceed to the next step of integrating your Chatbase chatbot into your Squarespace website.
Step 3: Sign Into Your Squarespace website and Embed Your Chatbase Bot
1. Sign into your Squarespace account and head to your dashboard.
2. On your dashboard, identify the site you want to add the chatbot to and click on it.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F48ee1510640208d76e30a187cbaf855f2041ac66-1768x854.jpg&w=3840&q=75&dpl=dpl_BMTcHdiw8bsSqPfUjghTawCD9Yv2)
3. After clicking on your chosen website, a preview of the website should come up.
4. Click on the Edit button in the top right corner of the page.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F515a211e546a859ed8c8687d24efd68319223c99-1904x739.jpg&w=3840&q=75&dpl=dpl_BMTcHdiw8bsSqPfUjghTawCD9Yv2)
5. After clicking on Edit, your website should load up on the Squarespace website editor. Hover on any section or area of the current webpage where you want to embed the chatbot, and you should see a floating button labeled Add Block, click on it.
6. Scroll down on the list of components that comes up and click on Embed.
7. The Embed block should be added to the current page. Drag it to move it to your preferred location, click on it, and then click on the edit icon that comes up on the top of the Embed block.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F86aab1797c02051885179ccb29eec8105dcefddb-1892x685.jpg&w=3840&q=75&dpl=dpl_BMTcHdiw8bsSqPfUjghTawCD9Yv2)
8. Up next, click on Code Snippet and then Embed data to reveal a code editor.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2Fa5a108413627d0ecfaef9bd7c831eedeaf7fa212-1866x798.jpg&w=3840&q=75&dpl=dpl_BMTcHdiw8bsSqPfUjghTawCD9Yv2)
9. Paste your Chatbase chatbot code in the editor and click Back on the top of the floating menu.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2Ff76377fbd3026ee6f7d80abb09ca754dd17c7e19-1775x780.jpg&w=3840&q=75&dpl=dpl_BMTcHdiw8bsSqPfUjghTawCD9Yv2)
10. Click anywhere on the page, outside the menu, and then click on PREVIEW IN SAFE MODE.
11. Click on Save at the top left corner of your editor and then Exit.
If all went well, you should now see a floating Chatbase chatbot button at the bottom left corner of your web page.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F51d9ae5c0432f8c90fe339e1240fbac82eb40f5e-1165x447.png&w=3840&q=75&dpl=dpl_BMTcHdiw8bsSqPfUjghTawCD9Yv2)
Seen this? Congratulations, your Chatbase chatbot is ready for your website visitors
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.