Inline template: firing a modal

Inline templates are relatively subtle — in most cases they don't prevent a user from accessing the content. Instead, they are used to "catch" a customer with an alluring offer. So sometimes we need an inline template (be it a ribbon or a built-in one, no matter) to open a modal on a button click.

Note that we're speaking about firing an extra offer template, not a checkout modal. The latter can be opened easily.

DemoTo return from the demo page, please use the browser Back button. We were trying to make the demo as close to real life as possible, and did not provide any link to go back intentionally.

How-to

Setting up a template

There are 2 ways to set up an inline template: on your end or in Composer.

Once your container for an inline template is ready, just put it where you want your users to see the template.

Firing a modal

Basically, you need 2 things: (1) to assign a custom (or external) event to a CTA in your template and (2) to show a modal when you catch the event on your end (it will happen as soon as a user clicks this CTA).

To add a custom event, you want to add a special attribute with an event name of your choice to the CTA button code in your inline template. Let's say we want our button to read "See offers" and our event to be called "see-offers-button". Then our code will look like this:

<button external-event="see-offers-button">See offers</button>

Now you need to listen to this event, waiting for a user to click this See offers button. Here is a code sample for catching the event:

tp.push(['addHandler', 'checkoutCustomEvent', event => {
  switch(event.eventName) {
    case 'see-offers-button':
    // USER CLICKED THE BUTTON, DO ANYTHING HERE
    break;
  }
}]);

After that, you need to process this click, provide some code to show a modal. You can add this to your JavaScript file:

tp.push(['addHandler', 'checkoutCustomEvent', event => {
  switch(event.eventName) {
    case 'see-offers-button':
    tp.push(['init', () => {
      tp.offer.show({
        displayMode: 'modal',
          offerId: 'OFO123456',
          templateId: 'OTO123456',
          templateVariantId: 'OT3456789',
          showCloseButton: true
      });
    }]);
    break;
  }
}]);

The last 2 lines are optional: you need them to provide a variant ID and to tell the modal whether it should be dismissible or not.

That's it. Now when a user clicks a CTA button on an inline template, they will get the modal immediately.

Specifying the template size

Piano's inline templates simply take 100% of the parent container width. By parent container we mean the <div> you specify on your end for the Piano template to show up. Regarding its height, the browser counts it automatically according to the template content. So nothing needs to be defined. Instead, just let the Piano template be parsed freely — things like setting up a fixed height would prevent it from displaying correctly.