Dynamic images

<div class="ink-cat-header"> Integrating dynamic images is possible with HTML templates (for both - letters and postcards). You can do it with custom fields. </div>

<div class="ink-hr"> </div>

> ❗️ The images must be hosted on your side (any CRM, hosts like AWS S3, etc.).

> 📘 Follow the next step to apply dynamic images (if you are using any of the webhooks - skip to the 3rd step)

## <div class="ink-heading"> 1. Create an HTML template </div>

You can create a template via the user interface or edit an existing one from the [templates](https://app.inkit.io/#/templates) page.

Learn how to create a template [here](https://docs.inkit.com/docs/getting-started#div-classink-heading-4-create-a-template-for-your-future-mailing-campaign-div).

## <div class="ink-heading"> 2. Copy-paste or write down the HTML files and wrap the dynamic data into the double % signs. </div>

> 📘 If you are using <i> webhook </i> or <i> letter-webhook </i>, just follow the rules for content of the <i> front\_html </i> and <i> back\_html </i> fields.

<img src="https://help.inkit.com/hc/article_attachments/360069679773/mceclip5.png" alt="dynamic image as background image" />

The dynamic image could be either background-image or src value for an img tag:

<img src="https://help.inkit.com/hc/article_attachments/360068554334/mceclip6.png" alt="dynamic image as src" />

Every text within %% will be treated as custom field and filled with a value received from the request.

> 🚧 If you don't use Inkit's UI - follow the same rules for raw html's in the webhook requests.

## <div class="ink-heading"> 3. Send webhook request or campaign. </div>

The variables <b> dynamic\_img\_src </b> and <b> dynamic\_background </b> should be present in contact custom data section under each contact details or passed via <b> webhook </b> or <b> letter-webhook </b> (depends on your request type and product).

```json Webhook JSON Example
{
  "api_token": "{{API_TOKEN}}",
  "template_id": "{{TEMPLATE_ID}}",
  "first_name": "Elon",
  "last_name": "Musk",
  "email":"[email protected]",
  "company":"SpaceX",
  "phone":"3107099497",
  "address_line_1": "1 Rocket Road",
  "address_line_2": "Suite 1",
  "address_city": "Hawthorne",
  "address_state": "CA",
  "address_zip": "90250",
  "address_country": "US",
  "source": "Webhook"

  "dynamic_img_src": "{{LINK_TO_IMAGE}}",
  "dynamic_background": "{{LINK_TO_IMAGE}}"
}