# Add Your FormWise CoPilot as a Floating Chat Bubble

{% embed url="<https://www.loom.com/share/8378a3fa444a4b49b3d28663f1f0cf72?sid=00c4a1eb-56ec-4a58-aa71-105bac6ad433>" %}

<figure><img src="https://728196400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Lugni2T5TewiPeYs1ka%2Fuploads%2Fv1PLYHBESIbpXWsjTFWz%2Fimage.png?alt=media&#x26;token=51b8b9b2-8794-4849-b305-9f347fce4f9a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://728196400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Lugni2T5TewiPeYs1ka%2Fuploads%2FEb7k1NcgUl3ePlkPm0kX%2Fimage.png?alt=media&#x26;token=6b4c1b6d-15b8-40b9-925f-ee946504f5de" alt=""><figcaption></figcaption></figure>

### Why use the chat‑bubble embed?

* **Cleaner UX** – keeps the page uncluttered; opens only when clicked.
* **Universal** – works anywhere you can paste HTML (WordPress, Webflow, Shopify, Squarespace, HighLevel, custom code…).
* **Billable** – agencies & freelancers can package the bubble as a white‑labeled AI concierge for every client site.

***

### Prerequisites

1. A published **CoPilot** in FormWise.
2. Edit access to the website’s HTML (or an “Embed / Custom Code” block).

***

### Step 1 – Grab the CoPilot URL

1. In **FormWise → CoPilots** open your bot.
2. Click **Publish** ▸ **Share**.
3. Ignore the default *Embed* option—click **Copy URL** instead (it looks like `https://app.formwise.ai/chat/XXXXXXXXXXXX`).

> *Tip: keep that URL handy; we’ll paste it into the code below.*

***

### Step 2 – Customize the Starter Snippet

<figure><img src="https://728196400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0Lugni2T5TewiPeYs1ka%2Fuploads%2Fuhcm9FacMuStBVMMgl2f%2Fimage.png?alt=media&#x26;token=6f5e65e4-4d7a-4cdb-931e-120f1250d3f2" alt=""><figcaption></figcaption></figure>

Replace the two placeholders:

* `COPILOT NAME YOU CAN CHANGE` → the label you want on the button (e.g. **"Ask Sherpa"**).
* `https://app.formwise.ai/chat/XXXXXXXXXXXX` → **your** CoPilot URL from Step 1.

```
<!-- Load Montserrat (optional) -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<style>
  *{font-family:'Montserrat',sans-serif}
  #fw-bubble-btn{position:fixed;bottom:20px;right:20px;background:#000321;color:#fff;border:none;border-radius:50px;padding:14px 20px;font-size:14px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:1000}
  #fw-bubble-modal{display:none;position:fixed;bottom:80px;right:20px;width:90%;max-width:400px;height:80%;border:none;border-radius:12px;overflow:hidden;z-index:1001;box-shadow:0 4px 20px rgba(0,0,0,.3);background:#fff}
  #fw-bubble-close{position:absolute;top:6px;right:10px;background:none;border:none;color:#fff;font-size:18px;z-index:1002;cursor:pointer}
  @media(max-width:480px){#fw-bubble-modal{bottom:70px;right:10px;width:95%;height:80%}#fw-bubble-btn{padding:12px 16px;font-size:13px}}
</style>
<!-- Button -->
<button id="fw-bubble-btn">💬 COPILOT NAME YOU CAN CHANGE</button>
<!-- Modal -->
<div id="fw-bubble-modal">
  <button id="fw-bubble-close">×</button>
  <iframe src="https://app.formwise.ai/chat/XXXXXXXXXXXX" style="width:100%;height:100%;border:none" allow="clipboard-write" allowfullscreen></iframe>
</div>
<!-- Script -->
<script>
  const btn=document.getElementById('fw-bubble-btn');
  const modal=document.getElementById('fw-bubble-modal');
  const close=document.getElementById('fw-bubble-close');
  btn.onclick=()=>modal.style.display='block';
  close.onclick=()=>modal.style.display='none';
  window.onclick=e=>{if(!modal.contains(e.target)&&e.target!==btn){modal.style.display='none'}};
</script>
```

**Color & brand tweaks** – adjust the `background` value on `#fw-bubble-btn`, or swap the font if your brand already has one loaded.

***

### Step 3 – Paste the Snippet on Your Site

1. Open the page (or global theme/footer) where you want the bubble.
2. Paste the entire code **just before `</body>`** for fastest load, or inside any *Custom HTML* block.
3. Save / publish.

That’s it—refresh the page and click the bubble to test.

***

### Step 4 – QA on Desktop & Mobile

* Confirm the bubble shows on every page you added it to.
* Open / close the modal; verify the iframe loads your bot.
* On mobile, tilt to portrait & landscape—modal width should adapt (thanks to the media query).

***

### Packaging & Selling to Clients 👔

| Value to the Client                 | How You Monetize                                 |
| ----------------------------------- | ------------------------------------------------ |
| 24/7 instant replies & lead capture | One‑time setup fee + monthly hosting/maintenance |
| Reduced support load via AI FAQ bot | Charge per seat or per 1K messages               |
| Modern site UX → higher conversions | Bundle inside a *conversion‑booster* retainer    |

**White‑label tip:** Swap colors & fonts to match the client’s brand, and host the CoPilot under their sub‑domain for a seamless feel.

***

### Troubleshooting

| Symptom                      | Likely Cause                                         | Fix                                                  |
| ---------------------------- | ---------------------------------------------------- | ---------------------------------------------------- |
| Bubble doesn’t appear        | Code pasted in WYSIWYG that stripped `<script>` tags | Use “Raw HTML / Code” block or paste in theme footer |
| Iframe is blank              | Wrong URL or bot not published                       | Republish & copy URL again                           |
| Button overlaps chat widgets | Adjust `bottom` & `right` values in CSS              |                                                      |

***

### Next Steps

* Add **custom prompts** or memory to make the bot feel bespoke.
* Pair with a **FormWise SmartForm** pop‑up to collect qualified leads after each chat.
* Track usage in **CoPilot Analytics** to prove ROI to clients.

Need help? Ping us at **<support@formwise.ai>**, or drop a question in the Community Slack.

Happy building! 🚀


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://manual.formwise.ai/formwise/core-tools/copilots/add-your-formwise-copilot-as-a-floating-chat-bubble.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.