How to setup 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 belongs.

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., ID, Name, Email.

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>
<script
  defer
  async
  src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/signin/tag.js"
></script>

Experience List

Sign In Buttons

Setup 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 and javascript tag for the buttons:

<div data-exp="unisignin-button"></div>
<script
  defer
  async
  src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/signin/tag.js"
></script>

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.

Setup 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 and manually load the tag:

<div data-exp="unis-email-subscription" data-exp-id="xxxxxxxxx"></div>
<script
  defer
  async
  src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/email-subscription/tag.js"
></script>

Comments

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

1. Load static experience by assigning an Experience ID and manually load the tag:

Setup placeholder DIV for the Comment experience and add the configuration data for the experience.

<div data-exp="unis-comment" data-element-id="unique ID of the article"></div>
<script
  defer
  async
  src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/comment/tag.js"
></script>

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 and manually load the tag:

Setup 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>
<script
  defer
  async
  src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/confirm/tag.js"
></script>

3. Load static experience by passing data attributes and manually load the tag:

<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>
<script defer async src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/confirm/tag.js">
</script>

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-element-id="xxxxxxxxx">
</div>

or

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

2. Load static experience by assigning an experience ID and manually load the tag:

Setup placeholder DIV for the Feedback widget and add the configuration data for the experience.

<div
  data-exp="unis-feedback"
  data-exp-id="xxxxxxxxx"
  data-element-id="xxxxxxxxx" // it will be the pathname of current URL if you do not set it.
>
</div>
<script defer async src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/feedback/tag.js"></script>

or

<div
  data-exp="unis-feedback2"
  data-exp-id="xxxxxxxxx"
  data-element-id="xxxxxxxxx" // it will be the pathname of current URL if you do not set it.
>
</div>
<script defer async src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/feedback2/tag.js"></script>

3. Load static experience by passing data attributes and manually load the tag:

<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-element-id="xxxxxxxxx" // it will be the pathname of current URL if you do not set it.
>
</div>
<script defer async src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/feedback/tag.js">
</script>

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-element-id="xxxxxxxxx" // it will be the pathname of current URL if you do not set it.
>
</div>
<script defer async src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/feedback2/tag.js">
</script>

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 and manually load the tag:

<div data-exp="unis-exp-form" data-exp-id="xxxxxxxxx"></div>
<script
  defer
  async
  src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/form/tag.js"
></script>

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 and manually load the tag:

<div
  data-exp="unis-vote"
  data-exp-id="xxxxxxxxx"
></div>
<script defer async src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/vote/tag.js">

Topic Keyword

You can only set up topic keyword experience element statically:

Load static experience by assigning an Experience ID and manually load the tag:

<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>
<script defer async src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/topic/tag.js">
</script>

Notification

You can only set up Notification experience element statically:

Load static experience by assigning an Experience ID and manually load the tag:

<div data-exp="unis-notification"></div>
<script
  defer
  async
  src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/notification/tag.js"
></script>

Follow Button

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

Setup 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 and manually load the tag:

<div data-exp="unis-email-follow-button" data-exp-id="xxxxxxxxx"></div>
<script
  defer
  async
  src="https://SUBDOMAIN.WEBSITE_DOMAIN/tag/exp/follow/tag.js"
></script>

Account Center

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