The Content Automation widget lets you take content from your website, product or social feeds and turn it into live email images that update at the moment email is opened - without customization or coding.
Introduction
This widget combines content automation with sophisticated business rules to display product images based on the latest stock levels, pricing, category, etc. Additionally, it can personalize the products displayed depending on a recipient’s browse history or preferences.
To use the Content Automation widget you must first build a template, consisting of a background image, content blocks and the content source which will populate the content. The content source is an API call linking to a data feed that you must set up yourself. These templates will then be used to build the widgets.
Please send us the URL for your feed so that we can test it for you during the implementation phase.
Creating a content automation template
On the Open Time Content page, open the Templates tab and click Content Automation. Here, you can see your library of templates.
To create a new template, proceed as follows:
- Click New Template to open the template editor.
Connecting the content source
- Make sure that Content Source is selected in the editor controls pane on the right.
- Click Connect to open your Content Sources Library.
- Click the source you want to connect and then click Done.
- The content source now appears with a green link icon in your template editor.
Removing the content source
- To remove the content source, click the X icon, or click Connect and select a new source.
If you remove or change the content source, all content blocks that you have created using that source will be deleted.
Adding a new data source
To add a new content source to your library, proceed as follows:
- In the template editor, Click Connect to open the Content Sources Library, then click Add New Content Source.
- Give your data feed a name and select the type. You can choose to connect to a JSON, XML or CSV feed, or to a web page. Click Next.
- Now enter the API method and the endpoint URL.
- Click Test Request and you should see the available data shown in the Response box.
- Save the new source; it is now available for selection in the Content Sources Library.
Uploading a background image
To upload a background image, proceed as follows:
- Make sure that Object Inspector is selected in the editor controls pane on the right.
- Click Upload image… and browse for the image you want. This will appear in the canvas.
The template will automatically resize to the size of the image. You can adjust the size using the Layout controls on the right, but since this scales each axis independently it can distort the image so you should make sure the image is the right size before uploading it.
Adding content blocks
The content block provides the dynamic content to put on the image. To add a content block, proceed as follows:
- Click the Add Block plus sign.
- A text box will now appear on the image with the words Text block visible. Click the text box to display the block editor controls.
- You can now use your cursor to drag it to where you want and resize it from the bottom right corner, or use the Layout controls for more exact placement.
- You can also add preview text, resize and format the text, add borders, and so on. Minimize the editor controls by clicking the white down arrow on the right.
- When you are happy with the format of the content block, click the link icon to connect the content block to the content source.
- Unpack the feed and select the field you want to use to populate the content block and click Done.
- You have now connected the content area with the data feed. Click the preview icon to test the result. If you have more than one position in the feed, you can scroll through them using the left and right arrows.
Working with multiple content blocks
If you want to add more than one content block to the image, use the copy icon to copy an existing block or add a new one as described above. You will now have additional controls in the editor to send each block to the back or bring them to the front.
Once you have finished with your template you can now go on to create the widget.
Creating a Content Automation widget
To create a personalized image widget, proceed as follows:
- In the Open Time Content page, navigate to the campaign you wish to add the widget to and open it, or create a new campaign.
- Click Create new Mailing and Tag and click the Content Automation icon to open the wizard.
- Step 1: Give the mailing a name (we recommend to use the same name as the email campaign where you will add it) and click Next.
- Step 2: Add a description and select the template you would like to use.
- Step 3: Now configure your widget by adding the click-through URL. If the link is in the content feed (i.e. the page for the specific product displayed), click Insert, unpack the feed and select the field containing the link.
- Order by - You can select one of the data fields in the feed and use this to order the content in your widgets. Select the field from the drop-down and use the A->Z up/down arrows to define whether the order is ascending or descending.
Adding conditions to a widget
You may want to add conditions to the widget, to ensure that the content remains correct even if the position of the fields in the feed changes. In our example we have been using a currency feed; we want to display a specific currency (Euro) which is currently in position one in the feed. However, if the position changes, the content may not be accurate. Therefore, we will add a condition at the widget level.
This ensures that only content related to currency code EUR in the feed will be displayed. You can create conditions using any field that is available in your content source, for example, to show only products of a specific price, category, stock availability, language, etc.
Creating tags for positions in the feed
You have now created the ‘master’ tag, showing content from position one in the feed. It is not necessary to repeat this process to create multiple tags. In order to avoid showing the same product more than once in one email, you can add the position parameter into the tag yourself.
Example
Here is an example tag, pointing to the image in position one:
<a href="https://img.kickdyn.com/clickimgdf.ashx?c=229.fPGnWJKp9gDxhpobzJvo"><img src="http://img.kickdyn.com/229/fPGnWJKp9gDxhpobzJvo/imgdf.png" border="0" /></a>To show the second image on the page, add &pos=2 to the end of the <href> and /pos_2/ to the <img src>:
To show the third image on the page, add &pos=3 to the end of the <href> and /pos_3/ to the <img src>:
Repeat this process for each tag that you require.