Preview Plugin
This guide details how to integrate the Preview Plugin so that you can simulate joining audiences to preview experiences.
There is so much to take into account before products can go live. Most times you want to be sure that the experience you serve to your customers is authentic and performs on delivery as expected.
To be sure that audiences receive the right content, the preview widget is developed to give you the power to preview content behaviour based on audience traits in your development environment before it is pushed live or to production. The Preview Widget allows you to quickly view personalized content from within your web page for multiple audiences. This means you can preview personalized content for your frontend elements based on various traits before it goes live.
Add
@ninetailed/experience.js-plugin-preview as a dependency:npm
yarn
//Install via npm
npm install @ninetailed/experience.js-plugin-preview
//Install via yarn
yarn add @ninetailed/experience.js-plugin-preview
Add plugin to the
plugins prop of the NinetailedProvider:<NinetailedProvider
plugins={[
new NinetailedPreviewPlugin({
clientId: PUBLIC_NINETAILED_MANAGEMENT_CLIENT_ID ?? "",
secret: PUBLIC_NINETAILED_MANAGEMENT_SECRET ?? "",
environment: PUBLIC_NINETAILED_ENVIRONMENT ?? "main",
ui: { opener: { hide: false } },
}),
]}
clientId={PUBLIC_NINETAILED_CLIENT_ID ?? ""}
environment={PUBLIC_NINETAILED_ENVIRONMENT ?? "main"}
>
<Component {...pageProps} />
</NinetailedProvider>;
Lastly, generate the a management client UD and secret pair to supply to the
clientId and secret properties when instantiating the plugin. To do so:- Select "Settings" from the left sidebar
- From the next screen, select "API Tokens"
- In the top right, click "Generate"
- Name your API token whatever you like. Select "Read only" in the role dropdown
- Confirm creating the token. Copy down the ID and Secret immediately, as you won't be able to view them again
- Populate the plugin with your new management API token credentials
This feature is only meant for editors and as such, we only recommend using it in development or staging environments. You can use this plugin to:
- Preview your changes before publishing them
- Test if you are correctly segmented into audiences
The preview plugin contains several features
- Order View: Toggle between the visual representation or checkboxes for selecting the audience.
- Reset Button: To initialize the preview experience.
- Search Field: To quickly find audience traits or conditions if there is a long list of conditions.
- Sort: To help sort traits of the audience by the last audience and from A - Z.
- Apply Changes: This button triggers change to your app after selecting a specific audience.
- Close Button: To dismiss the window.
Tohe preview widget is shown on a closed tab on the bottom right of the viewport of your website. Click the tab to expand the preview widget.
After clicking the Preview Widget button, a sidebar window is displayed showing all of the Ninetailed Audiences within your selected CMS project/
The Preview Widget window has a reset button that initializes any personalized component to the base content. This means that the personalized variations based on UTM parameters, location, first-time visitor, referral, etc. are all initialized to their base content.
.gif?alt=media&token=6b504336-6b3d-4943-822d-2a22cd4a6bf3)
To preview content, click on the audience, and the respective variants are displayed on your web page. Content changes based on every selected audience.
An indigo-colored dot indicates an audience to which your current profile belongs.
Click an audience to simluate your profile being a part of that audience. The indigo-colored circle is active on these preview audiences.
active audience
The Preview Widget is independent from your CMSs preview feature, but can be used in conjunction with it for efficient publication workflows.