Create Web Snap Content

Web Snap is a Content Builder feature that allows you to include dynamic portions of a website in Open-Time Email experiences.

When a recipient opens an email with Web Snap content, Monetate includes an image rendered from the selected portion of the site. This image is retrieved at the time the recipient opens the email, thus giving it real-time relevancy.

You can leverage Web Snap in Open-Time Email experiences to alert your customers about a variety of ever-changing content:

• Top articles
• Flash sales
• Sales with clearance items that frequently change
• Inventory lists
• Stock market tickers
• Real estate rates
• Scoreboard updates
• Instagram or Twitter feeds
• Flight time changes
• Current bestseller lists

How Web Snap Works

Here's an overview of what happens when you leverage Web Snap in an email experience.

1. A recipient opens the email.
2. An image request is sent to Monetate.
3. The platform checks for a near–real-time cached version of the image and then returns it if it exists.
4. A browser on a Monetate server opens the Web Snap source page.
5. The platform captures a snapshot of the page element designated in the Web Snap configuration and then returns it to the email recipient.
6. Monetate caches the image for identical requests.

Web Snap and Secure Content

If you have an authenticated website that you want to use with Web Snap, the process is slightly different.

1. Hash and encrypt the unique identifying parameter, which is required to log in to the content.
2. Add the parameter to the Web Snap URL in Content Builder.
3. When a recipient opens the email, an image request is sent to Monetate.
4. The platform loads your site using the unique parameter so that the site renders the personalized content.
5. Monetate sends the personalized image back to the recipient's email.
6. When the recipient clicks the Web Snap image, Monetate retrieves the redirect link for that user and then sends them to the appropriate landing page.

Prerequisites for Creating a Web Snap Image

To create a Web Snap image, you first must identify certain configuration components.

• Webpage URL — The URL for the page on your site from which you want to make the Web Snap
• CSS Selector — The part of the page you want to appear in the email, such as div#shop-sale.shop-main-container, which identifies the container on the page in which the newest clearance products appear, or article.top-news, which identifies the most-read news articles on a page
• Landing Page URL — The page that loads when an email recipient clicks the Web Snap image
• CSS — Optional CSS to modify the content for your needs
• Dimensions — The overall width and height for cropping the Web Snap within the page selector

Creating a Web Snap Image

Follow these steps to create an image with a Web Snap layer.

1. Click COMPONENTS in the top navigation bar and then select Content.
2. Click CREATE NEW.

   

3. In the New Content modal, give the image a name, and then adjust the image's dimensions in pixels, as necessary. Optionally, add alternative text and a background color. Click OK.

   

4. Click Add Layer and then click Web Snap.

   

5. Enter the URL for the site that you want to use for the Web Snap, and then click GO.

   

6. Input the CSS selector for the HTML element on the page that you want captured, and then click OK. See Using CSS Selectors with Web Snap in this documentation for more information.

   

7. Optionally, adjust the size and and position of the capture area by adjusting the coordinates and the dimensions under the Position and Size headings, respectively, on the Layers panel or by adjusting the selected area for cropping on the canvas.

   

8. Click SAVE.

   

9. Reposition the Web Snap layer as necessary on the image canvas. Resize the image canvas if necessary to accommodate the Web Snap capture, or click the Web Snap layer entry in the Layers panel to return to Web Snap Editor to resize it.

   Do not scale the Web Snap layer in Content Builder in lieu of resizing it in Web Snap Editor. Scaling the Web Snap layer can cause distortion.

   

10. Click SAVE and then click CLOSE to exit Content Builder.

    

You can add images, dynamic text, click zones, maps, and other layers to the image with the Web Snap layer to create a complete piece of content for an email experience.

Using CSS Selectors with Web Snap

Inputting a CSS selector ensures you select only the area of the site you want for the Web Snap content and nothing else. Additionally, if you change your site's format after creating the Web Snap image, the CSS selector used in the Web Snap layer guarantees that the selected area adjusts accordingly.

Identifying CSS Selectors Using Chrome

If you use Google's Chrome browser, you can use its Developer tools feature to obtain the CSS value needed for the Web Snap layer you're creating.

First, launch in Chrome the page that contains the content you want used for the Web Snap image. Find the element or area that you want to use, right-click it, and then select Inspect to launch Developer tools.

The Developer tools feature typically launches showing the selector the element on which you right-clicked. If you want to obtain the CSS selector for a different element, move your mouse pointer over the page until the element is highlighted and its CSS selector appears in a pop-up. You can write down the selector in the pop-up if it's not too long. Another option to record the selector is to right-click the highlighted corresponding line of code in the Elements pane of Developer tools, select Copy, and then select Copy selector.

If you're not immediately ready to paste the path into the selector modal in Web Snap editor, paste it into a text document and save it for later entry.

Identifying CSS Selectors Using Safari

If you use Apple's Safari browser, you can use its built-in developer tools to obtain the CSS selector for a Web Snap image.

First, you must enable the feature in the browser. Launch the browser, click Safari in the menu bar, and then click Preferences. Next, click the Advanced tab, select Show Develop menu in menu bar, and then close the preferences screen.

To identify the selector, launch in Safari the page that contains the content you want used for the Web Snap image. Find the element or area that you want to use, right-click it, and then select Inspect Element to launch Safari's Web Inspector tool.

If the element you want to use in the Web Snap you're creating isn't highlighted in Web Inspector, then move your mouse pointer over the page until it is. Right-click the highlighted corresponding line of code in the Elements pane of Web Inspector, and then select Copy.

If you're not immediately ready to paste the path into the selector modal in Web Snap editor, paste it into a text document and save it for later entry.

Identifying CSS Selectors Using Firefox

Mozilla's Firefox browser includes the Web Developer Tools feature that you can use to identify the CSS selector needed for the Web Snap layer you're creating.

First, open the page that contains the content you want used for the Web Snap image. Find the element or area that you want to use, right-click it, and then select Inspect.

Move your mouse pointer as necessary to highlight the line of code in the DOM and Style Inspector pane of Web Developer Tools that corresponds to the content on the webpage that you want captured in the Web Snap layer. Next, right-click that code line, click Copy, and then click CSS Selector.

If you're not immediately ready to paste the path into the selector modal in Web Snap editor, paste it into a text document and save it for later entry.