Waxwing Widget Integration Guide

This guide explains how to integrate two types of Waxwing widgets into your website:

Input Widget: An always-visible embedded widget (e.g., for service booking or support).
Button Widget: A widget that appears as a popup when a button is clicked.

1. Input Widget (Always Visible)

Overview

This widget is embedded directly into your page and is always visible. It is ideal for scenarios where you want users to interact with the widget without needing to click a button.

Integration Steps

1. Add a container div to your HTML:

<div id="widget-container"></div>

2. Embed the widget script:

<script src="https://www.waxwing.ai/api/embed?service=YOUR_SERVICE_SLUG" async ></script>

Replace `YOUR_SERVICE_SLUG` with the appropriate service identifier (e.g., `conference-ooh`).
The script will automatically render the widget inside the `widget-container` div.

Customization

If you want to customize the width of the widget container, wrap it inside your own wrapper div and adjust the width as needed. The widget container itself is managed by the script.

Example with Wrapper Div:

<div style="max-width: 400px; margin: 0 auto;">
  <div id="widget-container"></div>
</div>
<script src="https://www.waxwing.ai/api/button-embed?service=YOUR_SERVICE_SLUG" async ></script>

This example wraps the widget-container in a parent div with a maximum width of 400px and centers it. You can adjust the style as needed to control the widget's placement and size.

To change the submit button color: You need to update the button color for your service directly in the Waxwing dashboard. -> Services -> Select your Service -> Click on Edit button-> then go to the CTA button customization options. Changes made there will automatically reflect in the embedded widget on your site.

2. Button Widget (Popup on Click)

Overview

This widget remains hidden until a user clicks a trigger button. It is ideal for chat-style or modal interactions.

Integration Steps

1. Add a trigger button to your HTML with proper id.

<button id="waxwing-widget-trigger">Open Widget</button>

2. Add an empty container div to the body (outside the button):

<div id="widget-button-container"></div>

3. Embed the button widget script:

<script src="https://www.waxwing.ai/api/button-embed?service=YOUR_SERVICE_SLUG" async ></script>

Replace `YOUR_SERVICE_SLUG` with the appropriate service identifier.
The script will handle showing the widget when the button is clicked.

Customization

Styling: You can style the trigger button as you like.

Multiple Button Triggers

If you want multiple instances of the button trigger, add the class name button-trigger to each trigger element:

<button class="button-trigger">Open Widget 1</button>
<button class="button-trigger">Open Widget 2</button>

All elements with the button-trigger class will open the widget when clicked.

3. Notes

Both widgets require the container divs with the correct IDs (`widget-container` or `widget-button-container`).
Change the service query parameter in the script URL to display a different service. One service can be linked per page.
For any issues or questions, contact the Waxwing support team at [email protected]