Developer GuidesClipReply's Widget JavaScript API

Load the widget JavaScript file.

Make sure to embed the widget js file. Place this script before the closeing body and before you call the function to create an widget.

index.html

<script src="https://clipreply.com/widget/index.js"></script>

The Widget Config Object

When we create a widget, and if you want to interact with it trough JavaScript we must save it to a variable to capture the frameId property. Being you can have multipe widgets loaded at one time, you must specify the frame id of the widget that you wish to modify the state.

index.js


var myWidget = window.clipReplyWidgetCreateInstance({
  id: "auWdhzICBmFgfO0Nq6Qh", // REPLACE WITH YOUR ID OF YOUR FLOW
  text: "I'm a widget",
  color: "#335eea",
  triggerStyle: "slim",
  position: "bottom-right",
  disabled: false,
  open: false,
  debug: false,
  loader: true,
  dismissable: true,
  demolishOnDismiss: true,
  target: "body"
});

Changeing the widget's state

Now you can modify the widgets state.

edit flow > share > widget embeed

index.js

window.clipReplyWidgetModifyInstance(myWidget.frameId, {open: false})

index.js

window.clipReplyWidgetModifyInstance("undefined", {text: "Click Me"})

index.js

window.clipReplyWidgetModifyInstance("undefined", {open: true})

Listening to state chenages

index.js


let initWidget = window.clipReplyWidgetCreateInstance({
  id: "auWdhzICBmFgfO0Nq6Qh",
  text: "I'm a widget",
  color: "#335eea",
  triggerStyle: "slim",
  position: "bottom-right",
  disabled: false,
  open: false,
  debug: false,
  loader: true,
  dismissable: true,
  demolishOnDismiss: true,
  target: "body"
});
window.addEventListener("clipreply_widget.updated", (e) => {
  if (e.detail.state.frameId == initWidget.frameId) {
    initWidget = e.detail.state
  }
});

Interact with the widget and see the state update in realtime.

index.js

{}