@viewdo/dxp-experience-host NPM

View.DO Experience Host

This is a simple web component that handles the basics of bringing View.DO experience data along with a simple API for interacting with the Experience API.

Getting Started

To start building a new web component using Stencil, clone this repo

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Using this component

This component encapsulated all experience interactions. From retrieving by XID, funnel or you can configure it for a static story.

Put a script tag in the head of your page:

<script type='module' src='https://unpkg.com/@viewdo/dxp-experience-host@0.1.0/dist/dxp-experience-host/dxp-experience-host.esm.js'></script>

Then you can use the element anywhere in your template, JSX, html etc
```
<dxp-experience xapi-url="https://xapi.view.do/v4"></dxp-experience>
```

Attach to the 'initialized' event to get a handle on the experience data.

<script>
  const experienceTag = document.querySelector('dxp-experience');
  experienceTag.addEventListener('initialized', async event => {
    let experience = event.detail;
    await experience.setData('color', 'red');
    console.dir(experience)
  })
</script>

Properties

Property	Attribute	Description	Type	Default
`debug`	`debug`	Enable Debug mode to prevent API calls.	`boolean`	`undefined`
`display`	`display`	Display mode for this element.	`"json" \\| "message" \\| "none"`	`'none'`
`experienceData`	--	Experience data (bypasses XAPI to retrieve it)	`ExperienceInformation`	`undefined`
`loadAssets`	`load-assets`	Enable Debug mode to prevent API calls.	`boolean`	`undefined`
`namespace`	`namespace`	The platform environment target. (optional)	`"develop" \\| "local" \\| "master" \\| "other" \\| "stage"`	`'develop'`
`storyKey`	`story-key`	Story Key (optional)	`string`	`undefined`
`userKey`	`user-key`	User Key	`string`	`undefined`
`xapiUrl`	`xapi-url`	Experience API Url (optional)	`string`	`undefined`

Events

Event	Description	Type
`initialized`	When an experience is retrieved, this event fires with 'event.detail' = experience	`CustomEvent<ExperienceInformation>`

Node Modules

Run npm install @viewdo/dxp-experience-host --save
Put a script tag similar to this <script src='node_modules/@viewdo/dxp-experience-host/dist/dxp-experience-host.js'></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

Run npm install @viewdo/dxp-experience-host --save
Add an import to the npm packages import @viewdo/dxp-experience-host;
Then you can use the element anywhere in your template, JSX, html etc

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago