The website URLs fetched by Web Crop SmartBlocks can be personalized, and the images are periodically updated as the website changes.
Example use cases:
Display a personalized offer code from your website.
Display weather details from a weather site, based on the destination of an abandoned travel email.
Include a Daily offers section in your emails, sourced from a page on your website.
Web Crops allow you to specify a pixel region of the webpage to capture, or you can use a CSS selector to define which area of the webpage to use. For example, selector #WebcropMe selects all content contained inside the element with id="WebcropMe".
You can select the viewport — the device size — that our servers use when rendering the page. This is useful if you want to use content from the mobile-optimized version of a page in your email.
You can also provide a redirect URL to send the user to when they click on the Web Crop image.
Create a Web Crop SmartBlock
Go to Content > SmartBlocks.
Select the Web Crop tab.
Select CREATE SMARTBLOCK.
Configure properties
Once you have created your Web Crop SmartBlock, on the Properties tab:
Add a SmartBlock name.
Optionally, add tags to group this SmartBlock with others of your choice.
For SmartBlock management and reporting purposes.Enter the redirect URL that visitors should be directed to when they click on the image in the SmartBlock.
Enter the UTM tags — utm_source, utm_campaign and utm_medium — you want to use to track clicks on this SmartBlock.
Select the Enable dynamic content checkbox to make the SmartBlock dynamic. (Recommended.)
Enter any merge parameters that you want to allow in the Slot query string.
Expand the Image Format drop-down menu and select either JPG or PNG.
JPG is recommended for pages which contain photos. PNG might be more suitable for smaller web crops with text and areas of flat colour. For larger web crops, file size can be an issue with PNG.
Configure website details
On the Website Details tab:
For Website URL, enter the target URL for the SmartBlock to use.
To specify an a pixel region of the page, enter the number of pixels for
Top
Number of pixels from the top of the page.Left
Number of pixels from the left-hand margin of the page.Height
Height in pixels of the area you want to crop.Width
Width in pixels of the area you want to crop.
Enter a CSS Selector to specify a CSS element on the page for the SmartBlock to target.
Learn more about using CSS selectors.
If you enter both pixel values and a CSS selector, the pixel values are relative to the page area identified by the selector.Expand the Viewport drop-down menu and select the pixel size of the virtual device you want to use to render the web crop.
This can be used to capture the mobile-optimized view of a responsive website.
Configure Advanced options
To configure advanced options for your Web Crop SmartBlock, select the Advanced tab.
Manual Screenshot
By default, the screenshot of the page is taken once it has finished loading. In some cases however, you might want to take the screenshot later, for example, if the page has dynamic elements that are added using JavaScript after the page has loaded.
Enabling Manual Screenshot means that the screenshot isn’t taken automatically, instead it must be manually triggered by some JavaScript on the page itself. To do this, call the $FR_page_ready function once the page has completely finished loading.
Example:
if(typeof window.$FR_page_ready === "function") {
window.$FR_page_ready();
}The web crop image can’t be returned until this function has been called, so make sure to do it as quickly as possible to ensure optimal performance.
If the function isn’t called within 30 seconds when Manual Screenshot is enabled then an error is returned to the user.
Custom CSS/JavaScript
Sometimes you might want to make minor changes to the page before the web crop is captured, for example, to hide elements that aren’t relevant or to move certain elements around. To do this, you can use the Custom CSS and Custom JavaScript fields.
Custom CSS is applied to the page before the screenshot is taken and must be valid CSS.
Example:
.popover {
display: none;
}Custom JavaScript is run on the page once it has finished loading, so any changes can be made before the screenshot is taken.
If the script uses any asynchronous functions then it may need to use the Manual Screenshot feature to ensure the screenshot is not taken until the custom JS has finished running.
Capture redirect URL from the page
It’s also possible to load data from the page captured by the web crop, and use it in the Redirect URL field.
To do this, in the Href Selector field, enter a CSS selector that identifies an element of the page. This element has it's href attribute loaded into the render context of the redirect URL as pageData.linkHref.
To use this captured URL as the redirect URL, enter the following into the Redirect URL field:
{{ pageData.linkHref }}
Advanced - Merging
Advanced - Merging
URL pass-through
You can allow variables to be passed through from the originating URLs, and made available inside the {{ merges }} object.
You can then use this in the Website URL field to alter what content is requested, and also in the Redirect URL field to control where the customer is sent when they click the link. To allow the query string value to be passed through, you must add the query string key to the Merge Parameters field of the SmartBlock Properties.
Example
You might want to include a web crop of a different page of a website based on whether the the visitor is interested in a Summer holiday or a Winter holiday.
On the Properties tab, in the Merge Parameters field, enter
holiday_type.
Also on the Properties tab, in the Redirect URL field, add
{{ merges.holiday_type }}.
On the Website Details tab, in the Website URL field, enter
{{ merges.holiday_type }}.
Add the
holiday_typequery string parameter to any URLs used to access the SmartBlock.
Merge from the person record
If you have the Dynamic (Metered) checkbox selected on the Properties tab for the SmartBlock, then you can merge data in from the person record of the current recipient viewing the SmartBlock.
Example
You might want to include a personalized code, which is stored in the person record, in the redirect URL.
To do this, include {{ person.extend.code }} in the Redirect URL field:
