Skip to main content

Inline templates

Contimo allows you to manage templates fully in your code. To do that, you need to:

  1. Create a node with your template
  2. Create a node with a config that connects your templates and placement defined in contimo and instructs where to place traffic driving elements

Template node​

The template node looke like

<script type="text/contimo-template" id="site_feed">
    ... you'r lodash template
</script>

To author a template you can follow guides as descibed in Traffic-driving templates.

Config​

Then you place a config

<script type="application/contimo-json">
[
    {
        "templateId": "site_feed", # ID of element with template
        "contimoPlacementKey": "site_feed", # Placement ID defined in Contimo you want to assign
        "transformData": "modifyContimoBanner", # If you want to modify a traffic driver - name of global function
        "container": "#container", # Where traffic driver should appear
        "position": 0, # on what position
        "dummy": { # for debug purposes you can hardcode traffic driver. you must keep it empty for production
            "headline": "Hvad er sponsoreret indhold?",
            "imageId": "BT_demo_wqptjw"
        }
    }
]
</script>

Example​

Here you can find end-to-end example that renders a dummy traffic driver. It uses custom function to split headline in two lines, so the first line is bigger than the second.

<script type="text/contimo-template" id="site_feed">
    <a href="<%= article_url %>">
        <img src="<%= getImageUrl(image_id, 'f_jpg,c_fill,w_784') %"> />
        <big><%- headline_1 %></big>
        <%- headline_2 %>
    </a>                 
</script>
<script>
window.modifyContimoBanner = function (data) {
    // Split headline into two lines
    const words = data.headline.split(/\s+/);
    data.headline_1 = words.slice(0, Math.ceil(words.length / 2)).join(' ');
    data.headline_2 = words.slice(Math.ceil(words.length / 2)).join(' ');
    return data;
};
</script>
<script type="application/contimo-json">
[
    {
        "templateId": "site_feed",
        "contimoPlacementKey": "site_feed",
        "transformData": "modifyContimoBanner",
        "container": "#container",
        "position": 0,
        "dummy": {
            "headline": "Hvad er sponsoreret indhold?",
            "imageId": "BT_demo_wqptjw"
        }
    }
]
</script>
<script src="https://scripts.contimo.app/pub/{publisherId}/drivers.js"></script>