Skip to main content

Website Widget Configuration

For simple loading of feedback collector widget on the webpage, the following code should be plugged in to the website code. To use website feedback collector widget you need a token. The TOKEN will be generated per touchpoint as unique identifier. To create a touchpoint and get the token go to the admin dashboard.

The widget can be used as slider, embed in page or a modal.

Installation​

NPM
npm install xpresson
CDN
<script async src="https://unpkg.com/xpresson@latest/xpresson.umd.js"></script>

For simple loading of XPressOn on the webpage the following code should be plugged in to the website. A TOKEN will be generated per touchpoint as unique identifier of a touchpoint.

Slider​

This code adds a slider on the webpage that slides from right to left. The widget will be inside this div but will be hidden and will slide from right of the screen.

const widget = XPressOn.renderSlider({
  token: "YvGdzXv",
  position: "Right-Bottom",
});

widget.open()

Embed​

The following code will render a widget embedded on the page.

const element = document.getElementById("xpresson") // <div id="xpresson" />

XPressOn.renderEmbed({
  token: "YvGdzXv",
  element,
});

In this case the widget will be rendered inside the given element with full width and height.

If the requirement is to use a pop up the following code should be used. In this case the widget will popup in the page that will be placed.

const widget = XPressOn.renderModal({
  token: "VvDdzXv",
});

widget.open()

Identify Response​

Additional data to the in-moment response can be provided to identify the feedback by customer or order by adding data property to the input specification of any render methods:

const widget = XPressOn.renderSlider({
  token: "YvGdzXv",
  position: "Right-Bottom",
  data: {
    ID: "43432423",
    firstname: "John",
    lastname: "Doe", 
    email: "john.doe@company.com",
    company: "Acme Co." 
  }
});

widget.open()

The data property is options, if used then a unique identifier ID must be provided. This can be for example order_ID or combined identifier which can be tracked back to the feedback and a reference for follow ups with the customers. All other data properties are optional.

Interfaces​

RenderEmbedSpec​

Defined in: index.ts:21

Properties​

data?​

optional data: ContactInfoData

Defined in: index.ts:35

Additional data for in-moment responses to identify the feedback (e.g. customer or order information).

element​

element: HTMLElement

Defined in: index.ts:30

The target element in which the widget will be rendered.

token​

token: string

Defined in: index.ts:25

The token used as a unique identifier of the touchpoint. Can be obtained from the Press'nXPress dashboard under Manage > Touchpoints.

RenderModalSpec​

Defined in: index.ts:366

Properties​

data?​

optional data: ContactInfoData

Defined in: index.ts:380

Additional data for in-moment responses to identify the feedback (e.g. customer or order information).

state?​

optional state: XPressOnWidgetState

Defined in: index.ts:375

Initial state of the modal widget.

token​

token: string

Defined in: index.ts:370

The token used as a unique identifier of the touchpoint. Can be obtained from the Press'nXPress dashboard under Manage > Touchpoints.

RenderSliderSpec​

Defined in: index.ts:155

Properties​

data?​

optional data: ContactInfoData

Defined in: index.ts:194

Additional data for in-moment responses to identify the feedback (e.g. customer or order information).

position​

position: SliderPosition

Defined in: index.ts:164

Position of the slider widget over the webpage.

state?​

optional state: XPressOnWidgetState

Defined in: index.ts:189

Initial state of the slider widget.

title?​

optional title: object

Defined in: index.ts:169

Configuration of feedback button overlaying the page.

background?​

optional background: string

Background color of feedback button overlaying the page.

foreground?​

optional foreground: string

Foreground color of feedback button overlaying the page.

text?​

optional text: string

Text of feedback button overlaying the page.

token​

token: string

Defined in: index.ts:159

The token used as a unique identifier of the touchpoint. Can be obtained from the Press'nXPress dashboard under Manage > Touchpoints.

XPressOnEmbed​

Defined in: index.ts:14

Properties​

application​

application: Promise<undefined | "InMoment" | "Survey">

Defined in: index.ts:18

The kind of application takeing user feedback (e.g. in-moment or survey).

XPressOnWidget​

Defined in: internal.ts:46

Properties​

close()​

close: () => void

Defined in: internal.ts:55

To close the Press'nXPress widget.

Returns​

void

destroy()​

destroy: () => void

Defined in: internal.ts:66

To destroy the Press'nXPress widget. By calling this function the rendered widget instance will be permanently removed from the DOM.

Returns​

void

open()​

open: () => void

Defined in: internal.ts:50

To open the Press'nXPress widget.

Returns​

void

toggle()​

toggle: () => void

Defined in: internal.ts:60

To toggle state of the Press'nXPress widget.

Returns​

void

Type Aliases​

ContactInfoData​

ContactInfoData = object & Record<string, string>

Defined in: internal.ts:7

Additional data for in-moment responses to identify the feedback (e.g. customer or order information).

Type declaration​

company?​

optional company: string

Company name of the customer.

email?​

optional email: string

Email addrses of the customer.

firstname?​

optional firstname: string

Firstname of the customer.

ID​

ID: string

The unique identifier for the response.

This can be for example order ID or a combined identifier which can be tracked back to the feedback and a reference for follow ups with the customers.

lastname?​

optional lastname: string

Lastname of the customer.

XPressOnWidgetState​

XPressOnWidgetState = "Open" | "Close"

Defined in: internal.ts:39

The state of Press'nXPress widget.

Functions​

renderEmbed()​

renderEmbed(spec): XPressOnEmbed

Defined in: index.ts:66

Render a Press'nXPress widget embedded in the given element on the page.

Parameters​

spec​

RenderEmbedSpec

Returns​

XPressOnEmbed

Examples​

XPressOn.renderEmbed({
  token: "YvGdzXv",
  element: document.getElementById("")
})
XPressOn.renderEmbed({
  token: "YvGdzXv",
  element: document.getElementById("")
  data: {
    ID: user.id,
    email: user.email,
    firstname: user.firstname
  }
})

renderModal()​

renderModal(spec): Promise<XPressOnWidget>

Defined in: index.ts:409

Render a Press'nXPress modal widget on the page.

Parameters​

spec​

RenderModalSpec

Returns​

Promise<XPressOnWidget>

Examples​

XPressOn.renderModal({
  token: "YvGdzXv",
})
XPressOn.renderModal({
  token: "YvGdzXv",
  data: {
    ID: user.id,
    email: user.email,
    firstname: user.firstname
  }
})

renderSlider()​

renderSlider(spec): Promise<XPressOnWidget>

Defined in: index.ts:241

Render a Press'nXPress slider widget on the webpage.

Note About Survey Touchpoint The feedback button opens a modal and the slider effect doesn't occur.

Parameters​

spec​

RenderSliderSpec

Returns​

Promise<XPressOnWidget>

Examples​

XPressOn.renderSlider({
  token: "YvGdzXv",
  position: "Bottom-Center",
})
XPressOn.renderSlider({
  token: "YvGdzXv",
  position: "Bottom-Center",
  data: {
    ID: user.id,
    email: user.email,
    firstname: user.firstname
  }
})

API Reference

Interfaces​

RenderEmbedSpec​

Defined in: index.ts:15

Properties​

data?​

optional data: ContactInfoData

Defined in: index.ts:31

Additional data for in-moment responses to identify the feedback (e.g. customer or order information).

Default​
{}
element​

element: HTMLElement

Defined in: index.ts:24

The target element in which the widget will be rendered.

token​

token: string

Defined in: index.ts:19

The token used as a unique identifier of the touchpoint. Can be obtained from the Press'nXPress dashboard under Manage > Touchpoints.

RenderModalSpec​

Defined in: index.ts:409

Properties​

data?​

optional data: ContactInfoData

Defined in: index.ts:423

Additional data for in-moment responses to identify the feedback (e.g. customer or order information).

state?​

optional state: XPressOnWidgetState

Defined in: index.ts:418

Initial state of the modal widget.

token​

token: string

Defined in: index.ts:413

The token used as a unique identifier of the touchpoint. Can be obtained from the Press'nXPress dashboard under Manage > Touchpoints.

RenderSliderSpec​

Defined in: index.ts:193

Properties​

data?​

optional data: ContactInfoData

Defined in: index.ts:232

Additional data for in-moment responses to identify the feedback (e.g. customer or order information).

position​

position: SliderPosition

Defined in: index.ts:202

Position of the slider widget over the webpage.

state?​

optional state: XPressOnWidgetState

Defined in: index.ts:227

Initial state of the slider widget.

title?​

optional title: object

Defined in: index.ts:207

Configuration of feedback button overlaying the page.

background?​

optional background: string

Background color of feedback button overlaying the page.

foreground?​

optional foreground: string

Foreground color of feedback button overlaying the page.

text?​

optional text: string

Text of feedback button overlaying the page.

token​

token: string

Defined in: index.ts:197

The token used as a unique identifier of the touchpoint. Can be obtained from the Press'nXPress dashboard under Manage > Touchpoints.

XPressOnEmbed​

Defined in: index.ts:34

Properties​

application​

application: Promise<undefined | "InMoment" | "Survey">

Defined in: index.ts:38

The kind of application takeing user feedback (e.g. in-moment or survey).

onFinish()​

onFinish: (f) => () => void

Defined in: index.ts:47

Will be called when the feedback finished.

Parameters​
f​

() => void

Returns​

dismiss function which will unsubscribe from the listener by calling

(): void

Returns​

void

XPressOnWidget​

Defined in: internal.ts:46

Properties​

application​

application: undefined | "InMoment" | "Survey"

Defined in: internal.ts:50

The kind of application takeing user feedback (e.g. in-moment or survey).

close()​

close: () => void

Defined in: internal.ts:65

To close the Press'nXPress widget.

Returns​

void

destroy()​

destroy: () => void

Defined in: internal.ts:76

To destroy the Press'nXPress widget. By calling this function the rendered widget instance will be permanently removed from the DOM.

Returns​

void

onFinish()​

onFinish: (f) => void

Defined in: internal.ts:55

Will be called when the feedback finished.

Parameters​
f​

() => void

Returns​

void

open()​

open: () => void

Defined in: internal.ts:60

To open the Press'nXPress widget.

Returns​

void

toggle()​

toggle: () => void

Defined in: internal.ts:70

To toggle state of the Press'nXPress widget.

Returns​

void

Type Aliases​

ContactInfoData​

ContactInfoData = object

Defined in: internal.ts:7

Additional data for in-moment responses to identify the feedback (e.g. customer or order information).

Properties​

company?​

optional company: string

Defined in: internal.ts:33

Company name of the customer.

email?​

optional email: string

Defined in: internal.ts:28

Email addrses of the customer.

extra?​

optional extra: Record<string, string | null | undefined>

Defined in: internal.ts:38

Custom data.

firstname?​

optional firstname: string

Defined in: internal.ts:18

Firstname of the customer.

ID​

ID: string

Defined in: internal.ts:13

The unique identifier for the response.

This can be for example order ID or a combined identifier which can be tracked back to the feedback and a reference for follow ups with the customers.

lastname?​

optional lastname: string

Defined in: internal.ts:23

Lastname of the customer.

XPressOnWidgetState​

XPressOnWidgetState = "Open" | "Close"

Defined in: internal.ts:44

The state of Press'nXPress widget.

Functions​

renderEmbed()​

renderEmbed(spec): XPressOnEmbed

Defined in: index.ts:78

Render a Press'nXPress widget embedded in the given element on the page.

Parameters​

spec​

RenderEmbedSpec

Returns​

XPressOnEmbed

Examples​

XPressOn.renderEmbed({
  token: "YvGdzXv",
  element: document.getElementById("")
})
XPressOn.renderEmbed({
  token: "YvGdzXv",
  element: document.getElementById("")
  data: {
    ID: user.id,
    email: user.email,
    firstname: user.firstname
  }
})

renderModal()​

renderModal(spec): Promise<XPressOnWidget>

Defined in: index.ts:452

Render a Press'nXPress modal widget on the page.

Parameters​

spec​

RenderModalSpec

Returns​

Promise<XPressOnWidget>

Examples​

XPressOn.renderModal({
  token: "YvGdzXv",
})
XPressOn.renderModal({
  token: "YvGdzXv",
  data: {
    ID: user.id,
    email: user.email,
    firstname: user.firstname
  }
})

renderSlider()​

renderSlider(spec): Promise<XPressOnWidget>

Defined in: index.ts:279

Render a Press'nXPress slider widget on the webpage.

Note About Survey Touchpoint The feedback button opens a modal and the slider effect doesn't occur.

Parameters​

spec​

RenderSliderSpec

Returns​

Promise<XPressOnWidget>

Examples​

XPressOn.renderSlider({
  token: "YvGdzXv",
  position: "Bottom-Center",
})
XPressOn.renderSlider({
  token: "YvGdzXv",
  position: "Bottom-Center",
  data: {
    ID: user.id,
    email: user.email,
    firstname: user.firstname
  }
})