The Ramble Engagement window API exposes a Javascript API to interact with your page's engagement window. The Ramble EW API allows a programmer to:

  • Update the Proactive Message
  • Show the Proactive Message container (please note: if the button is not already shown, a proactive message will not appear)
  • Show the Ramble button if your Ramble rules don't show it automatically
  • Open the Ramble engagement window

Use the following functions to either change your chat invitations and window presentation based on the visitor's interaction with the page or simply set it to run on a timer.

The following code can be included with your snippet to expose a new function that can then be used within the page:

<script type="text/javascript">
  var RAMBLE_API;
  function onRambleLoad(){
    Ramble.init({
      code: "___ADD YOUR CODE___",
      realtimeUrl: "https://realtime.ramblechat.com",
      fileStoreUrl: "https://cdn.ramblechat.com",
    }).then(function(api){
      RAMBLE_API = api;
    })
  };
  function lr(e){console.error("Unable to load ramble snippet: " + e.message); };
  var s=document.createElement("script");
  s.onerror=lr;
  s.onload=onRambleLoad;
  document.head.appendChild(s);
  s.async=true;
  s.src="https://snippet.ramblechat.com/ramble.snippet.js";
  function setProactiveMessage(){
    RAMBLE_API.showProactiveMessage("___YOUR CUSTOM DEFINED MESSAGE___");
    RAMBLE_API.changeVisibility(true, true); // first option toggles the button (true = show, false = hide), the second is the full-sized engagement window
  }
  function openEW(){
    RAMBLE_API.changeVisibility(false, true);
  }
</script> 

When the button is not visible, it will not become visible simply by setting the message (i.e. RAMBLE_API.showProactiveMessage("test msg"); ). Rather, you will need to also call RAMBLE_API.changeVisibility(true, true); to present your newly set message.

Note: Once displayed a button cannot be hidden

Also, the Engagement Window also supports the following javascript events:
  • onButtonClick(show: boolean, firstTime: boolean) - button click callback
  • onButtonDisplayed(buttonEl: HTMLElement) - button appear on the screen callback
  • onInit(params: { visitorUuid: string, connectionType: "new" | "restored", chatUuid?: string }) - Ramble init callback
  • onChatRequested(params: { visitorUuid: string; chatUuid: string }) - Visitor requested chat callback
  • onChatAnswered(params: { visitorUuid: string; chatUuid: string }) - Chat answered callback
  • onChatCompleted(params: { visitorUuid: string; chatUuid: string; type: "missed" | "answered" }) - Chat completed callback
  • onChatMessage(params: { visitorUuid: string; chatUuid: string }) - New message arrived callback