Embedded Service Chat for Web Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
Embedded Service Chat for Web Developer Guide
Adjust General Parameters
Change the Embedded Chat Window Appearance and Behavior
Customize Embedded Chat
Customize the Channel Menu
Channel Menu Reordering
Embedded Service Customized Components
Code Snippet Versions
PDF

Channel Menu Reordering

Show, hide, or reorder your Channel Menu selections as customers browse your website for a more dynamic experience. Change the floating action button and channel options offered, depending on the user’s page location or how long they’re on the page.

The legacy chat product is in maintenance-only mode, and we won't continue to build new features. You can continue to use it, but we no longer recommend that you implement new chat channels. Instead, you can modernize your customer communication with Messaging for In-App and Web. Messaging offers many of the chat features that you love plus asynchronous conversations that can be picked back up at any time.

Important

A screenshot of a custom action button and a dynamic Channel Menu.

This API can reorder any channels configured in setup (EmbeddedServiceMenuItem), and hide/show items as needed based on the user’s interaction on the web page.

To create a dynamic deployment:
  1. Create a New Deployment or use an existing deployment on your Channel Menu Setup page. Decide which menu items to initially display on page load and which menu items to dynamically surface after a particular user action on your website.
  2. In Menu Setup, uncheck the Show this menu item box under Default Display for items to appear later. Write down the menu item names.
  3. At runtime, you invoke the Reordering API by calling embedded_svc.menu.reorder with a list of your menu item names. The items are listed in order on the same web page as the Channel Menu code snippet.

    embedded_svc.menu.reorder(["YourMenuItemName"]);

    If you leave a menu item’s name out of the array, the menu item will not be displayed after reordering.

    Note

  4. A menu item array example (replace with your exact menu item names):

    var newOrder = ["ServiceChat", "PriorityPhoneCall", "CallCenter"];

For example, if you decide to show only a priority-channel phone number when an expensive item is added to the shopping cart. You call embedded_svc.menu.reorder(["PriorityPhoneCall"]); inside your addToCart JavaScript logic for the item price or other criteria met. Now, adding an expensive item to the cart triggers a channel menu reorder and surface a priority channel to the end user.

Access List of Original Channel Menu Items from Setup

Once the reorder is called, the menu displays the new order from the API. If you want to return the user to all original channels defined in Channel Menu Setup, access the value: embedded_svc.menu.menuConfig.menuItems.

If you want to return the user to the channels defined in Channel Menu Setup configured for their operating system, access the value: embedded_svc.menu.menuConfig.configuredChannels.

API Considerations:
  • The API is fully client-side. No additional server calls are made.
  • The API updates a single item action button to a menu with multiple channel items configured.
  • This API does not dynamically update branding, labels, or other generic menu settings at runtime.
  • If you pass in an empty array (i.e. embedded_svc.menu.reorder([]);), this action hides the current Channel Menu. You can also call embedded_svc.menu.hideButtonAndMenu() to do the same.

If you don’t see an expected channel displayed, set `embedded_svc.menu.settings.devMode = true;’ in the code snippet. You can see the console logs which menu items are reordered or hidden. Validation errors show up even if devMode is false.

Tip