Embed Code

The embed code is a JavaScript snippet that adds the Goldilocks widget to your website. Once installed, contacts can chat with your AI support agent.

Getting Your Embed Code

Navigate to Widget in the sidebar
Click Get Embed Code (in the header or at the top of the Essentials section)
A modal appears with your JavaScript snippet
Copy the code
Add to your website

Basic Embed Code

The simplest embed code looks like:

<script
  src="https://api.goldilocks.chat/goldilocks.js"
  data-key="your-api-key"
  async
></script>

Add this before the closing </body> tag on your website.

Configuration Options

Customize the widget with additional data attributes:

Data Attributes

<script
  src="https://api.goldilocks.chat/goldilocks.js"
  data-key="your-api-key"
  data-position="bottom-right"
  data-theme="light"
  data-open="true"
  async
></script>

Attribute	Default	Options
`data-key`	Required	Your API key
`data-position`	`bottom-right`	`bottom-right`, `bottom-left`
`data-theme`	`light`	`light`, `dark`, `auto`
`data-open`	-	`true` to auto-open on load

JavaScript API

For more control, use the gl_chat API:

<script>
  (window.gl_chat = window.gl_chat || function(){ (window.gl_chat.q = window.gl_chat.q || []).push(arguments); });
  gl_chat('init', {
    apiKey: 'your-api-key',
    position: 'bottom-right',
    theme: 'light',
    autoOpen: false
  });
</script>
<script src="https://api.goldilocks.chat/goldilocks.js" async></script>

API Methods

Once loaded, you can control the widget:

// Open the widget
gl_chat('open');

// Close the widget
gl_chat('close');

// Toggle open/closed
gl_chat('toggle');

// Send a message (opens if closed)
gl_chat('send', 'Hello');

Contact Identification

Pass contact information for personalized support:

<script src="https://api.goldilocks.chat/goldilocks.js" data-key="your-api-key" async></script>
<script>
  gl_chat('identify', {
    id: 'customer-123',
    name: 'John Smith',
    email: 'john@example.com'
  });
</script>

Or include in init:

<script>
  (window.gl_chat = window.gl_chat || function(){ (window.gl_chat.q = window.gl_chat.q || []).push(arguments); });
  gl_chat('init', {
    apiKey: 'your-api-key',
    customerId: 'customer-123',
    customerLabel: 'John Smith',
    customerEmail: 'john@example.com'
  });
</script>
<script src="https://api.goldilocks.chat/goldilocks.js" async></script>

Dynamic Contact Data

For logged-in users, inject data dynamically (e.g. with PHP):

<script>
  (window.gl_chat = window.gl_chat || function(){ (window.gl_chat.q = window.gl_chat.q || []).push(arguments); });
  gl_chat('init', {
    apiKey: 'your-api-key',
    customerId: '<?php echo esc_js($user->id); ?>',
    customerLabel: '<?php echo esc_js($user->name); ?>',
    customerEmail: '<?php echo esc_js($user->email); ?>'
  });
</script>
<script src="https://api.goldilocks.chat/goldilocks.js" async></script>

Learn more about contact tracking →

Platform-Specific Instructions

WordPress

Go to Appearance > Theme Editor (or use a plugin)
Edit footer.php or use header/footer plugin
Paste code before </body>
Save changes

Or use a plugin like "Insert Headers and Footers".

Shopify

Go to Online Store > Themes
Click Actions > Edit Code
Open theme.liquid
Paste code before </body>
Save

Wix

Go to Settings > Custom Code
Click Add Custom Code
Paste embed code
Set to load on all pages, in body end
Apply

Squarespace

Go to Settings > Advanced > Code Injection
Paste in Footer section
Save

Webflow

Go to Project Settings > Custom Code
Paste in Footer Code
Publish

React

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://api.goldilocks.chat/goldilocks.js';
    script.async = true;
    script.setAttribute('data-key', 'your-api-key');
    document.body.appendChild(script);
    
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>Your app content</div>;
}

Next.js

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://api.goldilocks.chat/goldilocks.js"
        data-key="your-api-key"
        strategy="lazyOnload"
      />
    </>
  );
}

Testing Installation

After adding the code:

Visit your website
Look for the widget button (usually bottom-right)
Click to open
Send a test message
Verify response

Troubleshooting

Widget not appearing:

Check browser console for errors
Verify API key is correct
Ensure script is loading (Network tab)
Check for JavaScript errors blocking execution

Widget on wrong pages:

If using conditional loading, check logic
Verify code is in the correct template

Styling issues:

Check for CSS conflicts
Widget has high z-index but may conflict
Check for overlapping elements

Security

API Key

Your API key is public (visible in source code). This is normal and safe:

Keys are domain-restricted
Only allows widget functionality
Cannot access admin features

Domain Restrictions

For additional security:

Go to Settings > Account
Add allowed domains
Widget only works on listed domains

Multiple Personas

If you need different personas on different pages:

// Sales pages
gl_chat('init', { apiKey: 'your-api-key', settings: { personaId: 'pers_sales123' } });

// Support pages
gl_chat('init', { apiKey: 'your-api-key', settings: { personaId: 'pers_support456' } });

Or use data-persona on the script tag:

<script src="https://api.goldilocks.chat/goldilocks.js" data-key="your-api-key" data-persona="pers_sales123" async></script>

Going Live Checklist

Before launching:

Test on staging/development first
Verify correct API key
Test contact identification (if used)
Check on mobile devices
Confirm team is ready for escalations
Test actual conversations with your knowledge base

Embed Code

On this page