Embed Widget Guide

How to Add Chat & Search to Your Website

This guide will walk you through adding the Linked2Web AI chat and search widgets to your website in just a few simple steps.

Quick Start

The fastest way to get started:

Log in to your Linked2Web dashboard
Go to Websites → Select your website → Manage
Complete the setup steps (Index, Enable Features, Generate Token)
Click "Generate Token & Copy Code"
Paste the embed code into your website's HTML before the closing </body> tag
Save and refresh your website

That's it! The widgets will appear on your website.

Prerequisites

Before you can embed the widgets, make sure you have:

✅ Created a Linked2Web account
✅ Added your website to your account
✅ Indexed your website (optional for chat, required for search)
✅ Enabled at least one feature (Chat or Search)
✅ Generated an embed token

Note: Chat works immediately even without indexing, but Search requires your website to be indexed first.

Step-by-Step Installation

Step 1: Access Your Embed Code

Log in to your Linked2Web dashboard
Navigate to Websites from the sidebar
Click on the website you want to add widgets to
You'll see the website management page with a setup progress tracker

Step 2: Complete Setup Steps

The setup tracker shows three steps:

Step 1: Index Website

Click "Start Indexing" or "Re-crawl Website"
Wait for indexing to complete (usually a few minutes)
Status will show "Indexed" when done

Step 2: Enable Features

Toggle "Chat Widget" ON (works immediately)
Toggle "Search Widget" ON (requires indexing)
You can enable one or both

Step 3: Get Embed Code

Click "Generate Token & Copy Code"
A secure token will be automatically generated
The embed code will appear in the text area

Step 3: Copy the Embed Code

The embed code will look like this:

<script defer src="https://your-domain.com/embed.js" 
  data-app-id="YOUR_WEBSITE_ID"
  data-token="YOUR_TOKEN"
  data-token-endpoint="https://your-api.com/api/public/embed-token/YOUR_WEBSITE_ID"
  data-api-url="https://your-api.com">
</script>

Click the "Copy Code" button to copy it to your clipboard.

Step 4: Add to Your Website

Paste the embed code into your website's HTML, just before the closing </body> tag.

Step 5: Verify Installation

Save your website files
Refresh your website in the browser
You should see:
- Chat bubble (bottom-right corner) - if chat is enabled
- Search bubble (bottom-left corner) - if search is enabled
Click on the bubbles to test the widgets

Embed Code Configuration

Required Attributes

All embed codes must include these attributes:

Attribute	Description	Example
`data-app-id`	Your website ID from the dashboard	`data-app-id="507f1f77bcf86cd799439011"`
`data-token`	Security token (auto-generated)	`data-token="emb_abc123..."`
`data-token-endpoint`	Endpoint for token refresh	`data-token-endpoint="https://api.com/api/public/embed-token/..."`
`data-api-url`	Your API base URL	`data-api-url="https://api.linked2web.com"`

Optional Attributes

Customize the widget behavior with these optional attributes:

Attribute	Description	Default	Values
`data-theme`	Widget theme	`light`	`light` or `dark`
`data-enable-chat`	Show chat widget	`true`	`true` or `false`
`data-enable-search`	Show search widget	`true`	`true` or `false`
`data-page-path`	Override page path detection	Auto-detected	Any path string

Platform-Specific Instructions

WordPress

Method 1: Using a Plugin

Install a "Insert Headers and Footers" plugin
Go to plugin settings → Footer section
Paste your embed code
Save and publish

Method 2: Edit Theme Files

Go to Appearance → Theme Editor
Select footer.php
Paste embed code before </body> tag
Click Update File

⚠️ Warning: Editing theme files directly can be lost when updating themes. Use Method 1 or a child theme.

Shopify

Go to Online Store → Themes
Click Actions → Edit code
Open theme.liquid from the Layout folder
Find </body> tag
Paste embed code just before </body>
Click Save

HTML Website (Static Site)

Open your HTML file(s) in a text editor
Find the </body> tag
Paste embed code just before </body>
Save the file

For multiple pages, add to all pages or use a template/partial.

React/Next.js

Option 1: Using useEffect (Recommended)

import { useEffect } from 'react';

export default function Layout({ children }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://your-domain.com/embed.js';
    script.setAttribute('defer', '');
    script.setAttribute('data-app-id', 'YOUR_WEBSITE_ID');
    script.setAttribute('data-token', 'YOUR_TOKEN');
    script.setAttribute('data-token-endpoint', 'https://your-api.com/api/public/embed-token/YOUR_WEBSITE_ID');
    script.setAttribute('data-api-url', 'https://your-api.com');
    document.body.appendChild(script);
    
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <>{children}</>;
}

Option 2: Using next/script

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://your-domain.com/embed.js"
        strategy="lazyOnload"
        data-app-id="YOUR_WEBSITE_ID"
        data-token="YOUR_TOKEN"
        data-token-endpoint="https://your-api.com/api/public/embed-token/YOUR_WEBSITE_ID"
        data-api-url="https://your-api.com"
      />
    </>
  );
}

Troubleshooting

Widgets Not Appearing

Check 1: Embed Code Placement

✅ Code should be placed before the closing </body> tag
✅ Make sure the code is on every page where you want widgets

Check 2: Browser Console

Open browser developer tools (F12)
Check the Console tab for errors
Look for messages starting with [Embed]

Check 3: Token Validity

Go to your dashboard → Website → Manage
Check if token is still active
Generate a new token if needed

Check 4: Features Enabled

Make sure at least one feature (Chat or Search) is enabled
Go to Website → Manage → Features section

Chat Widget Not Working

Issue: "Invalid or expired token"

Solution: Generate a new token in the dashboard
Tokens refresh automatically, but if errors persist, generate a new one

Search Widget Not Working

Issue: "No results found"

Make sure your website is indexed
Go to Website → Manage → Start Indexing
Wait for indexing to complete

Advanced Features

Custom Page Paths

Override automatic path detection:

<script defer src="..." data-page-path="/custom-page"></script>

Token Auto-Refresh

Tokens automatically refresh to maintain security:

Initial token: Valid for 6 hours
Refresh tokens: Valid for 5 minutes
Automatic refresh: 1 minute before expiry

No action needed - this happens automatically!

Lead Capture

Configure lead capture in Chat Manager:

Go to Chat Manager → Behavior tab
Enable Lead Capture
Select form fields (name, email, phone)
Configure trigger (after messages or on end)

Security & Privacy

Token Security

One token per website: Only one active token can exist at a time
Domain validation: Tokens are validated against your website's origin
Automatic expiration: Tokens expire and refresh automatically
Secure storage: Never share your token publicly

Best Practices

✅ Generate new tokens if you suspect compromise
✅ Keep your dashboard credentials secure
✅ Regularly review usage and analytics
✅ Use HTTPS for your website (required for security)

Quick Reference

Embed Code Template

<script defer src="YOUR_DOMAIN/embed.js" 
  data-app-id="YOUR_WEBSITE_ID"
  data-token="YOUR_TOKEN"
  data-token-endpoint="YOUR_API_URL/api/public/embed-token/YOUR_WEBSITE_ID"
  data-api-url="YOUR_API_URL"
  data-theme="light"
  data-enable-chat="true"
  data-enable-search="true">
</script>

Last Updated: 12/29/2025
Version: 2.0