Embedding on Your Website

Add Opally's chatbot to your website with a single line of code. The chat widget appears as a floating button that guests can click to start a conversation.

Quick Start

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

<script
  src="https://app.opally.com/embed/opally.js"
  data-company-id="YOUR_COMPANY_ID"
  data-company-name="Your Hotel Name"
></script>

That's it! A chat button will appear in the bottom-right corner of your website.

---

Getting Your Embed Code

1. Log in to app.opally.com

2. Go to Settings → Implementation

3. Customize the widget appearance (color, font, logo, placement)

4. Copy the pre-generated script tag using the copy button

5. Paste it into your website

The embed code is automatically generated with your Company ID and customization settings included.

---

Customization Options

You can customize the widget's appearance using data attributes:

<script
  src="https://app.opally.com/embed/opally.js"
  data-company-id="YOUR_COMPANY_ID"
  data-company-name="Your Hotel Name"
  data-primary="#0052cc"
  data-logo="https://yourhotel.com/logo.png"
  data-placement="right"
  data-bottom="16"
></script>

Available Options

Attribute	Description	Default
data-company-id	Your Opally company ID (required)	–
data-company-name	Your hotel name (shown in widget header)	–
data-primary	Primary brand color (hex code)	#0052cc
data-logo	URL to your logo image	–
data-placement	Button position: right or left	right
data-bottom	Distance from bottom in pixels	16

Color Examples

<!-- Blue (default) -->
data-primary="#0052cc"

<!-- Green -->
data-primary="#059669"

<!-- Purple -->
data-primary="#7c3aed"

<!-- Match your brand -->
data-primary="#YOUR_BRAND_COLOR"

---

Platform-Specific Instructions

WordPress

Option 1: Theme Footer

1. Go to Appearance > Theme Editor

2. Find footer.php

3. Add the script before </body>

4. Save changes

Option 2: Plugin

1. Install a plugin like "Insert Headers and Footers"

2. Add the script to the footer section

3. Save

Squarespace

1. Go to Settings > Advanced > Code Injection

2. Paste the script in the Footer section

3. Save

Wix

1. Go to Settings > Custom Code

2. Click + Add Custom Code

3. Paste the script

4. Set placement to Body - end

5. Apply to All pages

6. Save

Webflow

1. Go to Project Settings > Custom Code

2. Paste the script in the Footer Code section

3. Save and publish

Shopify

1. Go to Online Store > Themes

2. Click Actions > Edit code

3. Find theme.liquid

4. Add the script before </body>

5. Save

Custom HTML/React/Next.js

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

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

export default function ChatWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://app.opally.com/embed/opally.js';
    script.dataset.companyId = 'YOUR_COMPANY_ID';
    script.dataset.companyName = 'Your Hotel Name';
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
}

---

JavaScript API

Control the widget programmatically:

// Open the chat
Opally('open');

// Close the chat
Opally('close');

// Show the chat button (if hidden)
Opally('show');

// Hide the chat button
Opally('hide');

// Enter fullscreen mode
Opally('fullscreen');

// Exit fullscreen mode
Opally('exitFullscreen');

// Listen for events
Opally('on', 'open', function() {
  console.log('Chat opened');
});

Opally('on', 'close', function() {
  console.log('Chat closed');
});

Opally('on', 'ready', function() {
  console.log('Widget loaded');
});

Available Events

Event	Description
ready	Widget has loaded and is ready
open	Chat window opened
close	Chat window closed
show	Chat button shown
hide	Chat button hidden

---

Troubleshooting

Widget not appearing

1. Check the console – Open browser developer tools (F12) and check for errors

2. Verify Company ID – Make sure the ID is correct and matches your account

3. Check script placement – The script should be before </body>, not in <head>

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

Widget appears but doesn't respond

1. Check internet connection – The widget requires a connection to Opally servers

2. Disable ad blockers – Some blockers may interfere with chat widgets

3. Check browser compatibility – Use a modern browser (Chrome, Firefox, Safari, Edge)

Styling conflicts

If the widget looks wrong:

1. The widget uses Shadow DOM to prevent style conflicts

2. Check if your site has aggressive global styles

3. Contact support if issues persist

Mobile display issues

The widget is responsive and adapts to mobile screens:

• On mobile, it takes up more screen space when open

• The floating button remains accessible

• Test on actual devices, not just browser resize

---

Best Practices

Do:

• Add to all pages – Guests might have questions from any page

• Use your brand colors – Match the primary color to your website

• Test on mobile – Ensure the widget works well on phones

• Keep knowledge base updated – The chatbot can only answer what it knows

Don't:

• Hide the button – Make it easy for guests to find help

• Use conflicting colors – Ensure the button is visible

• Forget to test – Always test after adding the widget

---

Need Help?

If you have trouble embedding the widget:

• Email: [e-mail]

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