# Embed Webpages

## Overview

Embedding webpages into your chat involves integrating web content directly within the chat interface. This allows users to access relevant information, resources, or interactive elements without leaving the chat window.

## Benefits

* **Enhanced User Experience**: Users can view content or complete inquiry forms/surveys directly in the chat, reducing the need for external navigation.
* **Increased Engagement**: Keeping users within the chat interface can increase interaction rates and reduce drop-offs.

## How to Install

Typically when embedding a webpage, it will be linked directly from a button. Follow the instructions on the page below and be sure to select the "**URL (iFrame)"** option when adding your button. 

{% content-ref url="/pages/Fy8CBNKLR99z2loivzj5" %}
[Buttons](/resource-center/ai-agent-engine/manage-your-content/enrichments/buttons.md)
{% endcontent-ref %}

{% hint style="danger" %}
**ALWAYS** test your button once published. Depending on the webpage, it may or may not format correctly in the iframe view. 
{% endhint %}

## Our Recommendations

{% tabs %}
{% tab title="Embed Data Collection Forms" %}
{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2Fs2nWT4XpvIDLgUjI2M5s%2Fembed%20forms.mp4?alt=media&token=a207a362-b8f2-4880-bcb5-4940b0fed1b7>" %}
Example of an Embeded Form
{% endembed %}

Not only can you embed forms or signup surveys in specific responses, but include them as a way to collect leads in your live chat unavailable/out of office response!
{% endtab %}

{% tab title="Avoid "Chatception"" %}

<figure><img src="/files/KVXqF0RqUzYOtwvsqVaL" alt="" width="265"><figcaption><p>Example of a "Chat in Chat"</p></figcaption></figure>

Always avoid embedding web pages where you have a chat popup placed! In the example above, a user already in chat was routed to a webpage that has the chat bubble present. If the user hits the chat bubble, it will open another chat on top of the existing one, creating an undesirable user experience.&#x20;
{% endtab %}
{% endtabs %}


---

# 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://docs.satisfilabs.com/resource-center/ai-agent-engine/enhance-the-chat-experience/activation-and-drivers/embed-webpages.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.