Widget Integration

This guide covers everything you need to integrate the Goldilocks chat widget into your website.

Basic Integration

Step 1: Get Your API Key

Log into Goldilocks
Go to Installation (click Get Embed Code in the header or in the Essentials section) or Settings > Account
Copy your API key from the API Keys section

Step 2: Add the Script

Add this code before the closing </body> tag:

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

Step 3: Verify

Visit your website. You should see the chat bubble (usually bottom-right).

Configuration Options

Data Attributes

Configure using HTML data attributes on the script tag:

<script
  src="https://api.goldilocks.chat/goldilocks.js"
  data-key="YOUR_API_KEY"
  data-position="bottom-right"
  data-theme="light"
  data-open="true"
  data-persona="pers_abc123"
  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
`data-persona`	-	Persona public ID (e.g. `pers_abc123`)
`data-user-id`	-	Customer ID for tracking
`data-user-email`	-	Customer email
`data-user-name`	-	Customer display name

JavaScript Configuration

For dynamic configuration, call gl_chat('init', config) before loading the script, or use gl_chat('init', config) after the script loads:

<script>
  // Option A: Queue init before script loads (script will process queue when it loads)
  (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,
    customerId: 'customer-123',
    customerLabel: 'John Smith',
    customerEmail: 'john@example.com'
  });
</script>
<script src="https://api.goldilocks.chat/goldilocks.js" async></script>

Or with data-key for auto-init, then identify after load:

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

Platform-Specific Guides

WordPress

Option 1: Theme Editor

Go to Appearance > Theme Editor
Edit footer.php
Add embed code before </body>
Save

Option 2: Plugin

Install "Insert Headers and Footers" plugin
Go to Settings > Insert Headers and Footers
Add code to footer section
Save

Shopify

Go to Online Store > Themes
Click Actions > Edit Code
Open theme.liquid
Find </body> tag
Add embed code before it
Save

With Contact Data (logged-in customer):

<script
  src="https://api.goldilocks.chat/goldilocks.js"
  data-key="YOUR_API_KEY"
  data-user-id="{{ customer.id | default: '' }}"
  data-user-name="{{ customer.name | default: '' }}"
  data-user-email="{{ customer.email | default: '' }}"
  async
></script>

For additional context, call gl_chat('identify', {...}) after the script loads when the customer is available.

Wix

Go to Settings > Custom Code
Click Add Custom Code
Paste embed code
Set:
- Place code: Body - end
- Pages: All pages
Apply

Squarespace

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

Webflow

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

Next.js

// app/layout.tsx or pages/_app.tsx
import Script from 'next/script';

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

React

import { useEffect } from 'react';

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

    return () => {
      document.body.removeChild(script);
    };
  }, []);

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

With user identification (call after script loads and user is available):

useEffect(() => {
  if (user && typeof window !== 'undefined' && window.gl_chat) {
    gl_chat('identify', { id: user.id, name: user.name, email: user.email });
  }
}, [user]);

Vue

<template>
  <div id="app">
    <!-- Your app -->
  </div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://api.goldilocks.chat/goldilocks.js';
    script.setAttribute('data-key', 'YOUR_API_KEY');
    script.async = true;
    document.body.appendChild(script);
  }
};
</script>

Angular

// app.component.ts
import { Component, OnInit, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    const script = this.renderer.createElement('script');
    script.src = 'https://api.goldilocks.chat/goldilocks.js';
    script.setAttribute('data-key', 'YOUR_API_KEY');
    script.async = true;
    this.renderer.appendChild(document.body, script);
  }
}

Conditional Loading

Load Only on Certain Pages

const supportPages = ['/help', '/support', '/faq'];
const currentPath = window.location.pathname;

if (supportPages.some(page => currentPath.startsWith(page))) {
  loadGoldilocks();
}

function loadGoldilocks() {
  const script = document.createElement('script');
  script.src = 'https://api.goldilocks.chat/goldilocks.js';
  script.setAttribute('data-key', 'YOUR_API_KEY');
  document.body.appendChild(script);
}

Exclude Certain Pages

const excludedPages = ['/checkout', '/admin', '/login'];

if (!excludedPages.includes(window.location.pathname)) {
  loadGoldilocks();
}

Load After Delay

setTimeout(loadGoldilocks, 5000); // 5 second delay

Load on Scroll

window.addEventListener('scroll', function onScroll() {
  loadGoldilocks();
  window.removeEventListener('scroll', onScroll);
}, { once: true });

Troubleshooting

Chat Not Appearing

Check API key - Verify key is correct (Settings > Account)
Check domain restrictions - Is your domain allowed?
Check for errors - Open browser console
Check script loading - Network tab in dev tools
Check for conflicts - Other scripts blocking?
Ensure data-key is set - The chat auto-initializes from data-key on the script tag; without it, you must call gl_chat('init', { apiKey: '...' })

Chat in Wrong Position

Use the data-position attribute (bottom-right or bottom-left) on the script tag.

Script Blocked

If Content Security Policy blocks the script, add:

<meta http-equiv="Content-Security-Policy" 
      content="script-src 'self' https://api.goldilocks.chat;">

Performance

Async Loading

Always use async attribute:

<script src="..." async></script>

This prevents blocking page load.

Lazy Loading

For better performance, load after page is ready:

function loadGoldilocks() {
  const script = document.createElement('script');
  script.src = 'https://api.goldilocks.chat/goldilocks.js';
  script.setAttribute('data-key', 'YOUR_API_KEY');
  document.body.appendChild(script);
}

if (document.readyState === 'complete') {
  loadGoldilocks();
} else {
  window.addEventListener('load', loadGoldilocks);
}

Widget Integration

On this page