HTML Snippet Installation

Add TheSkinnyAI to any website by copying a simple code snippet.

This method works for:

Static HTML websites
Custom-built web applications
Any CMS that allows custom HTML/JavaScript
Platforms like Webflow, Wix, Squarespace (via embed blocks)

Step 1: Get Your Embed Code

1 Log in to your TheSkinnyAI Dashboard

Go to theskinnyai.com/dashboard and log in.

2 Select your site

Click on the site you want to add the widget to.

3 Go to Widget Code

Navigate to Site Settings → Widget Code to find your credentials.

Step 2: Copy the Code

Copy the following code and replace the placeholder values with your actual credentials:

<script>
(function(){
  try {
    var loader = document.createElement('script');
    loader.src = 'https://theskinnyai.com/skinny-widget-loader.js';
    loader.dataset.tenantId = 'YOUR_TENANT_ID';
    loader.dataset.siteId = 'YOUR_SITE_ID';
    loader.dataset.anonKey = 'YOUR_ANON_KEY';
    loader.dataset.widgetHost = 'https://theskinnyai.com';
    loader.dataset.position = 'bottom-right';
    document.body.appendChild(loader);
  } catch (e) { /* ignore */ }
})();
</script>

Configuration Options

Parameter	Required	Description
`data-tenant-id`	Yes	Your unique tenant identifier
`data-site-id`	Yes	Your site identifier
`data-anon-key`	Yes	API authentication key
`data-widget-host`	Yes	Always set to `https://theskinnyai.com`
`data-position`	No	`bottom-right` (default), `bottom-left`, `top-right`, `top-left`

Step 3: Add to Your Website

Paste the code snippet just before the closing </body> tag on every page where you want the widget to appear.

💡 Tip: For most websites, add the code to your site's footer template or global include file so it appears on all pages automatically.

Example Placement

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your page content here -->
  
  <!-- TheSkinnyAI Widget - Add just before </body> -->
  <script>
  (function(){
    try {
      var loader = document.createElement('script');
      loader.src = 'https://theskinnyai.com/skinny-widget-loader.js';
      loader.dataset.tenantId = 'your-tenant-id';
      loader.dataset.siteId = 'your-site-id';
      loader.dataset.anonKey = 'your-anon-key';
      loader.dataset.widgetHost = 'https://theskinnyai.com';
      loader.dataset.position = 'bottom-right';
      document.body.appendChild(loader);
    } catch (e) {}
  })();
  </script>
</body>
</html>

✅ That's it!
Save your changes and refresh your website. The chat widget should appear in the corner you specified.

Platform-Specific Instructions

Webflow

Go to Project Settings → Custom Code
Paste the code in the Footer Code section
Publish your site

Wix

Go to Settings → Custom Code
Click + Add Custom Code
Paste the code, select Body - end placement
Apply to All pages

Squarespace

Go to Settings → Advanced → Code Injection
Paste the code in the Footer section
Save changes

Shopify

Go to Online Store → Themes → Edit Code
Find theme.liquid in the Layout folder
Paste the code just before </body>
Save

Troubleshooting

Widget not appearing

Check browser console (F12) for JavaScript errors
Verify all three credentials are correct
Ensure the code is placed before </body>, not in <head>
Check if a Content Security Policy (CSP) is blocking external scripts

Widget appears but shows error

Double-check your Tenant ID, Site ID, and Anon Key
Make sure there are no extra spaces or quotes in the values

Need help?

Our team is happy to help you get set up.

Contact Support