Widget Integration

Widget Installation

Add the hej! chat widget to your website with a single line of code.

Installation

Add the following script tag to your website, just before the closing </body> tag:

<script src="https://api.hej.chat/widget/widget.js"></script>

That's it!

The widget automatically detects your domain and loads all configuration (colors, text, positioning) from your Studio settings.

How It Works

1
Widget loads on your page
The script automatically detects your website's domain
2
Fetches your configuration
All styling and settings are loaded from your Studio dashboard
3
Renders the chat bubble
Appears with your custom colors, text, and positioning

All Configuration in Studio

Unlike other chat widgets, hej! doesn't require any configuration in the script tag. Everything is managed through your Studio dashboard:

Header Colors

Background and text colors

Title & Subtitle

Greeting text users see

Placeholder Text

Input field placeholder

Position

Left or right alignment

Blur Effect

Glassmorphism styling

Voice Support

Enable/disable phone calls

Change settings anytime

Update your widget appearance in Studio and changes apply immediately - no need to update any code on your website.

Security

Origin-Locked Protection

Your chatbot's knowledge base is protected by origin validation. When users send messages, our backend verifies the request's origin header to ensure it matches your registered domain.

This means no one can embed your widget on their site and access your data - chat requests are cryptographically tied to the domain they originate from.

Platform-Specific Instructions

WordPress

1. Go to Appearance → Theme Editor → footer.php
2. Paste the script tag before </body>
3. Or use a plugin like "Insert Headers and Footers"

Shopify

1. Go to Online Store → Themes → Edit code
2. Open theme.liquid
3. Paste the script tag before </body>

Next.js / React

Use the Script component in your layout:

import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://api.hej.chat/widget/widget.js"
        strategy="lazyOnload"
      />
    </>
  )
}

Webflow

1. Go to Project Settings → Custom Code
2. Paste the script in "Footer Code"
3. Publish your site

Troubleshooting

Widget not appearing?

• Make sure your domain is registered (complete onboarding)
• Check browser console for JavaScript errors
• Verify your subscription is active
• Try clearing your browser cache

Need to customize appearance?

All widget styling is configured in your Studio dashboard. No code changes needed!

← Permissions Widget Configuration →