Embedding on Your Website

Add Opally's search widget to your website with a single line of code. Choose between an inline search field or a modal search dialog.

Quick Start

Add this script tag to your website where you want the search widget to appear:

<script
  src="https://app.opally.com/embed/opally-search.js"
  data-company-id="YOUR_COMPANY_ID"
  async
></script>

The search field will appear exactly where you place the script tag.

---

Getting Your Embed Code

1. Log in to app.opally.com

2. Go to Chat (in the sidebar)

3. Select the Implementation tab

4. Click on Search Widget at the top

5. Customize the widget appearance (colors, font, border radius)

6. Choose your variant (Inline or Modal)

7. Copy the pre-generated script tag

8. Paste it into your website

---

Widget Variants

Inline Field (Default)

Embeds a search input field directly where you place the script. Best for:

• Header/navigation areas

• Dedicated search pages

• FAQ or help center sections

<script
  src="https://app.opally.com/embed/opally-search.js"
  data-company-id="YOUR_COMPANY_ID"
  async
></script>

Modal

Shows a search button that opens a full search dialog when clicked. Supports keyboard shortcut (Cmd+K / Ctrl+K). Best for:

• Minimal header designs

• Pages where space is limited

• Power-user interfaces

<script
  src="https://app.opally.com/embed/opally-search.js"
  data-company-id="YOUR_COMPANY_ID"
  data-variant="modal"
  async
></script>

---

Customization Options

Customize the widget appearance using data attributes:

<script
  src="https://app.opally.com/embed/opally-search.js"
  data-company-id="YOUR_COMPANY_ID"
  data-primary="#0052cc"
  data-font="Inter"
  data-radius="12"
  data-bg="#ffffff"
  data-text="#1f2937"
  data-mode="light"
  async
></script>

Available Options

Attribute	Description	Default
data-company-id	Your Opally company ID (required)	–
data-variant	Display mode: inline or modal	inline
data-primary	Primary accent color (hex)	#0052cc
data-font	Font family	System fonts
data-radius	Border radius in pixels	12
data-bg	Background color (hex)	#ffffff
data-text	Text color (hex)	#1f2937
data-mode	Color mode: light, dark, or auto	light
data-show-chat-link	Show "Chat with us" link: true or false	true

Styling Examples

Dark Mode

<script
  src="https://app.opally.com/embed/opally-search.js"
  data-company-id="YOUR_COMPANY_ID"
  data-mode="dark"
  data-bg="#1f2937"
  data-text="#f9fafb"
  async
></script>

Rounded Design

<script
  src="https://app.opally.com/embed/opally-search.js"
  data-company-id="YOUR_COMPANY_ID"
  data-radius="24"
  async
></script>

Match Your Brand

<script
  src="https://app.opally.com/embed/opally-search.js"
  data-company-id="YOUR_COMPANY_ID"
  data-primary="#YOUR_BRAND_COLOR"
  data-font="Inter"
  async
></script>

Supported Fonts

The following Google Fonts are supported:

• Inter

• Roboto

• Poppins

• Lato

• Source Sans 3

---

Platform-Specific Instructions

WordPress

Option 1: Theme Footer

1. Go to Appearance > Theme Editor

2. Find the template where you want the search (e.g., header.php)

3. Add the script where you want the search to appear

4. Save changes

Option 2: Widget

1. Install a plugin like "Custom HTML Widget"

2. Add the widget to your desired location

3. Paste the script code

4. Save

Squarespace

1. Go to Pages and select the page

2. Add a Code block where you want the search

3. Paste the script

4. Save and publish

Wix

1. Go to Settings > Custom Code

2. Click + Add Custom Code

3. Paste the script

4. Set placement to Body - start (or specific location)

5. Apply to desired pages

6. Save

Webflow

1. Select the element where you want the search

2. Add an Embed component

3. Paste the script code

4. Save and publish

Shopify

1. Go to Online Store > Themes

2. Click Actions > Edit code

3. Find the template where you want the search

4. Add the script at the desired location

5. Save

Custom HTML/React/Next.js

Add the script tag to your HTML template or use a React component:

// React/Next.js example
import { useEffect } from 'react';

export default function SearchWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://app.opally.com/embed/opally-search.js';
    script.dataset.companyId = 'YOUR_COMPANY_ID';
    script.dataset.primary = '#0052cc';
    script.async = true;

    // Insert at a specific location
    const container = document.getElementById('search-container');
    if (container) {
      container.appendChild(script);
    }

    return () => {
      script.remove();
    };
  }, []);

  return <div id="search-container" />;
}

---

Behavior Options

AI Answers

By default, the search widget generates AI-powered answers from your indexed content. You can enable/disable this in the Opally dashboard under Chat > Implementation > Search Widget.

Chat Escalation

The "Can't find it? Chat with us" link appears at the bottom of search results. When clicked, it opens the Opally chatbot (if also embedded) or navigates to a specified chat URL.

To hide the chat escalation link:

data-show-chat-link="false"

Recent Searches

The widget remembers recent searches per visitor (stored in localStorage). Recent searches appear when focusing on an empty search field.

---

Troubleshooting

Widget not appearing

1. Check script placement – The widget appears exactly where the script is placed

2. Verify Company ID – Make sure the ID matches your Opally account

3. Check allowed origins – Your website must be added to allowed origins in Opally

4. Clear cache – Try hard refresh (Ctrl+Shift+R or Cmd+Shift+R)

No search results

1. Check sitemap indexing – Ensure your sitemap is indexed in Opally

2. Wait for indexing – New content may take time to be indexed

3. Verify content – The search only returns content from indexed pages

Styling conflicts

The widget uses Shadow DOM to prevent style conflicts. If issues persist:

1. Check for aggressive global styles on your site

2. Try adjusting the data-mode attribute

3. Contact support if issues continue

Mobile display issues

The widget is fully responsive:

• Results dropdown adapts to screen size

• Touch-friendly interface

• Prevents iOS zoom on input focus

---

Best Practices

Do:

• Place prominently – Put the search where visitors expect it (header, help section)

• Match your brand – Use colors and fonts that fit your design

• Keep sitemap updated – Regularly re-index to include new content

• Test on mobile – Ensure the widget works well on all devices

Don't:

• Hide the widget – Make sure it's easily discoverable

• Use conflicting colors – Ensure sufficient contrast for accessibility

• Forget mobile testing – Always test on actual devices

---

Need Help?

If you have trouble embedding the widget:

• Email: [e-mail]

• In-app support: Log in to Opally and use the help chat