Skip to main content
  • Floating Chat Bubble
  • Inline iFrame Embed

​
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 workflow 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 workflow.If you need assistance with setting up a working SketricGen workflow, refer to the step-by-step guide for creating and deploying your workflow.

​
Step 2: Copy the SketricGen workflow Embed Code

After configuring your workflow, 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 workflow is set to Public to embed it on your website.
Screenshot showing SketricGen dashboard with Publish button and embed code copy option

​
Step 3: Add the embed code to your website

If you have direct access to your website’s files:
  1. Open the file where you want to add the workflow (typically index.html, .astro, .jsx, or your template file)
  2. Add the embed code in the <head> section of your document
  3. 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 workflow

After adding the embed code:
  1. Preview or publish your website
  2. Verify that the chat bubble appears (typically in the bottom right corner)
  3. Test the workflow by clicking on the bubble and asking a question Screenshot showing custom website with embedded SketricGen floating chat widget
🎉 Congratulations! Your SketricGen workflow is now live on your website, ready to assist your visitors.
⌘I