Embed Code

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

Getting Your Embed Code

1. Navigate to Widget in the sidebar
2. Click Get Embed Code button in the top right
3. A modal appears with your JavaScript snippet
4. Copy the code
5. Add to your website

Basic Embed Code

The simplest embed code looks like:

<script
  src="https://widget.goldilocks.chat/embed.js"
  data-api-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://widget.goldilocks.chat/embed.js"
  data-api-key="your-api-key"
  data-position="bottom-right"
  data-theme="light"
  async
></script>

JavaScript API

For more control, use the JavaScript API:

<script src="https://widget.goldilocks.chat/embed.js" async></script>
<script>
  window.goldilocksSettings = {
    apiKey: 'your-api-key',
    position: 'bottom-right',
    theme: 'light',
    autoOpen: false,
    onLoad: function() {
      console.log('Widget loaded');
    }
  };
</script>

API Methods

Once loaded, you can control the widget:

// Open the widget
Goldilocks.open();

// Close the widget
Goldilocks.close();

// Toggle open/closed
Goldilocks.toggle();

// Show the widget (if hidden)
Goldilocks.show();

// Hide the widget
Goldilocks.hide();

Customer Identification

Pass customer information for personalization:

<script>
  window.goldilocksSettings = {
    apiKey: 'your-api-key',
    customerId: 'customer-123',
    customerLabel: 'John Smith',
    customerEmail: 'john@example.com'
  };
</script>

Dynamic Customer Data

For logged-in users, inject data dynamically:

<script>
  window.goldilocksSettings = {
    apiKey: 'your-api-key',
    customerId: '<?php echo $user->id; ?>',
    customerLabel: '<?php echo $user->name; ?>',
    customerEmail: '<?php echo $user->email; ?>'
  };
</script>

Note: Customer tracking must be enabled in the Widget settings (Behavior section) for this to work.

Learn more about customer tracking →

Platform-Specific Instructions

WordPress

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

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

Shopify

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

Wix

1. Go to Settings > Custom Code
2. Click Add Custom Code
3. Paste embed code
4. Set to load on all pages, in body end
5. Apply

Squarespace

1. Go to Settings > Advanced > Code Injection
2. Paste in Footer section
3. Save

Webflow

1. Go to Project Settings > Custom Code
2. Paste in Footer Code
3. Publish

React

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://widget.goldilocks.chat/embed.js';
    script.async = true;
    script.dataset.apiKey = '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://widget.goldilocks.chat/embed.js"
        data-api-key="your-api-key"
        strategy="lazyOnload"
      />
    </>
  );
}

Testing Installation

After adding the code:

1. Visit your website
2. Look for the widget button (usually bottom-right)
3. Click to open
4. Send a test message
5. 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:

1. Go to Settings > Security
2. Add allowed domains
3. Widget only works on listed domains

Multiple Personas

If you need different personas on different pages:

// Sales pages
window.goldilocksSettings = {
  apiKey: 'your-api-key',
  persona: 'sales-persona-slug'
};

// Support pages  
window.goldilocksSettings = {
  apiKey: 'your-api-key',
  persona: 'support-persona-slug'
};

Going Live Checklist

Before launching:

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