Your own code

Other. A Piksio image goes into Your own code as an ordinary image link. Your code fills in each recipient’s values, and Piksio renders their version when the email is opened.

Fastest way

In the Piksio editor, open your saved image and click Use in email, then pick Your own code. It writes everything on this page for your own design, ready to copy.

Where to paste

Call the function once per recipient and use the link in your email HTML.

Example

For a design with first_name and company_name, the snippet looks like this:

// One Piksio image link per recipient. URLSearchParams encodes each value,
// so names like "Smith & Co" are safe. Empty values show the fallback.
function piksioImageUrl(recipient) {
  const values = {
    first_name: recipient.first_name,
    company_name: recipient.company_name,
  };
  const params = new URLSearchParams();
  for (const [key, value] of Object.entries(values)) {
    if (value !== undefined && value !== null && value !== '') params.set(key, String(value));
  }
  const query = params.toString();
  return `https://app.piksio.com/i/YOUR_IMAGE_ID${query ? '?' + query : ''}`;
}

// Use it wherever your code builds the email HTML.
const imageHtml = `<img src="${piksioImageUrl(recipient).replace(/&/g, '&amp;')}" width="600" alt="Your personalized image" style="display:block;max-width:100%;height:auto;border:0" />`;

Check before you send

1. In Use in email, use Test the link with sample values, and again with unfilled tags. Both are free.
2. Preview one real recipient in your tool to confirm it fills in the fields.
3. See Fallbacks and blanks for what a recipient with missing data sees.