How-To: Automatically Open the Terminus Chat Frame via Javascript Events

First, you will need to identify the unique embed code for your website chat.

To do this, navigate to the “Links & Website Chat” menu option in Chat Experiences, located on the left panel, and then select the Website Chat for which you’d like to add this functionality. 

Note: Most teams will only have one Website Chat listed in this section. If you have multiple Website Chats listed on this page and are not sure which one to select, we would recommend that you ask your development team to check which unique code is deployed on the page where you'd like to add the API.

Once you've selected a Website Chat, a blue “Copy Code” button will appear in the top right corner. 

If you are sharing this code with a colleague, we strongly recommend saving and sharing the code as a .txt file rather than pasting into an email body.

Once you have identified your standard code snippet, update the deployed chat code snippet on the applicable pages to include the red lines of code:

<script type="text/javascript">

function onRambleLoad() {

   Ramble.init({

       code: "UNIQUE WEBSITE CHAT CODE",

       realtimeUrl: "https://realtime.ramblechat.com",

       fileStoreUrl: "https://cdn.ramblechat.com",

       resolveUTMVariables: true,

       // other options:

       // initialName: string - use value as visitor name

       // initialEmail: string - use value as visitor email

       // page: string - use value as the page

       // customVariables: object - pass any custom variables to attach to the chat

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

       // forceGDPR: boolean - Force GDPR consent request for all locations

   }).then(function (api) {

 window.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";

</script>

If you want to leverage this feature, we recommend applying this step sitewide / wherever chat is deployed on your website. This step enables the auto-open capabilities, but you must also complete step two to actually trigger the engagement window to open. Applying this step sitewide will make it easier for your team to auto-open the chat engagement window for additional JS Events in the future. 

Step Two: Add the Terminus Chat Engagement Window API to a JS Event:

Add the following code to the respective JS event that you would like to automatically open the chat engagement window.

window.RAMBLE_API.changeVisibility(true, true);

Example for a button click event: 

onclick="window.RAMBLE_API.changeVisibility(true, true);"

When this code is added to a JS event, the chat engagement window will automatically open when the JS event is triggered.