Embed

This is the full reference for the Link AI chat widget: every style option, config parameter, embed method, and API call. For the five-minute version, follow the Embed quickstart.

Widget styles

Configure the widget

Open the agent from My Agents, go to the Deploy tab, select Web Widget, and click Configure Widget.

Standard Button options

Floating Input options

Suggested questions are set on the agent: up to four questions, 120 characters each. See Configure Agent.

Orb styles

Both styles can use an animated orb. The orb also responds to the sound of the voice in voice mode.

Domain security

Every allowed domain is an exact match unless you use a wildcard.

Rules for wildcards

• Use them when you control several subdomains, or deploy to dynamic subdomains (for example, per-user subdomains).
• Never use * alone. Always include the base domain.
• Prefer specific domains, such as shop.example.com, over wildcards when you can.

What domain security prevents

Without it, anyone could copy your embed code and:

• Run your agent on sites you don't control
• Use up your usage limits and run up costs
• Access conversations and sensitive business data
• Damage your brand by deploying your agent where it doesn't belong

How validation works

Embed methods

Click Copy Code next to the method you want, then paste it into your site.

Script tag (recommended)

Works on any website, including WordPress, Shopify, Wix, Squarespace, Webflow, and custom sites. Place it before the closing </body> tag.

<script>
  window.chatbotConfig = { 
    chatbotId: 'your-agent-id',
    apiUrl: 'https://dashboard.getlinkai.com'
  };
  
  (function() {
      var script = document.createElement('script');
      script.src = window.chatbotConfig.apiUrl + '/chatbot.js?v=' + Date.now();
      document.head.appendChild(script);
  })();
</script>

Config parameters

The ?v= parameter in the script URL handles cache busting.

Debug mode example

<script>
  window.chatbotConfig = { 
    chatbotId: 'your-agent-id',
    apiUrl: 'https://dashboard.getlinkai.com',
    debug: true  // Enable debug logging
  };
</script>
<script src="https://dashboard.getlinkai.com/chatbot.js"></script>

NPM package (React and Next.js)

npm install @linkai/widget

import { LinkAIWidget } from '@linkai/widget';

function App() {
  return (
    <div>
      {/* Your app content */}
      <LinkAIWidget agentId="your-agent-id" />
    </div>
  );
}

Direct iframe

Use an iframe when you need more control over placement.

Button

<iframe 
  src="https://dashboard.getlinkai.com/embed/your-agent-id/button"
  style="position: fixed; bottom: 20px; right: 20px; border: none; width: 400px; height: 600px; z-index: 9999;"
  allow="microphone"
></iframe>

Window

<iframe 
  src="https://dashboard.getlinkai.com/embed/your-agent-id/window"
  style="border: none; width: 100%; height: 600px;"
  allow="microphone"
></iframe>

Keep allow="microphone" if you use voice.

Platform guides

Customize with code

Position

The widget sits in the bottom-right corner by default. Override it with CSS:

<style>
  linkai-widget {
    /* Custom positioning */
    bottom: 20px !important;
    left: 20px !important;
    right: auto !important;
  }
</style>

Theme

The widget detects your site's light or dark theme. It listens to the prefers-color-scheme media query and updates when it changes.

JavaScript API

Control the widget from your own code.

// Access the widget element
const widget = document.querySelector('linkai-widget');

// Open the chat (if using standard button)
if (widget && widget.openChat) {
  widget.openChat();
}

// Close the chat
if (widget && widget.closeChat) {
  widget.closeChat();
}

// Listen for widget events
window.addEventListener('linkai-widget-opened', () => {
  console.log('Widget opened');
});

window.addEventListener('linkai-widget-closed', () => {
  console.log('Widget closed');
});

Widget features

The "Powered by Link AI" setting lives in your workspace brand kit.

Security and privacy

Performance and browser support

Place the script before </body>, prefer the built-in style options over custom CSS, and test on mobile.

Troubleshooting

Still stuck? Email support@getlinkai.com.

Next steps