XPressOn

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 the position you select, which by default is right-bottom of the screen.
 

<div class="xpressOn" 
     data-prop-token="TOKEN"
     data-prop-position="right-bottom">
     data-prop-sliderTitleBackgroundColor="white">
     data-prop-sliderTitleColor="#000">
</div>

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

You can choose between these options for data-prop-position:

• left / right
  • top
  • center
  • bottom
• top / bottom
  • left
  • center
  • right

You have to join them with - like: right-bottom, left-center, top-left

 

Embed

If the requirement is to have a widget embedded on the page, the following code 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.

 

Modal

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

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

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

 

Click To Open Modal

Identify Response

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: '[email protected]', company: 'Acme Co.' }"
></div>

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

 

If 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
}

 

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.

 

SetData

XPress.setData({ID: string}) can be used to set data after the widget is loaded.

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

onFinished

XPress.onFinished(fun, id) can be used to listen on dom with id if it's Finished if id is not provided function will be used for every xpressOn on screen

 e.g. XPress.onFinished(() => alert("Hey"))
 

Render

XPress.render() can be used to re render widget that is not rendered yet. for example dynamic xpressOn Widget

 e.g. XPress.render()
 

 

Enforce Close on page refresh

data-prop-closed=true
by default slider and modal will be opened after loaded.
If data-prop-closed is set to 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.