# Images & GIFs

## Add an Image/GIF

### Prewritten Response

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FHCyRnZIHEoGSXShHGF2R%2Fadd%20image%20v1.mp4?alt=media&token=46cf248b-f703-4e4a-bf7d-09ac4b054b05>" fullWidth="true" %}

1. In the Satisfi Labs dashboard, go to **Studio -> NLP Manager -> Responses**
2. Click the response you wish to update and select the pencil icon
3. Within Form View, scroll to the **Image** section and select **Add Image...**
4. Select **Browse**
5. Upload your new image by selecting the upload icon in the bottom left corner
6. Hover over the image you wish to include and click the **Select** button
7. Publish your response updates

### Generated Responses

If you want to add an image to a generated response, follow the steps below:

{% content-ref url="../response-types/generated-responses/enrich-generated-responses" %}
[enrich-generated-responses](https://docs.satisfilabs.com/resource-center/ai-agent-engine/manage-your-content/response-types/generated-responses/enrich-generated-responses)
{% endcontent-ref %}

***

## Our Recommendations

### Image Linkouts

Explore how you can allow users to expand images in new tabs and redirect them to other web pages.

{% tabs %}
{% tab title="Redirect to Another Page" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2F6DcZQp4G2YtRRC4227xn%2Fimage.png?alt=media&#x26;token=c9de2863-993c-453f-ac38-1778b2736d41" alt=""><figcaption></figcaption></figure>

Utilize images as buttons! If a user selects the image, they will be sent to a designated link. Once you've added your image to the response, add the URL before publishing the response.&#x20;

{% hint style="danger" %}
The URL must begin with https\:// or http\://
{% endhint %}
{% endtab %}

{% tab title="Expand the Image" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FC4VhGSQsW6WhDO4i8Z10%2Fimage.png?alt=media&#x26;token=3b3eddf8-262d-447b-840b-de5fe64da188" alt=""><figcaption></figcaption></figure>

If you’d like a user to view the image in a larger window, you’ll want to provide an image URL link hosted within our dashboard. To find this:

1. While in the Image Library, click on an image (note: click the actual image, not **Select**)
2. Copy the URL provided at the bottom of the image
3. Once copied, close the popup&#x20;
4. Paste this into the URL field to the right of the image within the response editor view
5. Publish the response
   {% endtab %}
   {% endtabs %}

## Image Specs

We can support JPG, GIF, PNG, or SVG files. The following specs are recommended based on what we have found to be considered best practice.

### Header/Banner Ad: Logo Only

{% tabs %}
{% tab title="Specs" %}

* Size: 234x60
* Recommend File Type: PNG, GIF or SVG
* An image file of around 100 KB is recommended. The file should not exceed 200 KB.
* Horizontal logos with transparent backgrounds are strongly preferred

  The width of the header image will automatically be resized to fit within the boundaries of the header. However, we recommend that the header image is scaled such that the pixel height does not exceed 150 px.

{% hint style="danger" %}
If the user is linked out to a URL by clicking the chat header image, be sure to include the link in the correct format to ensure tracking occurs. Click the link [here](https://docs.satisfilabs.com/resource-center/ai-agent-engine/enhance-the-chat-experience/sponsor-inclusion#header-a-d-placement) for more information.&#x20;
{% endhint %}
{% endtab %}

{% tab title="Examples" %}

<div><figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FvRwn8Ye7GILleuFNyWEO%2Ffw%20example.png?alt=media&#x26;token=a0fc1762-edd8-4899-a7ef-2997c6ea3d2e" alt="" width="375"><figcaption><p>Example Header with a Logo Only (In Red)</p></figcaption></figure> <figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FtuS5wY6VMxgl8uYpqL8a%2Fcoop%20header%20.gif?alt=media&#x26;token=017f13a7-270e-4310-93a2-3559ce3169cd" alt="" width="354"><figcaption><p>Example Header with Logo GIF</p></figcaption></figure></div>
{% endtab %}
{% endtabs %}

### Header/Banner Ad: Full Banner

{% tabs %}
{% tab title="Specs" %}

* Size: 5x1 ratio, 750x150
* Supported File Types: PNG or SVG
* An image file of around 100 KB is recommended. The file should not exceed 200 KB.
* The width of the header image will automatically be resized to fit within the boundaries of the header. However, we recommend that the header image is scaled such that the pixel height does not exceed 150 px.
  {% endtab %}

{% tab title="Examples" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FFLbxq7BnGPESSO6QU13B%2Fmarlins%20highlighted.png?alt=media&#x26;token=5643ace0-d06b-48a2-bee6-34bf81141266" alt="" width="375"><figcaption><p>Highlighted In Red</p></figcaption></figure>
{% endtab %}
{% endtabs %}

### Response Images

{% tabs %}
{% tab title="Specs" %}

* Size: 2x1 ratio, 800x400 is preferred
* Supported File Types: PNG, GIF or SVG
* An image file of around 100 KB is recommended. The file should not exceed 200 KB.
* If needed, your Account Manager can assist with recommendations on which Response IDs to include images on.&#x20;

{% hint style="warning" %}
**Welcome Message**

If you’d like for your welcome message image to expand across the chat container (recommended for welcome messages in web/app channels), please switch to code view and add the following to the bottom of the card:&#x20;

```
#SETTINGS
[display_type](card)
```

Please note that images are always rendered at the top of a response and we can only support one image per response.&#x20;
{% endhint %}
{% endtab %}

{% tab title="Examples" %}

<div><figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2Fq2jV3Q2tnyAbcJvbqg6Y%2Ftango.gif?alt=media&#x26;token=dc1171dd-af9a-4d1c-861f-9ddbcddd9ca5" alt="" width="365"><figcaption><p>Example GIF in a Welcome Message</p></figcaption></figure> <figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2F8eXrHcFp7NOY30NEe5vb%2Fastros%20highlighted.png?alt=media&#x26;token=741f57de-08fa-4264-9929-b03ed7451bbb" alt="" width="375"><figcaption><p> Branded Image (Coca-Cola) Related to User's Questions</p></figcaption></figure></div>
{% endtab %}
{% endtabs %}

### Background Skin

{% tabs %}
{% tab title="Specs" %}

* Size: 375x600
* Supported File Types: PNG or SVG
* An image file of around 100 KB is recommended. The file should not exceed 200 KB.
* The chat will render on multiple devices like desktop, mobile, tablet, etc. so if the image contains verbiage, we'll want to ensure during testing that it displays appropriately on each device.
  {% endtab %}

{% tab title="Examples" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2F0f6SOpe2YF5N0tOHlbsp%2Fwatermark.png?alt=media&#x26;token=68f56d1e-2254-44db-80b3-e29ec5fa11f4" alt=""><figcaption><p>Highlighted In Red</p></figcaption></figure>
{% endtab %}
{% endtabs %}

### Avatars

{% tabs %}
{% tab title="Specs" %}

* Size: 200x200
* Supported File Types: PNG or SVG files are preferred
* An image file of around 100 KB is recommended. The file should not exceed 200 KB.
* Provide high-quality, clear image files. Transparent background is strongly recommended.
  {% endtab %}

{% tab title="Examples" %}

<div><figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2F3ieE1BqqlQYwOoePqJhq%2Fwranglers%20avatar.png?alt=media&#x26;token=5044ac63-6d4d-4f80-9cc6-b5dfa277bd54" alt="" width="355"><figcaption><p>Use a Mascot as an Avatar</p></figcaption></figure> <figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FpjtUmuSnG2s1DL08byFo%2Fsaddledome%20avatar.png?alt=media&#x26;token=452aafc8-79b4-48fe-9fd0-47792ed1a111" alt="" width="354"><figcaption><p>Create Your Own Character, Use Your Logo, Etc.</p></figcaption></figure></div>
{% endtab %}
{% endtabs %}

### Custom Pop-Up Image

{% tabs %}
{% tab title="Specs" %}

* Size: The image file will be added with the exact dimensions of the image provided (a 50x50 px image will render a 50x50 px popup)
* Supported File Types: PNG, JPG, or SVG
* An image file of around 100 KB is recommended. The file should not exceed 200 KB.
* For brand consistency, we strongly recommend utilizing your creative team in order to meet website requirements.
  {% endtab %}

{% tab title="Examples" %}

<div><figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FKELxc3DA5263liCcjQmM%2Fflames-%20popup%20icon.png?alt=media&#x26;token=6c59ef0f-4b20-4bb0-a2f1-ff70d145e55f" alt="" width="161"><figcaption><p>Include a Prompt Bubble with Your Pop-Up Image</p></figcaption></figure> <figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2Fgehzs2rUTsDONMwuHsWL%2Fmountain%20creek.png?alt=media&#x26;token=881cb3d2-274d-409b-af42-7137cbbd98e7" alt="" width="375"><figcaption><p>Create an Image That Includes Text</p></figcaption></figure></div>
{% 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/manage-your-content/enrichments/images-and-gifs.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.