# Advanced Pop-Up Options

## Using Your Own Button

If you have advanced pop-up specs, a need for custom branding, or unique automation it is possible to use your own creative. 

To do so, we will hide the button from displaying on the Satisfi Labs side. You will then load our standard snippet + an additional line of code as seen below that forces our popup to load on click.

See [here ](https://d2.satisfi6.com/html/essentials_hidden_button.html)+ view the page source for examples of how the below options function.

<figure><img src="/files/oGXgSJbqWOdjejJBPYZX" alt=""><figcaption></figcaption></figure>

#### **Example Snippet**:

{% code overflow="wrap" %}

```javascript
<script id='satisfiScript' src='https://chat.satis.fi/popup/embedder?popupId=XXXX'></script>
```

{% endcode %}

#### **Open Popup:**

Force popup to fire on click as long as the example snippet is loaded onto the site

{% code overflow="wrap" %}

```javascript
 <input id="clickMe" type="button" value="Open Popup" onclick="SatisfiApp.Global.chatPopupOpen();" />
```

{% endcode %}

#### **Show Button:**

Upon website button click will allow the popup to show on the site

{% code overflow="wrap" %}

```
    <input id="clickMe" type="button" value="Show Button" onclick="SatisfiApp.Global.chatButtonShow();" />
```

{% endcode %}

#### **Hide Button:**

Upon website button click will force the button to no longer show on the site

{% code overflow="wrap" %}

```
   <input id="clickMe" type="button" value="Hide Button" onclick="SatisfiApp.Global.chatButtonHide();" />
```

{% endcode %}

**Close PopUp:**

Upon website button click will force the popup window to close

{% code overflow="wrap" %}

```
    <input id="clickMe" type="button" value="Close Popup" onclick="SatisfiApp.Global.chatPopupClose();" />
```

{% endcode %}

## Examples

{% tabs %}
{% tab title="Old Town Trolley" %}

<figure><img src="/files/ECgfAmhnfqZgZKZs2HVn" alt="" width="369"><figcaption><p>In mobile view, this button forces the popup to fire on the user's click</p></figcaption></figure>
{% endtab %}

{% tab title="Madison Square Garden" %}

<figure><img src="/files/SFVgPyfJ4qbsXpoQmvJ5" alt="" width="404"><figcaption><p>Give users the ability to open the chat through different graphics/links on your webpage</p></figcaption></figure>

**Engage Customers Where They Are:** It's important that you engage customers and offer assistance via chat through a variety of entry points. Verses relying on customers clicking the pop-up icon, users can open the chat through different graphics/links on your webpage.
{% endtab %}

{% tab title="Washington Nationals" %}

<figure><img src="/files/qOqsc2d6Ip4v1u1NtMo2" alt=""><figcaption><p>Launches the chat when the user clicks this button</p></figcaption></figure>
{% endtab %}
{% endtabs %}

## Need Help?

We are here to help you throughout the whole process!

* Location = You would need to submit a request through the request portal to change the settings on the display location. Please provide a visual of where you want it to be located.
* Image = You would provide us with an image using the request portal with the exact size and specs for how it should be displayed.


---

# 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/install-your-chat/web-installation/advanced-pop-up-options.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.