Templates

Templates allow you to create highly customizable, responsive themes for Campaign messages.

To create a new Template navigate to Templates section and click New Template.

Specify with which Pods your Template will be compatible.

Style your Template using CSS and HTML. Below is our notification message structure:

<div class="intempt-notification-pod" intempt-pod-id="dcffc1dac71c11e799d9f9e1d364"
     intempt-template-id="987e1bfac71d11e797f685a8f34db" intempt-notification-id="1_d0f873bb274">
  <div class="intempt-notification-container" intempt-notification-id="1_d0f873bb2742b">
    <div class="intempt-notification-message">
      <p></p>
      <p></p>
    </div>
    <div class="intempt-notification-btn-group">
      <button type="button" onclick="window.intempt.__td('1_d0f873bb274', 'dcffc1dac71c11e799d9f9e1d364')"
              class="intempt-notification-dismiss">×
      </button>
    </div>
  </div>
</div>

Warning

The class of the outer element of Intempt notification is .intempt-notification-container. Styling of the Intempt Pod itself is discouraged due to unpredictable results.

Here’s an example of a template with a background image:

_images/template-ex-1-1.png

To achieve this result we’ve created a custom template with custom css as well as custom html structure:

_images/template-ex-1-2.png

We are wrapping our regular intempt notification {{html}} in a wrapper <div>, which we set to relative position, and adding the <img> element linking to the background image inside of it. Then we set our notification container to absolute position so it appears over the background.

The whole message will have the following structure:

<div class="intempt-notification-pod"
    intempt-pod-id="ed2495eacb8b11e7a9927fb224875714"
    data-intempt-template-id="c50c71ca3da711e8a43bef2f7e467d6c"
    data-intempt-notification-id="9_4cb3c8f8334598">
    <div class="intempt-notification-wrapper">
        <img src="https://intempt.com/modules/site/img/culture.jpg">
        <div class="intempt-notification-container"
            data-intempt-notification-id="9_4cb3c8f8334598">
            <div class="intempt-notification-message">
                <p>Background img test</p>
            </div>
            <div class="intempt-notification-btn-group">
                <button type="button"
                    onclick="window._intempt.__td('9_4cb3c8f8334598',
                    'ed2495eacb8b11e7a9927fb224875714')"
                    class="intempt-notification-dismiss">×
                </button>
            </div>
        </div>
    </div>
</div>

Adding Templates to Campaigns

Assigning of Templates to Campaigns is performed in Write your message section during creation of a new Campaign. To edit Templates of an existing Campaign click on its cog icon.