Start a conversation

Create an iFrame to include on your webpage

This document describes how you can create an integration that allows you to include the download button of a Wallet pass on your own webpage.

Using this integration, Passcreator takes care of all the details like rendering the correct version of the button for various operating systems. You can also specify pages on which the script may be included to make sure that it's not copied by someone else and rendered on pages where you don't want it to be on.

Create an iFrame integration

To create a new integration, log in to your Passcreator account and click on "Integrations --> Integrations" in the menu on the left and then click on "New Integration" (or use this link https://app.passcreator.com/en/integration/new).

Specify a name for this integration and select "iFrame to include pass download button" as type. You'll also need to select the template whose passes you want to render download buttons for.

frame-ancestors aka. what pages may use this script

The last option you have is optional but we highly recommend to use it. It allows you to specify a list of domains that may include the script for this integration. Otherwhise it would be possible for anyone to copy the script form your website's source code and include it on their page.

Specify one domain per line. The example in the screenshot makes sure that the download button is only shown if the script is included on www.passcreator.com or passcreator.com.

Any other page will be prevented from displaying. We're using Content Security Policy headers alongside some other checks to make sure this works which prevents it in almost all cases.

For details about frame-ancestors, check out this page. Don't worry about the browser compatibility for IE - we have fallback mechanisms in place for that.

Valid examples for domains are the following:

  • https://*.example.com - allows the script to be included on all subdomains of example.com
  • www.example.com - allows integration of the script on www.example.com (not https://example.com)
  • example.com - allows integration of the script on example.com (not www.example.com)

Here's a valid example that allows integration of the script on example.com and www.example.com

Using the script on your page

If you save the Integration the list of integrations will be shown where you'll also see your new integration. Click on "Show description" of your integration to see the script that needs to be included on your page.

There are two parameters in that script that need to be changed:

  • passId - this is the unique identifier of the pass you want to render a download button for. If you don't have it, you can either download a list of all your passes from the detail view of your template or use our API.
  • language - by specifying the language you can control in what language the download button will be shown. Currently supported values are en and de.

What can I use this for?

Obviously to render download buttons to Wallet passes on your own website. For example if you have an online shop and create passes in Passcreator using the API you can include the download button to the pass directly on the confirmation page of your checkout process without having to redirect your user to another page. The content that gets rendered also doesn't include any brand-specific styling which gives you full control over the look and feel of your page.

Choose files or drag and drop files
Was this article helpful?
Yes
No

Comments