How to Set Up UniSignIn Experience on Your Website

Overview

UniSignIn experiences are prebuilt UX elements for your website. You can set up an experience element in three ways:

1. Create multiple dynamic experience elements with the experience engine and enable the dynamic experience elements with the Experience Orchestration Engine
2. Create an experience element with the experience engine and assign the experience Id to a DIV placeholder on your website
3. Create a static experience with only data attributes and static experience tags

How to Add Experiences

First, add the experience you want. (You can find specific settings of each experience in the next step.)

Second, load the experience.

There are two ways to load an Experience on your website. First, add by Orchestration and add by code.

Load by Orchestration

In the UniSignIn Console, first select your Organization.

In the left menu, you'll see the tab Orchestration located under the large tab Audience Operation. After entering this tab, click New Orchestration to start.

1. Basic Orchestration Settings

On the new Orchestration creation page, first, Enter a Name and select the Project you want this experience to belong to.

To enable the orchestration, ensure the Enable button turns blue, a new orchestration is enabled by default.

Then you can choose the Event of all experiences in this orchestration.

2. Targeting settings

You can specify the display conditions of the experiences.

By context, e.g., Domain, Cookie, URL.

Or by user profile, e.g., active days, categories read, subscription status, or membership of a segment. See Orchestration for all targeting options.

3. Deliver Experience

To Deliver the experiences, click the "Add" button in this section.

You can add up to 3 experiences in each orchestration. Once you finish adding, Click "Save Changes" and the experience will automatically show for the users of your website.

Load By Component Code

To add by code, you have to copy the code from the doc of the experience and place it on your page.

For Example, the code of "Sign In Buttons". Place the following code wherever you want it on your page, and the button will show in that place.

<div data-exp="unisignin-button"></div>

Note: For lazy-loaded elements, you can use the following API to trigger rendering:

window.unisignin.cmd.push(['renderexp-discover']);

Experience List

Sign In Buttons

Set up a placeholder DIV for the Login, Signup and Account buttons.

You have to create and preserve the space for multiple DIVs on your website to display the Login, Sign Up, and My Account buttons or links.

You can add a DIV placeholder for the buttons:

<div data-exp="unisignin-button"></div>

Adblocker Recovery

Firstly, you have to create an Adblocker Recovery experience in the UniSignIn experience engine.

Then use the experience orchestration engine to load the Adblocker Recovery experience element.

You don't have to add any DIV placeholder or tags on your website for this experience element.

Consent Recovery

Firstly, you have to create a Consent Recovery experience in the UniSignIn experience engine.

Then use the experience orchestration engine to load the Consent Recovery experience element.

You don't have to add any DIV placeholder or tags on your website for this experience element.

Email Subscription

Firstly, you have to create an Email Subscription experience in the UniSignIn experience engine.

Set up a placeholder DIV for the Email Subscription widget:

1. Use the orchestration engine to load the experience:

<div data-exp="unis-email-subscription"></div>

2. Load static experience by assigning an Experience ID. Copy the snippet from the experience, which fills in its ID:

<div data-exp="unis-email-subscription" data-exp-id="EXPERIENCE_ID"></div>

The experience shows a preview of the sign-up box above its settings.

Comments

Firstly, you have to create a Comment experience in the UniSignIn experience engine.

1. Load static experience by assigning an Experience ID:

Set up a placeholder DIV for the Comment experience and add the configuration data for the experience.

<div data-exp="unis-comment" data-post-id="unique ID of the article"></div>

Confirm Button

Firstly, you have to create a Confirm Button experience in the UniSignIn experience engine.

1. Use the orchestration engine to load the experience:

<div data-exp="unis-confirm-button"></div>

2. Load static experience by assigning an Experience ID:

Set up a placeholder DIV for the Confirm button and add the configuration data for the experience.

<div data-exp="unis-confirm-button" data-exp-id="xxxxxxxxx"></div>

3. Load static experience by passing data attributes:

<div
  data-exp="unis-confirm-button"
  data-content="" // the content text for the experience
  data-confirm-btn="" // the confirm button text for the experience
  data-cancel-btn="" // the cancel button text for the experience
  data-field="" // the ID of the data field that you got from UniSignIn dashboard
>
</div>

Feedback

Firstly, you have to create a Feedback experience in the UniSignIn experience engine.

1. Use the orchestration engine to load the experience:

<div
  data-exp="unis-feedback"
  data-item-id="xxxxxxxxx">
</div>

or

<div data-exp="unis-feedback2" data-item-id="xxxxxxxxx"></div>

2. Load static experience by assigning an experience ID:

Set up a placeholder DIV for the Feedback widget and add the configuration data for the experience.

<div
  data-exp="unis-feedback"
  data-exp-id="xxxxxxxxx"
  data-item-id="xxxxxxxxx" // optional: the post ID the page prints, or its canonical address, if you do not set it
>
</div>

or

<div
  data-exp="unis-feedback2"
  data-exp-id="xxxxxxxxx"
  data-item-id="xxxxxxxxx" // optional: the post ID the page prints, or its canonical address, if you do not set it
>
</div>

3. Load static experience by passing data attributes:

<div
  data-exp="unis-feedback"
  data-message="" // the content of the feedback experience
  data-field="" // the field name to store the result of the feedback experience
  data-item-id="xxxxxxxxx" // optional: the post ID the page prints, or its canonical address, if you do not set it
>
</div>

or

<div
  data-exp="unis-feedback2"
  data-message="" // the content of the feedback experience
  data-field="" // the field name to store the result of the feedback experience
  data-item-id="xxxxxxxxx" // optional: the post ID the page prints, or its canonical address, if you do not set it
>
</div>

Data Form

There are two ways to integrate the Form experience on your website.

1. Use the orchestration engine to load the experience:

<div data-exp="unis-exp-form"></div>

2. Load static experience by assigning an Experience ID:

<div data-exp="unis-exp-form" data-exp-id="xxxxxxxxx"></div>

Vote

1. Use the orchestration engine to load the experience:

<div data-exp="unis-vote"></div>

2. Load static experience by assigning an Experience ID:

<div
  data-exp="unis-vote"
  data-exp-id="xxxxxxxxx"
></div>

Topic Keyword

You can only set up topic keyword experience element statically:

Load static experience by assigning an Experience ID:

<div
  data-exp="unis-topic-keyword"
  data-tag="" // keyword of the experience
  data-url="" // url is optional
  data-tag_slug="" // the slug of the tag that you provided
  data-size="" // mini|big
>
</div>

Notification

You can only set up Notification experience element statically:

Load static experience by assigning an Experience ID:

<div data-exp="unis-notification"></div>

Follow Button

Firstly, you have to create a Follow Button experience in the UniSignIn experience engine.

Set up a placeholder DIV for the Follow Button widget:

1. Use the orchestration engine to load the experience:

<div data-exp="unis-follow-button"></div>

2. Load static experience by assigning an Experience ID:

<div data-exp="unis-follow-button" data-exp-id="xxxxxxxxx"></div>

Countdown

Show a countdown to an event, such as a launch or a live match. Signed-in visitors can click the button to ask for a reminder.

Firstly, create a Countdown experience in the UniSignIn experience engine and fill in:

• Header and Content: the text above the timer
• Button Text, Button Color and Button Text Color: the reminder button
• Event Time: when the event starts, in UTC

You can only set up the Countdown experience statically, by assigning an Experience ID:

<div data-exp="unis-countdown" data-exp-id="xxxxxxxxx"></div>

Readers who click the reminder button get an email shortly before the event starts. Edit this email as Countdown Reminder in Email Templates. Set Event Time in UTC, so the reminder goes out at the right time.

Net promoter score (NPS)

Ask visitors how likely they are to recommend you, on a scale of 1 to 10, with an optional comment. Use it to measure reader loyalty.

Firstly, create a Net promoter score (NPS) experience in the UniSignIn experience engine.

You can only set up the NPS experience statically, by assigning an Experience ID. Set the rating question and the comment question on the placeholder:

<div
  data-exp="unis-nps"
  data-exp-id="xxxxxxxxx"
  data-title="" // the rating question
  data-second-title="" // the comment question
>
</div>

Switch

Show an on/off switch that saves the visitor's choice to a profile field, for example to opt in to a newsletter.

Firstly, create a Switch experience in the UniSignIn experience engine and fill in:

• Header and Content: the text above the switch
• Button Text: the label next to the switch
• Field: the profile field that stores the visitor's choice

You can only set up the Switch experience statically:

1. Load static experience by assigning an Experience ID:

<div data-exp="unis-switch" data-exp-id="xxxxxxxxx"></div>

2. Load static experience by passing data attributes:

<div
  data-exp="unis-switch"
  data-header="" // the header text
  data-content="" // the content text
  data-button-text="" // the label next to the switch
  data-field="" // the ID of the data field that you got from UniSignIn dashboard
>
</div>

Story

Show a story-style slide player that mixes your recommended articles with your own slides. Use it to lead readers to more content.

Story needs Transfon Studio connected for the site.

Firstly, create a Story experience in the UniSignIn experience engine. Add one or more slides, each with a Link URL, an Image URL and a Title.

1. Use the orchestration engine to load the experience:

<div data-exp="unis-story"></div>

2. Load static experience by assigning an Experience ID:

<div
  data-exp="unis-story"
  data-exp-id="xxxxxxxxx"
  data-height="500" // optional, the player height in pixels on desktop
  data-theme="dark" // optional, use the dark theme
>
</div>

Web Story

Show a scrollable row of stories, like the stories on social apps. Readers click a story to play its slides one after another.

Web Story needs Transfon Studio connected for the site.

Firstly, create a Web Story experience in the UniSignIn experience engine. Add one or more stories, each with:

• Title and Image URL: the name and picture shown in the row
• one or more story items, each with:
  • Open Text and Open URL: the button on the slide and the page it opens
  • Duration: how long the slide shows, in seconds
  • Type: Video, Image or Quiz, with the Video URL, the Image URL or the Quiz Experience to show

You can only set up the Web Story experience statically, by assigning an Experience ID:

<div
  data-exp="unis-webstory"
  data-exp-id="xxxxxxxxx"
  data-theme="dark" // optional, use the dark theme
>
</div>

Mobile Smart Banner

Show a banner at the top of the page on mobile that links visitors to your app. iPhone and iPad visitors go to the Apple App Store, other visitors go to Google Play.

Firstly, create a Mobile Smart Banner experience in the UniSignIn experience engine and fill in:

• Mobile App Name and Mobile App Icon URL
• Primary Color: the color of the Open button
• Brand Name
• Score of the app: the rating shown with stars
• URL of Apple App Store and URL of Google Play
• Hide the mobile smart banner for the specified duration (hours): how long the banner stays hidden after a visitor closes it

1. Use the orchestration engine to load the experience. You don't have to add any DIV placeholder, the banner is added to the page for you.

2. Load static experience by assigning an Experience ID:

<div data-exp="unis-smartbanner" data-exp-id="xxxxxxxxx"></div>

The banner pushes your page content down so it doesn't cover it. Add data-enable-padding-top="false" to the placeholder to turn this off.

Recommendation

Show a list of recommended articles for each reader. Use it at the end of or inside your articles to keep readers on your site.

Recommendation needs Transfon Studio connected for the site.

Firstly, create a Recommendation experience in the UniSignIn experience engine and fill in:

• Title: the heading above the list
• Template Style: the layout, for example Full Column, Full Row, Full Carousel or Compact List. Compact List is a plain list with small images that takes your site's own font and colours.
• Article Count: how many articles to show
• Insertion Type and Insertion CSS Path: where Orchestration adds the list. After places it right after the element that matches the CSS path, Before right before it, and In Content inside that element, at the end.
• Enable Ad: shows ads in the list. The In Article with MPU template has an ad after every third article. The Full Column MPU template has an ad after the Initial Ad position article and one more Display Interval for Ads articles later.

The preview above the settings shows the layout, article count and ad slots as you change them.

1. Use the orchestration engine to load the experience. You don't have to add any DIV placeholder, the list is added at the Insertion CSS Path.

2. Load static experience by assigning an Experience ID. Copy the snippet from the experience, which fills in its ID:

<div data-exp="unis-recommendation" data-exp-id="EXPERIENCE_ID"></div>

The list uses the experience's settings, so changes you make in the dashboard show on every page with the snippet.

3. Load static experience by passing data attributes, to change a setting on one page or to show a list without an experience:

<div
  data-exp="unis-recommendation"
  data-variant="full-column" // the layout, for example full-column, full-row, full-carousel or compact-list
  data-count="4" // how many articles to show
  data-title="You may also like" // the heading above the list
  data-enable-ads="yes" // optional: "yes" or "no", instead of the experience's Enable Ad
  data-ad-start="2" // optional, Full Column MPU: an ad after this many articles
  data-ad-interval="6" // optional, Full Column MPU: one more ad this many articles later
>
</div>

The data- attributes win over the experience's settings, and can be added to the snippet as well.

Tag Loader

Load a third-party JavaScript tag, such as an analytics or ad tag, only for the pages and visitors you target.

Firstly, create a Tag Loader experience in the UniSignIn experience engine. Paste your tag's <script> code in Content.

Then use the experience orchestration engine to load the Tag Loader experience. See UniSignIn Tag Manager for the targeting options.

You don't have to add any DIV placeholder or tags on your website for this experience element.

Account Center

See details at "How to Set Up UniSignIn Account Center Experience on Your Website"

Live Blog

Live Blog has no experience to create. Give your editors the Editor role, see Live Blog.

Set up a placeholder DIV where the Live Blog widget should appear and load the Live Blog tag script.

Load by orchestration:

<div data-exp="unis-liveblog" data-post-id="your-article-or-post-id"></div>

With ad support:

<div data-exp="unis-liveblog" data-post-id="123" data-ad-start="3" data-ad-interval="5"></div>

Data attributes:

Attribute	Required	Description
data-exp	Yes	Must be unis-liveblog so the widget is discovered.
data-post-id	Yes	Post or article ID for this live blog. Use a unique ID per article if you have multiple live blogs.
data-variant	No	Display style: default (list) or card. Defaults to default if omitted.
data-ad-start	No	The position (number of posts) after which the first ad is inserted. For example, 3 means the first ad appears after the 3rd post.
data-ad-interval	No	The number of posts between each subsequent ad. For example, 5 means an ad appears every 5 posts after the initial ad. Needed together with data-ad-start. See Ads in Live Blog, Comments and Stories.