Rep JavaScript API – Rep - Help

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('load', callback)

Call this method to run code after Rep widget has loaded. It's advisable that you wrap all of your Rep JS API calls with this method, as in this example:

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