Custom Website - SketricGen Docs

Step 1: Create your SketricGen account

To get started with the integration, sign in to your SketricGen account. If you don’t have an account yet, you can create one for free. Once you’re logged in, begin setting up your chatbot by uploading your data sources. These can include files, text snippets, websites, or Q&A pairs, which will serve as the knowledge base for your chatbot.

If you need assistance with setting up a working SketricGen chatbot, refer to the step-by-step guide for creating and deploying your chatbot.

Step 2: Copy the SketricGen Chatbot Embed Code

After configuring your chatbot, go to the dashboard and click Publish to copy the embed code. The code will look similar to this:

<script src="https://jswidget.sketricgen.ai/widget-embed.js" data-agent-id="YOUR_AGENT_ID"></script>

Note: Make sure your chatbot is set to Public to embed it on your website.

Step 3: Add the embed code to your website

If you have direct access to your website’s files:

Open the file where you want to add the chatbot (typically index.html, .astro, .jsx, or your template file)
Add the embed code in the <head> section of your document
Save the file and upload it to your web server

For multi-page websites: Adding the script to the <head> section of your base template or layout file ensures the chat bubble appears consistently across all pages of your website, giving visitors a seamless experience.

<!DOCTYPE html>
<html>
  <head>
    <!-- Your existing head content -->
    
    <!-- SketricGen Widget Script - Best placed in the head for consistent appearance across pages -->
    <script src="https://jswidget.sketricgen.ai/widget-embed.js" data-agent-id="YOUR_AGENT_ID"></script>
  </head>
  <body>
    <!-- Your website content -->
  </body>
</html>

Step 4: Test your chatbot

After adding the embed code:

Preview or publish your website
Verify that the chat bubble appears (typically in the bottom right corner)
Test the chatbot by clicking on the bubble and asking a question

🎉 Congratulations! Your SketricGen chatbot is now live on your website, ready to assist your visitors.

Step 1: Create your SketricGen account

If you need assistance with setting up a working SketricGen chatbot, refer to the step-by-step guide for creating and deploying your chatbot.

Step 2: Copy the SketricGen Chatbot Embed Code

After configuring your chatbot, go to the dashboard and click Publish to copy the embed code. The code will look similar to this:

<script src="https://jswidget.sketricgen.ai/widget-embed.js" data-agent-id="YOUR_AGENT_ID"></script>

Note: Make sure your chatbot is set to Public to embed it on your website.

Step 3: Add the embed code to your website

If you have direct access to your website’s files:

Open the file where you want to add the chatbot (typically index.html, .astro, .jsx, or your template file)
Add the embed code in the <head> section of your document
Save the file and upload it to your web server

For multi-page websites: Adding the script to the <head> section of your base template or layout file ensures the chat bubble appears consistently across all pages of your website, giving visitors a seamless experience.

<!DOCTYPE html>
<html>
  <head>
    <!-- Your existing head content -->
    
    <!-- SketricGen Widget Script - Best placed in the head for consistent appearance across pages -->
    <script src="https://jswidget.sketricgen.ai/widget-embed.js" data-agent-id="YOUR_AGENT_ID"></script>
  </head>
  <body>
    <!-- Your website content -->
  </body>
</html>

Step 4: Test your chatbot

After adding the embed code:

Preview or publish your website
Verify that the chat bubble appears (typically in the bottom right corner)
Test the chatbot by clicking on the bubble and asking a question

🎉 Congratulations! Your SketricGen chatbot is now live on your website, ready to assist your visitors.

Step 1: Create your SketricGen account

If you need assistance with setting up a working SketricGen chatbot, refer to the step-by-step guide for creating and deploying your chatbot.

Step 2: Copy the SketricGen Chatbot iFrame Code

From your dashboard, click Publish > Direct Embed and copy the iframe code. It should look similar to this:

<iframe src="https://app.sketricgen.ai/iframe-widget/asst_yK4xJuMWAoWobKOYKsF0QmMS" width="100%" height="700px" frameborder="0"></iframe>

Note: The chatbot must be set to Public for the iframe embed to work.

Step 3: Add the iFrame to your website

If you have direct access to your website’s files:

Open the file where you want to embed the chatbot (typically index.html, .astro, .jsx, or your template file)
Locate the section where you want the chatbot to appear
Paste the iframe code
Adjust the width and height as needed
Save the file and upload it to your web server

<div class="chat-container">
  <h2>Chat with our AI Assistant</h2>
  <iframe src="https://app.sketricgen.ai/iframe-widget/asst_yK4xJuMWAoWobKOYKsF0QmMS" width="100%" height="700px" frameborder="0"></iframe>
</div>

Step 4: Test your chatbot

After adding the iframe:

Preview or publish your website
Verify that the chatbot iframe appears correctly
Test the chatbot by typing a question in the iframe

🎉 Congratulations! You’ve successfully added the SketricGen chatbot to your website using an iframe embed.

integrations

​Step 1: Create your SketricGen account

​Step 2: Copy the SketricGen Chatbot Embed Code

​Step 3: Add the embed code to your website

​Step 4: Test your chatbot

​Step 1: Create your SketricGen account

​Step 2: Copy the SketricGen Chatbot Embed Code

​Step 3: Add the embed code to your website

​Step 4: Test your chatbot

​Step 1: Create your SketricGen account

​Step 2: Copy the SketricGen Chatbot iFrame Code

​Step 3: Add the iFrame to your website

​Step 4: Test your chatbot

Step 1: Create your SketricGen account

Step 2: Copy the SketricGen Chatbot Embed Code

Step 3: Add the embed code to your website

Step 4: Test your chatbot

Step 1: Create your SketricGen account

Step 2: Copy the SketricGen Chatbot Embed Code

Step 3: Add the embed code to your website

Step 4: Test your chatbot

Step 1: Create your SketricGen account

Step 2: Copy the SketricGen Chatbot iFrame Code

Step 3: Add the iFrame to your website

Step 4: Test your chatbot