1. Home
  2. Live Chat
  3. Implementation Guide
  4. Hamburger Menu on Chat
  1. Home
  2. Live Chat
  3. Hamburger Menu on Chat
  • User Guide
  • Developer Docs
Frequently visited sections What is verloop?, FAQ Overview?

Hamburger Menu on Chat

The hamburger menu at the start of the conversation in the chat widget, allows you to have quick options for navigation for the end user. You can even add them on every block level.

How to Enable Hamburger Menu

On any conversation block in the bot builder, go to general settings. The first option you will see is the Chat Quick Menu. Switch on the toggle and then click on the “+Add Quick Menu item”

Menu item pop-up will open 

  • Add the name of the menu in the “Title” placeholder.
  • Select the type of menu you want to add 
    • Button – To add multiple button items
    • Web URL – To add URL items for navigation
  • Select the block for which you want to add the hamburger menu.
  • Then add the menu icons for all the items in the “Menu icon” placeholder by either drag and drop method or selecting the images from your files. Note: The image size recommended is 64 x 64 pixels.

Note: The image size recommended is 64 x 64 pixels.

Integrate the method into live chat-v2 and web-sdk to toggle the menu’s visibility. The initial state should mirror what occurs when the user clicks the hamburger menu.  

You can employ the provided script in the console to facilitate the opening and closing of the menu within our SDK integrations.  

  • To open the menu: Execute Verloop(function(){this.openMenuWidget()}) in the console. 
  • To close the menu: Execute Verloop(function(){this.closeMenuWidget()}) in the console.
Updated on September 8, 2023

Was this article helpful?

Related Articles

Schedule a demo

Get Started with Verloop.io