Pods

Pods are empty <div> elements, that can be inserted into your site in any desirable location (header, footer, inside main content) to define the placement of Campaign messages.

When a Campaign message needs to be displayed, Intempt script on your site will receive message data specifying the ID of the Pod in which the message needs to be shown, the Template of the message and the message itself. This enables the marketer and the designer to create various messaging campaigns without the need of redeployment.

Please note that Templates can still affect the message placement, for example by setting the “position” property of one the elements to “fixed”. To prevent unexpected behavior, Pods can only be used with Templates that were tested and explicitly selected as compatible. This can be done during creation or editing of a Template.

Pod deployment options

Intempt pod system is flexible and allows multiple deployment options:

Use the default pod

If no custom pod-template pair is defined for a message, it will appear in the default pod (page overlay) and it will use the default template, which will place the message on the top of the page(over the header) and apply minimal styling. This doesn’t require any additional work on your site besides deploying the tracker.

Create a custom pod

Create a custom pod in the Intempt console and deploy it in the desired location on your site. If you wish to replace existing content on your site with the notification message once a notification is received, wrap this content in the pod container.

Use a unique data attribute

Since a pod is simply a <div> with a special attribute, you can make any existing element on your site become a pod by attaching a data-intempt-pod-id attribute to it (see example below) and replace its content when notification appears. For example, you can make the <body> tag a pod by attaching intempt pod attribute and the entire site content will be replaced with the contents of the message when notification appears.

Use HTML Injection feature

The benefit of this method is that you can leverage the power and flexibility of custom pods without having to deploy any additional code on your site. To define the element of your site that you wish to become a pod, first get its CSS selector using browser developer tools. Add this selector to a new or existing pod in pod edit menu. To display the pod in multiple locations, you can add several selectors. Use HTML Injection with caution (especially selectors containing “n-th child”). If HTML structure of your site gets altered, the selectors might require updating, otherwise notifications may appear in unwanted locations.

API Pod

If you wish to create a fully custom notification delivery experience and at the same time still get all Intempt platform features, you have an option to use the API pod. To use the API pod you will need to deploy an event listener on your site and handle the intempt notification event yourself. More details in an example below.

Creating and deploying a custom Pod

Navigate to Pods section and click New Pod. Specify the name of the Pod and pick a color of your liking. Click Create Pod.

Click View code and copy the code snippet. Insert the code into the pages of your project where you want Campaign messages to appear.

_images/view-code.png

This is what an idle Intempt pod looks like:

<div class="intempt-notification-pod" data-intempt-pod-id="YOUR_POD_ID"> </div>

By default, the pod container is empty and not visible to your regular visitors.

If a visitor qualifies for a campaign the content and styling are being loaded and the notification appears:

<div class="intempt-notification-pod"
data-intempt-pod-id="YOUR_POD_ID"
intempt-template-id="YOUR_TEMPLATE_ID" intempt-notification-id="YOUR_NOTIFICATION_ID">
  <div class="intempt-notification-container" intempt-notification-id="YOUR_NOTIFICATION_ID">
    <div class="intempt-notification-message">
      <p>Your Notification Message</p>
    </div>
  </div>
</div>

If you would like to show just the campaign message without a dismiss button and any other wrapping classes, you can enable the ‘Render raw message only’ option in pod edit menu. Here’s an example of a raw message:

<h2 class="text-center"
    data-intempt-pod-id="YOUR_POD_ID"
    data-intempt-template-id="YOUR_TEMPLATE_ID"
    data-intempt-notification-id="YOUR_NOTIFICATION_ID">
       Your Notification Message
</h2>

HTML Injection pod example

Let’s take a look at the following example where we use a combination of HTML Injection and raw message option to seamlessly replace the existing header in Intempt console:

  1. First, we copied the css selector of the desired element
_images/pod-ex-1-0.png _images/pod-ex-1-1.png
  1. Next, we created a new pod and attached the selector:
_images/pod-ex-1-2.png

Warning

Proceed with caution when using injected pod in an SPA or similar dynamic environment. For example, a notification that is injected into an often updated Angular ng-if element or into a React element that gets re-rendered constantly may behave unpredictably.

  1. Since we did not want our notification to alter the html structure of the header, we activated the raw message option.
  2. To make the message inherit the existing styling, we made sure we’re using an empty template. Don’t forget to specify that the welcome header pod is compatible with the template:
_images/pod-ex-1-3.png
  1. Next we created a sample campaign that gets triggered on console home visit and attached the pair of our newly created pod and template to it.
_images/pod-ex-1-4.png

Here is how the header looks before receiving the notification:

_images/pod-ex-1-5.png

And after:

_images/pod-ex-1-6.png

API pod example

Let’s implement a simple campaign using API pod. First, we need to subscribe to ‘intempt.notification’ event. To do this, you’ll need to add a listener onto your site:

window.addEventListener('intempt.notification', function (event) {

const notificationId = event.detail.id;
alert('API pod notification received!');
console.log(JSON.stringify(event.detail, null, 2));

})

Next, create a campaign and specify an Api-pod – Default Template pair in it.

_images/pod-ex-2-1.png

The API pod is provided by default and is not editable.

When the campaign gets triggered, our custom notification handler code will be executed:

_images/pod-ex-2-2.png

And the event.detail will look like this:

{"id": "6_ec634aa4434о",
  "notification": {
    "campaign": "console-api-pod-test",
    "labels": [],
    "template": "",
    "message": {
      "payload": [
          {"name": "timeseries.identify.name",
           "value": "there"}],
      "previewHtmlContent": null,
      "content": "Hello \n<span
           class=\"variable-span-processed\">there</span>!
             Api pod testmessage!"
    },
    "requestId": "5d8f7e4f0bee4c9e9e50844d29e0",
    "messageVariant": "Variant 1",
    "control": false,
    "campaignId": "7bae34430311e8f0ed234e3fc22",
    "podsWithTemplates": [
      {"pod": "apipod",
        "template": "8c6d4d2a98b711e78c76c9ba7fd6ba",
        "selectors": null,
        "rawMessage": true}],
    "id": 6
  }
}

When dismissing the notification, it is preferable to call the following function for improved metrics:

window.intempt_dismiss_notification(notificationId)

Adding Pods to Campaigns

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

_images/edit-labels.png