Use Smart Content in Campaign Email

General introduction to Email Smart Content

Recommendations allows you to integrate personalized product selections inside email campaigns sent through Campaign. The product selections in the Smart Content will be generated at opening time, based on the user's previous history (browsing behavior, purchase history) and information available about this person in Campaign.

Placement

Once Smart Content is configured inside the Recommendations module, it can be graphically inserted inside a Campaign template.

In the Content Preview section, click on the Campaign logo button:

This will load a dialog box containing the HTML code corresponding to the Smart Content:

This HTML code will have the following structure :

<table border="0" cellpadding="0" cellspacing="0" width="700" id="Some_SmartContent_ID">
    <tbody>
        <tr>
            <td width="100%">
                <table width="100%" border="0" cellpadding="10" cellspacing="0">
                    <tbody>
                        <tr>
                            <td style="text-align: center;">
                                <img src="https://some_domain.com/api/YOUR_CUSTOMER_ID/titleimg?tpid=UNIQUE_USER_IDENTIFIER_VARIABLE&widgetid=SOME_SMARTCONTENT_ID"
                                    style="max-width: 100%">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="700" id="Some_SmartContent_ID">
    <tbody>
        <tr>
            <td align="center" valign="top" width="33%" class="col_0">
                <table width="100%" border="0" cellpadding="2" cellspacing="0">
                    <tbody>
                        <tr>
                            <td>
                                <a href="https://some_domain.com/api/YOUR_CUSTOMER_ID/href?tpid=UNIQUE_USER_IDENTIFIER_VARIABLE&widgetid=SOME_SMARTCONTENT_ID&limit=3&skip=0"
                                    style="max-width: 100%; display: block; height: auto;" alt="" border="0" target="_blank">
                                    <img src="https://some_domain.com/api/YOUR_CUSTOMER_ID/imgwithdescr?tpid=UNIQUE_USER_IDENTIFIER_VARIABLE&widgetid=SOME_SMARTCONTENT_ID&limit=3&skip=0"
                                        style="max-width: 100%; display: block; height: auto; margin:0 auto;" alt="" border="0"/>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            [...]    
        </tr>
    </tbody>
</table>

It is a simple responsive HTML table with a title taking all the width of the table and several columns containing product images. You can copy this HTML to your clipboard and directly paste it into your Campaign template, or paste it into a text file to modify it beforehand.

This HTML can be completely modified (by changing the responsive aspects, margins, padding, etc.) to suit your needs and adapt to the template you are currently using inside Campaign. Modifying this code will not alter the behavior of the Smart Content itself.

This HTML table contains images : one for the title of the Smart Content, and one image per product (3 if you select the "3 products per row" in the Smart Content configuration). These images are generated in real-time as the user opens their email.

The title depends on the language/location text and parameters that are set in the Smart Content configuration. The product images are generated using the font colors and other graphical details set in the Smart Content configuration.

The UNIQUE_USER_IDENTIFIER_VARIABLE has to correspond to the field that uniquely identifies each user to whom the campaign is sent, and it will be replaced  by the user-specific value at send-time.

Once you copied the code, open your Campaign template, go to source mode and paste the code into the template source code.