Enable demo-mode for Messenger bots | Botpress Engineering Hacks 👉 https://botpress.io

HOWTO.md

Messenger Demo Mode (Chrome)

This script removes the left panel on messenger (your other conversations).

This is useful if you want to test a messenger bot distraction-free or doing a demo of your bot.

1. Install the Injector Chrome Extension

2. Configure Injector

1. Create a new Snippet for the messenger.com domain
2. Chose Javascript as the language
3. Paste the code below and hit save

var leftPanelSel = '[role=main]';

function waitForDisplay(selector, callback) {
  if (document.querySelector(selector) === null) {
    window.requestAnimationFrame(waitForDisplay.bind(this, selector, callback));
  } else {
    callback()
  }
}

if (window.location.href.indexOf('#demo') >= 0) {
  waitForDisplay(leftPanelSel, function() {
    var element = document.querySelector(leftPanelSel).parentNode.childNodes[0];
    element.parentNode.removeChild(element)
  })
}

3. Usage

1. Go to any conversation in Messenger
2. Append #demo to the URL (e.g. https://www.messenger.com/t/boostfuel/#demo)
3. Reload the page. No more left panel 👏

🤖 Bot Maker Tips

• Use OSX's Split View feature to turn your screen into a distraction-free bot IDE

• Leverage the open-source Botpress framework and use modules instead of coding everything from scratch