Skip to main content

Rep JavaScript API

Updated

The Rep JS API exposes the following methods to the global object: rep. You can use them to control your widget programmatically.

 

Before you begin

To use the JS API, please add this snippet to your <HEAD> tag:

<script type="text/javascript">
var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(n){for(var i,o=1,d=arguments.length;o<d;o++)for(var l in i=arguments[o])Object.prototype.hasOwnProperty.call(i,l)&&(n[l]=i[l]);return n}).apply(this,arguments)};!function(){var n,i,o,d;if(!(null===(n=null===window||void 0===window?void 0:window.rep)||void 0===n?void 0:n.on)){var l=__assign({},null!==(o=null===(i=null===window||void 0===window?void 0:window.rep)||void 0===i?void 0:i.events)&&void 0!==o?o:{}),r=__assign({},null!==(d=null===window||void 0===window?void 0:window.rep)&&void 0!==d?d:{});r.events=l,r.on=function(n,i){switch(n){case"load":(null==l?void 0:l[n])?Array.isArray(null==l?void 0:l[n])&&l[n].push(i):l[n]=[i]}},window.rep=r}}();
</script>

 

Methods

rep.on(event name, callBackFunction)

This function accepts the event name and a callback function to fire on a special event. Supported events:
1. load - web client loaded

2. open - web client opened

3. close - web client closed

rep.on('load', function() {
  rep.config({ mainColor: "#0000FF" });
})

rep.config()

Call this method to change the display configuration of your widget, such as colors, position and title.

This is what the syntax would need to look like:

rep.config({
  "mainColor": "rgba(5, 5, 5, 0.98)",
  "secondaryColor": "#92a0ad",
  "accentColor": "#ec0f0f",
  "displayedIconUrl": null,
  "widgetTitle": "True Bot",
  "buttonStyle": "CHAT_ICON" | "CHAT_ICON" | "CHAT_WITH_US",
  "buttonSize": "NORMAL" | "SMALL",
  "widgetPosition": {
    "p": "CUSTOM" | "TOP_LEFT" | "TOP_RIGHT" | "BOTTOM_LEFT" | "BOTTOM_RIGHT" | "TOP_CENTER" | "BOTTOM_CENTER" | "CENTER_LEFT" | "CENTER_RIGHT",
    "cp": { // enabled only when "p": "CUSTOM"
      "x": "10px",
      "y": "10px",
      "h": "RIGHT" | "LEFT",
      "v": "BOTTOM" | "TOP"
    }
  },
  "support": {
    "color": "#232424",
    "display": true
  }
});

You can call it with only some of the properties, for example when you want to move the widget so it doesn't hide an important element on your page:

rep.config({
  "widgetPosition": {
    "p": "CUSTOM",
    "cp": {
      "x": "5vh",
      "y": "5vh",
      "h": "RIGHT",
      "v": "BOTTOM"
    }
  }
});

rep.hide()

Call this method to hide the chat widget and launcher button entirely.

rep.hide()

rep.show()

Call this method to show the chat widget and launcher button after hiding it.

rep.show()

rep.open()

Call this method to open the chat window in full mode.

rep.open()

rep.close()

Call this method to close the chat window.

rep.close()

rep.setStyle({container:String})

Thjis function will apply inline style for the specific HTML element. At this moment, we support only container.

rep.setStyle({container: “display: none“})

f597a6a2-2f7e-4265-bc1b-0c97b91768a7.png

rep.reset()

Erases all messages in the chat.

rep.reset()

rep.triggerFlow( { flowType, flowKey, chatopened } )

Call this method to open the chat with a specific flow invoked. To understand what are the flowType and flowKey values, play the flow from the flow builder and once your website launches, copy the values of URL parameters "vft" and "vck" respectively.

 

Parameters:

flowType - The value of "vft"

flowkey - The value of "vck"

chatopened - [true/false] whether to open the chat in full/minimized (proactive approach) mode

rep.triggerFlow({flowType: "ENTRY_FLOW", flowKey: "doyouofferdiscounts", "chatopened":true})

 

Powered by Zendesk