# 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="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FHoMNd5Y4kBHMHDPNia15%2FAdvanced%20Settings%20GIF.gif?alt=media&#x26;token=6213d055-54e2-4c3e-88d2-af765f6d6a56" 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="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FLrFx6RF7nGIcekOqpNbu%2Fimage.png?alt=media&#x26;token=9cfbe2bb-82c6-4cb9-a20f-c2ae734bca72" 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="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FZxBG0HGqWfUggycVScOp%2Fmsg%20chat%20open.gif?alt=media&#x26;token=ed65bfe2-69f7-4aba-8494-107474aefc55" 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="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FYiiqOBd3r0mer8B2VOnm%2Fimage.png?alt=media&#x26;token=7c3460a6-d32c-48b6-adb2-cfb97ad2f463" 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.