Conversations SDK

<script type="text/javascript">
  function onConversationsAPIReady() {
    console.log(`HubSpot Conversations API: ${window.HubSpotConversations}`);
  }
  /*
    configure window.hsConversationsSettings if needed.
  */
  window.hsConversationsSettings = {};
  /*
   If external API methods are already available, use them.
  */
  if (window.HubSpotConversations) {
    onConversationsAPIReady();
  } else {
    /*
      Otherwise, callbacks can be added to the hsConversationsOnReady on the window object.
      These callbacks will be called once the external API has been initialized.
    */
    window.hsConversationsOnReady = [onConversationsAPIReady];
  }
</script>

window.hsConversationsSettings = {
  loadImmediately: false,
  inlineEmbedSelector: '#some-id',
  enableWidgetCookieBanner: true,
  disableAttachment: true,
};
window.hsConversationsOnReady = [
  () => {
    window.HubSpotConversations.widget.load();
  },
];

<div id="some-id">
  <div id="hubspot-conversations-inline-parent">
    <iframe id="hubspot-conversations-inline-iframe">
      <!-- rest of iframe content -->
    </iframe>
  </div>
</div>

#hubspot-conversations-inline-iframe {
  width: 300px;
  height: 500px;
  border: none;
}

window.HubSpotConversations.widget.load();

/* ... */

// Force the widget to load in an open state
window.HubSpotConversations.widget.load({ widgetOpen: true });

window.HubSpotConversations.widget.refresh();

/* ... */

// Force the widget to open to a specific chat flow
window.HubSpotConversations.widget.refresh({ openToNewThread: true });

<div class="chat-buttons">
  <button
    onclick="window.history.pushState({}, 'talk_to_sales', '?sales_chat=true'); window.HubSpotConversations.widget.refresh({openToNewThread: true});"
  >
    Talk to sales
  </button>
  <button
    onclick="window.history.pushState({}, 'talk_to_customer_support', '?cs_chat=true'); window.HubSpotConversations.widget.refresh({openToNewThread: true});"
  >
    Talk to customer support
  </button>
  <button
    onclick="window.history.pushState({}, 'talk_to_the_ceo', '?ceo_chat=true'); window.HubSpotConversations.widget.refresh({openToNewThread: true});"
  >
    Talk to the CEO
  </button>
</div>

window.HubSpotConversations.widget.open();

window.HubSpotConversations.widget.close();

window.HubSpotConversations.widget.remove();

const status = window.HubSpotConversations.widget.status();

if (status.loaded) {
  window.HubSpotConversations.widget.refresh();
} else {
  window.HubSpotConversations.widget.load();
}

window.HubSpotConversations.clear();

window.HubSpotConversations.clear({ resetWidget: true });

const handleEvent = (eventPayload) => console.log(eventPayload);

window.HubSpotConversations.on('conversationStarted', handleEvent);

/* ... */

window.HubSpotConversations.off('conversationStarted', handleEvent);

window.HubSpotConversations.on('conversationStarted', (payload) => {
  console.log(
    `Started conversation with id ${payload.conversation.conversationId}`
  );
});

window.HubSpotConversations.on('conversationClosed', (payload) => {
  console.log(
    `Conversation with id ${payload.conversation.conversationId} has been closed!`
  );
});

window.HubSpotConversations.on('userSelectedThread', (payload) => {
  console.log(
    `User selected thread with ID ${payload.conversation.conversationId}!`
  );
});

window.HubSpotConversations.on('unreadConversationCountChanged', (payload) => {
  console.log(`New unread count is ${payload.unreadCount}!`);
});

window.HubSpotConversations.on('contactAssociated', (payload) => {
  console.log(payload.message);
});

window.HubSpotConversations.on(‘userInteractedWithWidget’, payload => {
  console.log(payload.message);
});

window.HubSpotConversations.on(‘widgetLoaded’, payload => {
  console.log(payload.message);
});

window.HubSpotConversations.on('quickReplyButtonClick', (event) => {
  console.log(`The text content of the clicked button is ${payload.value[0]}`);
});

// Example event payload when a quick reply option is selected
{
  "name": "QUICK_REPLIES",
  "multiSelect": false,
  "value": ["Learn more"]
}

window.HubSpotConversations.on('widgetClosed', (event) => {
  console.log(event);
});