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

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.

This feature only works with the experience orchestration engine.

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.

This feature only works with the experience orchestration engine.

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>
  1. 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>
This feature works with the experience engine and experience orchestration engine.

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>
This feature can only be set up statically on an article or a URL

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>
  1. 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>
  1. 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>

<MDXInfoBlock type="note">
  This feature works with the experience engine and experience orchestration engine.
</MDXInfoBlock>

## Feedback

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

1. Use the orchestration engine to load the experience:

```html
<div 
  data-exp="unis-feedback" 
  data-element-id="xxxxxxxxx">
</div>

or

<div
  data-exp="unis-feedback2" 
  data-element-id="xxxxxxxxx"
></div>
  1. 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>
  1. 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>
This feature can only be set up statically on an article or a URL

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>
  1. 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>
This feature works with Experience engine and experience orchestration engine.

Vote

  1. Use the orchestration engine to load the experience:
<div data-exp="unis-vote"></div>
  1. 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">
This feature works with the experience engine and experience orchestration engine.

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>
This feature can only be set up statically on an article or a URL. You must pass the value of data-tag, data-tag_slug into the div.

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>
This feature can only be set up statically on your website.

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>
  1. 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>
This feature works with the experience engine and experience orchestration engine.