# Embedding GIF with Blings Dynamic Thumbnail

### What this does: 

The image (GIF/thumbnail) displays the recipient’s first name, and the click opens your demo video with the same name and UTMs in the URL.

### Example HTML snippet:

```html

<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" style="max-width:600px; margin:0 auto; border-collapse:collapse;">
  <tr>
    <td align="center" background="https://t.blings.io/87bc4aea-f668-49c3-b165-5808105446f3/{{ contact.firstname }}"
        style="background-repeat:no-repeat; background-position:center; background-size:cover; padding:0; margin:0;">
        
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
        <v:fill type="frame" src="https://t.blings.io/87bc4aea-f668-49c3-b165-5808105446f3/{{ contact.firstname }}" />
        <v:textbox inset="0,0,0,0">
      <![endif]-->
      
      <a href="https://blings.mp5.live/crm-demo?name={{ contact.firstname }}&utm_source=crm_email&utm_medium=email&utm_campaign=demo"
         style="display:block; text-decoration:none; color:inherit;">
        <img src="https://ajeyvddhyklnihwjvuyh.supabase.co/storage/v1/object/public/gifs/1755710062888_Blings_Generic_Thumbnail_3.gif"
             alt="Your personalized video demo, {{ contact.firstname }} - click to play"
             width="600"
             style="display:block; width:100%; height:auto; border:0; max-width:600px; margin:0; padding:0;">
      </a>
      
      <!--[if gte mso 9]></v:textbox></v:rect><![endif]-->
      
    </td>
  </tr>
</table>
```

To Use on your CRM, for the specific project - make sure to update:

1. The video link -  `<a href="..."`  with your MP5 link and the relevant parameters like `name={{ contact.firstname }}`
2. The "dynamic thumbnail" image -  `https://t.blings.io/:id/{{parameter 1}}` - Replace in all occurrences with the dynamic thumbnail id from Blings Platform and with the dynamic parameter (usually name)
3. The GIF asset - `<img src="..."`  based on the actual design provided by the studio designers.&#x20;

\
This is the expected result:

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

Make sure it's working across email clients:

<figure><img src="/files/lpktvBoNcJ1CZK48iosc" alt=""><figcaption><p>Rendered HTML on different Email clients. Results from: <a href="https://www.litmus.com/">https://www.litmus.com/</a></p></figcaption></figure>

&#x20;


---

# 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://help.blings.io/developers/getting-started/how-to-connect-my-data-to-the-sdk/crm-data-integration/embedding-gif-with-blings-dynamic-thumbnail.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.