Piano Experiences and The Piano Card
Pugpig allows you to include standard web based Piano Experiences. These are standard experiences in Piano (NOT mobile experiences used by the Piano native SDKs)
You can include Piano Experiences in two places:
- on your timelines targeting elements created by the Piano Card
- in your articles targeting elements provided by you inline in the articleSet Up
Initial Set Up
In order for this to work, we first need to initialise the Piano scripts in the app. Once enabled, all experiences will run on both the timelines and the articles pages. The support team will ask you for:
- your Piano Application ID
- if we are targeting production or sandbox (as th Piano Base URL varies)
- if you wish to target expereinces in article
You can see the settings in Pugpig Express under Pugpig Bolt Settings:

Accidentally running experiences
Once this is enabled, be aware that all your experiences that broadly target any page/URL could start running in the app. We set the zone=app variable so you can use this to target experiences meant only for the web site or the app
Creating Piano Cards
Piano Cards are included in a timeline just like any other card. The primary purpose is to provide a HTML element that can be targeting as the selector in your experience.
There is just one field in the Piano card: Template ID
In this example, this would translate into the HTML, and your Piano Experience should target app-home-experience
:
<div class="pp-widget-piano"><div id="app-home-experience"></div></div>

How Many Cards?
We only recommend at most one card per timeline. Note that depending on the time to get a response from Piano's servers the Piano card may take a second or two to appear, the result of which could be your content shifting.
Examples of Piano cards
Below are examples of the same Piano card displaying different images, links, and buttons depending on your auth state.
Signed in with active auth
Not signed in with active auth
Targeting Piano experiences
The Piano Card sends the following information:
- User info with a login call
-
Content tracking
- Timeline ID
- Article Title, Contributor, Taxonomy tags and Published date
- Zone - Set as “app”
Setting up experiences in Piano
Please see Piano's own documentation on how to set up a user experience.