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] (/docs/getting-started/website-feedback-collector-widget#token-of-websiteapp-touchpoint "Create website feedback touchpoint"). 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.

Slider​

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

<div class="xpressOn" 
     data-prop-token="TOKEN"
></div>

<script async src="https://public.pressnxpress.com/XPressOn.js"></script>

Configuration for data-prop-position:​

Slide horizontal from left or right side of page. Location top, center or bottom of page.​

  • left / right
    • top
    • center
    • bottom

Slide vertical from top or bottom of page. Location left, center or right of page.​

  • top / bottom
    • left
    • center
    • right

The positions should be joined with - like: right-bottom, left-center, top-left , bottom-center

<div class="xpressOn" 
     data-prop-token="TOKEN"
     data-prop-position="bottom-center"
></div>

<script async src="https://public.pressnxpress.com/XPressOn.js"></script>

Color configuration for Slider Feedback button to match your branding:​

  • Change the text color of slider Feedback button with data-prop-sliderTitleTextColor
  • Change the background color of slider Feedback button with data-prop-sliderTitleBackgroundColor
<div class="xpressOn" 
     data-prop-token="TOKEN"
     data-prop-sliderTitleBackgroundColor="blue"
     data-prop-sliderTitleTextColor="#FFF"
     data-prop-position="right-center"
></div>

<script async src="https://public.pressnxpress.com/XPressOn.js"></script>
See [OtherCommands] (website-feedback-widget-config#other-commands) below to configure the widget.​

Slider button title:​

By default the slider button will show "Feedback" text. It is possible to use a custom title for slider button with sliderTitle

<div class="xpressOn" 
     data-prop-token="TOKEN"
     data-prop-sliderTitleBackgroundColor="blue"
     data-prop-sliderTitleTextColor="#FFF"
     data-prop-position="right-center"
     data-prop-sliderTitle="Your Feedback"
></div>

<script async src="https://public.pressnxpress.com/XPressOn.js"></script>

Embed​

If the requirement is to have a widget embedded on the page, the following configuration should be called to provide data-prop-mode.

<div class="xpressOn" 
          data-prop-token="TOKEN" 
          data-prop-mode="dom"></div>

<script async src="https://public.pressnxpress.com/XPressOn.js"></script>

In this case the widget will be inside this div with the maximum height of 350px.

See [OtherCommands] (website-feedback-widget-config#other-commands) below to configure the widget.​

The other option to configure feedback widget is to use pop up which opens a modal which shows the feedback widget. The following configuration should be used for modal.

<div class="xpressOn"
     data-prop-token="TOKEN"
     data-prop-mode="modal"
     data-prop-exitDocOpen="false"
></div>

<script async src="https://public.pressnxpress.com/XPressOn.js"></script>

Based on different configurations e.g. when a button is clicked on the page, or based on a behavior of user such as leaving the webpage (page exit-intent), or based on any another trigger that you set on the page. See [OtherCommands] (website-feedback-widget-config#other-commands) below to configure the widget.

Exit Intent​

If data-prop-exitDocOpen is true. When the user hovers out of the document, then modal will show up.

Identify Respondent​

Additional data to the smiley response can be provided for this widget to identify the feedback by customer or order by adding data-prop-data:

<div
  class="xpressOn"
  data-prop-token="TOKEN"
  data-prop-data="{ID: '43432423', firstname: 'John', lastname: 'Doe', email: 'john.doe@company.com', company: 'Acme Co.' }"
></div>

<script async src="https://public.pressnxpress.com/XPressOn.js"></script>

When data-prop-data is used, then a unique identifier ID must be provided with the response. 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 elements are optional. This data should be provided in json mode such as.

{
  ID: string,
  firstname: string,
  lastname: string,
  email: string,
  company: string
}

Additional Context​

In addition to default data-prop-data keys to identify the respondent, other elements can be passed on as part of feedback response to capture extra context related to feedback e.g. purchase amount, pageurl, product SKU, etc. These additional elements should be included as pair of key and value in the data-prop-data command.

{
  ID: string,
  firstname: string,
  lastname: string,
  email: string,
  company: string,
  url: string,
  amount: string,
  etc...
}

Other Commands​

The following commands can be used to control the widget.

Open​

XPress.open() will open XPressOn widget. If there are multiple XPressOn widgets it will open all of them.

XPress.open("") can be used to specify which widget to open by specifying id.

Close​

XPress.close() will close XPressOn widget. If there are multiple XPressOn widgets it will close all of them.

XPress.close("") can be used to specify which widget to close by specifying id.

Enforce Close on page refresh​

By default slider and modal will be opened after loaded. If data-prop-closed is set to true data-prop-closed=true it will be closed after loaded. By using XPress.open() command it can be opened at will. e.g. by pressing a button on the page.

SetData​

Using setData command XPress.setData({ID: string}) the respondent and contextual data can be set when the widget is loaded.

e.g. XPress.setData({ID: "33454", firstname: "john", })

SetTimeout​

With setTimeout and combination of open and close function, define when to close or open the widget.

e.g. setTimeout(() => {XPress.open()}, 1000)