Web SDK Integration Guide

Web SDK Integration Guide

Integrate the Ask Clio chatbot into your website using our Web SDK. Follow the steps below to add Clio's AI assistant and customize it to suit your brand.

---

Step 1: Add the iFrame to Your Website

You can embed Ask Clio into your website using an iFrame. The base URL is: https://app.askclio.ai

It accepts two parameters:

• client_id (required) – your unique client identifier. The client_id can be found at the bottom of the Configuration Tab here.

• is_wide (optional) – when set to true, the interface will use a wider layout.

Example iFrame:

<iframe
  src=""
  width="100%"
  height="800"
  style="border: none; border-radius: 8px;"
  allowfullscreen
></iframe>

Just replace abc_123 with your actual client_id. This client_id can be found at the bottom of the Configuration Tab here.

The parameter is_wide=true is optional — remove it if you prefer the default layout.

________________________

Alternative Install: Floating Widget (Script)

If you want Clio to appear as a floating chat button in the bottom-right corner (instead of embedding it in the page), use the script loader option:

```html <script src="https://app.askclio.ai/inject.js"></script> <script> attachClioSDK( "https://app.askclio.ai?client_id=YOUR_CLIENT_ID", "YOUR_CLIENT_ID" ); </script>

---

Step 2: Customization Options

The Web SDK provides several customization options to align the chatbot with your branding:

1. Custom Logo: Replace the default Clio logo with your own branding in the Ask Clio middle office.

2. Custom Sizing: The parameter is_wide=true is optional — remove it if you prefer the default layout.

3. Custome Colors & Fonts: You can change the background colors, fonts, and more in the Ask Clio middle office.

To configure these options, reach out to our support team at [e-mail] for guidance.

---

Step 3: Final Verification

To verify, open the iFrame and interact with the chatbot.

---

Next Steps

Once verified, your Clio chatbot is live and ready to assist your users. If you encounter any issues, please contact our support team at [e-mail] for additional help.