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.

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:

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.
In Menu Setup, uncheck the Show this menu item box under Default Display for items to appear later. Write down the menu item names.
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
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

Embedded Service for Web Developer Guide

Channel Menu Reordering