Our e-mail widgets allow integrating your collected UGC into a variety of e-mail marketing campaigns. These can be configured using our E-mail Widget editor which creates embed code that can be used in any e-mail marketing solution.
Note: Email widget will only display images from the campaign that have products assigned.
Below is a screenshot of the E-mail widget editor:
Layout
The layout options available are 'photo wall' and 'single line'. The first displays media as a gallery with 3 columns and as many rows as required to meet the number set in 'media count'. The second, as pictured in the screenshot above, is similar to a carousel where all media is shown on one line and where the dimensions of the thumbnails are set based on the media count.
Filters
'Granted Only'. Enabling this filter ensures that only media where media rights have been granted will be shown.
Embedding Widgets
Once the e-mail widget has been configured, heading to the 'Embed Code' tab provides the HTML code that will need to be copied and pasted into the ESP platform that you are using to send out marketing e-mails.
In Mailchimp for example, all that is required is adding a Code Block to your e-mail as seen below:
Transactional E-mails
To show only media related to a certain SKU (for transactional emails such as abandoned cart e-mails for example) the SKU filter would need to be included in the embed code and filled using ESP merge tags. The example below shows an example embed code created by our editor:
<table border="0" cellPadding="0" cellSpacing="0" style="margin:0 auto">
<tr>
<td class="ps-email-td" style="padding:5px;border:none;width:265px"><a href="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=0&link=true" target="_blank" rel="noopener noreferrer"><img src="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=0" alt="" border="0" style="display:block;max-height:265px;max-width:100%;margin:0 auto" /></a></td>
<td class="ps-email-td" style="padding:5px;border:none;width:265px"><a href="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=1&link=true" target="_blank" rel="noopener noreferrer"><img src="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=1" alt="" border="0" style="display:block;max-height:265px;max-width:100%;margin:0 auto" /></a></td>
<td class="ps-email-td" style="padding:5px;border:none;width:265px"><a href="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=2&link=true" target="_blank" rel="noopener noreferrer"><img src="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=2" alt="" border="0" style="display:block;max-height:265px;max-width:100%;margin:0 auto" /></a></td>
</tr>
</table>
Here mail merge tags from your ESP related to the productId or SKU would need to be added to the end of the links in the code. You will just need to copy the following "sku" parameter:
&sku=SKU
And add it to the end of all links in the embed code results in the following code. Assuming we want to display all images assigned to SKU "0001", it would look like this:
<table border="0" cellPadding="0" cellSpacing="0" style="margin:0 auto"> <tr> <td class="ps-email-td" style="padding:5px;border:none;width:265px"><a href="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=0&link=true&sku=0001" target="_blank" rel="noopener noreferrer"><img src="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=0&sku=0001" alt="" border="0" style="display:block;max-height:265px;max-width:100%;margin:0 auto" /></a></td> <td class="ps-email-td" style="padding:5px;border:none;width:265px"><a href="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=1&link=true&sku=0001" target="_blank" rel="noopener noreferrer"><img src="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=1&sku=0001" alt="" border="0" style="display:block;max-height:265px;max-width:100%;margin:0 auto" /></a></td> <td class="ps-email-td" style="padding:5px;border:none;width:265px"><a href="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=2&link=true&sku=0001" target="_blank" rel="noopener noreferrer"><img src="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=2&sku=0001" alt="" border="0" style="display:block;max-height:265px;max-width:100%;margin:0 auto" /></a></td> </tr> </table>
This will now ensure that only media related to a specific SKU is returned by our platform.
Multi-language E-mails
By default our embed code does not include a language specification and results in clicks on thumbnails leading to product pages in the default language of the catalog as set in the Photoslurp platform. To specify the language/locale of the product pages that users should be redirected to, add a language code that is supported by your catalog to the end of the HREF links in the embed code like this:
<table border="0" cellPadding="0" cellSpacing="0" style="margin:0 auto"> <tr> <td class="ps-email-td" style="padding:5px;border:none;width:265px"><a href="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=0&link=true&sku=SKU&lang=en_gb" target="_blank" rel="noopener noreferrer"><img src="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=0&sku=SKU" alt="" border="0" style="display:block;max-height:265px;max-width:100%;margin:0 auto" /></a></td> <td class="ps-email-td" style="padding:5px;border:none;width:265px"><a href="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=1&link=true&sku=SKU&lang=en_gb" target="_blank" rel="noopener noreferrer"><img src="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=1&sku=SKU" alt="" border="0" style="display:block;max-height:265px;max-width:100%;margin:0 auto" /></a></td> <td class="ps-email-td" style="padding:5px;border:none;width:265px"><a href="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=2&link=true&sku=SKU&lang=en_gb" target="_blank" rel="noopener noreferrer"><img src="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=2&sku=SKU" alt="" border="0" style="display:block;max-height:265px;max-width:100%;margin:0 auto" /></a></td> </tr> </table>
Note: Ensure that the format of the language code you specify here is the same format as used in your product feed.
Fallback images
Fallback images are necessary when using dynamic filters such as SKU, where there may be insufficient media to meet the 'media count' number that has been set for a specific product.
For example, if the media count has been set to 6 and an abandoned cart e-mail has been sent off for product 123 for which only 3 photos are available fallback images will be used for the remaining 3 positions.
The fields require image URLs and links to where users would be directed when clicking on the images. Using photos and links to products that are currently on sale could be a good option here.
We recommend always specifying the same number of fallback images as has been set for media count to ensure to ensure that your e-mails will always have the required content.
Analytics
Our e-mail widgets have full support for Google Analytics UTM tags. The tags would just need to be added on to the end of the HREF link in the embed code like in the example below:
<table border="0" cellPadding="0" cellSpacing="0" style="margin:0 auto"> <tr> <td class="ps-email-td" style="padding:5px;border:none;width:265px"><a href="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=0&link=true&utm_source=newsletter&utm_medium=email-widget&utm_campaign=summersales" target="_blank" rel="noopener noreferrer"><img src="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=0" alt="" border="0" style="display:block;max-height:265px;max-width:100%;margin:0 auto" /></a></td> <td class="ps-email-td" style="padding:5px;border:none;width:265px"><a href="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=1&link=true&utm_source=newsletter&utm_medium=email-widget&utm_campaign=summersales" target="_blank" rel="noopener noreferrer"><img src="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=1" alt="" border="0" style="display:block;max-height:265px;max-width:100%;margin:0 auto" /></a></td> <td class="ps-email-td" style="padding:5px;border:none;width:265px"><a href="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=2&link=true&utm_source=newsletter&utm_medium=email-widget&utm_campaign=summersales" target="_blank" rel="noopener noreferrer"><img src="https://email.photoslurp.com/redirect/15/?media_count=3&media_index=2" alt="" border="0" style="display:block;max-height:265px;max-width:100%;margin:0 auto" /></a></td> </tr> </table>
This is a premium feature. For more information about your Photoslurp package and pricing, contact your CS Manager.