Add Oogla to Your Website

Install the Oogla AI widget on any website in under 5 minutes — no backend required. Choose your framework below and follow the step-by-step guide.

3-Step Quick Start

Get your AI agent live in minutes:

Add your website URL

Copy & paste the widget snippet

Before You Start

You'll need your Site ID and Company ID from the Oogla dashboard.

Log in to your Oogla Dashboard

Go to oogla.olamalabs.com and sign in to your account.

Navigate to Settings → Widget

In the sidebar, click Settings, then select the Widget tab.

Copy your IDs

You will see your Company ID and Site ID. Keep these handy — you'll paste them into the snippet below.

Add your website domain

Under Settings → Websites, add the domain(s) where the widget will run. This is required for the security check to pass.

Framework Guides

Select your framework to see the exact installation steps and code.

Replace YOUR_COMPANY_ID and YOUR_SITE_ID with the values from your Oogla dashboard → Settings → Widget.

The defer attribute ensures the script loads after your page content without blocking rendering.

index.html

html

<!-- Paste before </body> in your HTML file -->
<script
  src="https://oogla-api.olamalabs.com/widget.js"
  data-company-id="YOUR_COMPANY_ID"
  data-site-id="YOUR_SITE_ID"
  data-api-url="https://oogla-api.olamalabs.com"
  defer>
</script>

Configuration Reference

All options can be passed as data-* attributes on the script tag (for HTML / Pages Router) or as properties on window.ooglaSettings (for App Router and programmatic installs).

Attribute / Key	Required	Description	Default
`data-site-id / siteId`	Required	Your unique site identifier. Found in Dashboard → Settings → Widget.	`—`
`data-company-id / companyId`	Required	Your company/workspace identifier. Found in Dashboard → Settings → Widget.	`—`
`data-api-url / apiUrl`	Optional	API base URL. Defaults to https://oogla-api.olamalabs.com — only change if self-hosting.	`https://oogla-api.olamalabs.com`
`data-position / position`	Optional	Widget launcher position on screen. Options: bottom-right, bottom-left	`bottom-right`
`data-theme / theme`	Optional	Colour theme of the widget UI. Options: dark, light	`dark`
`data-color / color`	Optional	Primary accent color (any valid hex or CSS color).	`#7c3aed`
`data-welcome-message / welcomeMessage`	Optional	Override the AI agent's opening greeting message.	`Set in dashboard`

Using window.ooglaSettings (all frameworks)

Any framework — global config

window.ooglaSettings = {
  siteId:         "YOUR_SITE_ID",       // required
  companyId:      "YOUR_COMPANY_ID",    // required
  apiUrl:         "https://oogla-api.olamalabs.com", // optional
  position:       "bottom-right",       // optional
  theme:          "dark",               // optional: "dark" | "light"
  color:          "#7c3aed",            // optional: any hex color
  welcomeMessage: "Hey! How can I help?", // optional
};

Troubleshooting

Widget not appearing at allOpen browser DevTools Console (F12). Look for any "Oogla Widget" error messages. Common causes: incorrect Site ID, domain not added to your Oogla dashboard, or an ad-blocker. Ensure your domain is listed under Dashboard → Settings → Websites.

Widget loads in dev but not in production (Next.js App Router)This is the most common Next.js issue. Do NOT use data-* attributes on <Script> in App Router — use window.ooglaSettings instead. See the Next.js (App Router) guide above for the correct pattern.

CORS error when the widget calls the APIYour domain may not be whitelisted. Add it under Dashboard → Settings → Websites. Also ensure you're using the correct data-api-url value (https://oogla-api.olamalabs.com).

"data-site-id is required" error in consoleThe widget loaded but could not find its configuration. If using Next.js App Router, switch to the window.ooglaSettings pattern. Otherwise, ensure data-site-id is present on the <script> tag.

Widget flashes briefly then disappearsThe backend authorization check failed. This usually means the domain doesn't match the registered site. Double-check the Site ID and the domain in your dashboard. The hostname (e.g. oogla.olamalabs.com) must match what you added.

Content Security Policy (CSP) blocking the widgetAdd oogla-api.olamalabs.com to your CSP's script-src and connect-src directives. For example: script-src 'self' https://oogla-api.olamalabs.com; connect-src 'self' https://oogla-api.olamalabs.com wss://oogla-api.olamalabs.com;

Advanced Usage

Conditional Loading (authenticated pages only)

If you only want the widget on public pages and not the admin/dashboard:

layout.tsx or _app.tsx

tsx

// Only load widget when NOT on dashboard routes
const isDashboard = typeof window !== 'undefined' &&
  window.location.pathname.startsWith('/dashboard');

if (!isDashboard) {
  window.ooglaSettings = {
    siteId: 'YOUR_SITE_ID',
    companyId: 'YOUR_COMPANY_ID',
    apiUrl: 'https://oogla-api.olamalabs.com',
  };
  // load script...
}

Multiple Sites / Domains

Each domain needs its own Site ID. Create separate sites under Dashboard → Settings → Websites and use the corresponding siteId for each deployment.

Custom Welcome Message per Page

Page-specific override

// Set before the widget script runs, or update after load
window.ooglaSettings = {
  siteId: 'YOUR_SITE_ID',
  companyId: 'YOUR_COMPANY_ID',
  apiUrl: 'https://oogla-api.olamalabs.com',
  welcomeMessage: "Welcome to our pricing page! Need help choosing a plan?",
};

Verifying Installation

After deploying, open your browser Console (F12) and run:

Browser DevTools Console

// Should print your settings object
console.log(window.ooglaSettings);

// Should return the oogla-widget-root div
console.log(document.getElementById('oogla-widget-root'));

If document.getElementById('oogla-widget-root') returns an element, the widget has mounted successfully. You should see the floating launcher button on your page.

Need help? Email us at oogla@olamalabs.com