Chat widget configuration for Mobile Apps (one-page architecture)

For those with a mobile one-page app architecture i’ve found a working solution that allows you to choose which ‘tabs’ the widget appears on.

I’m currently using Drift, but confident the principles could apply to other customer service platforms including Intercom and Tidio

  1. Grab your JS Code from here.

https://app.drift.com/settings/widget

  1. Insert into your Header of your ‘top-level’ page and add this at the bottom, below the </script> tag

<style> iframe#drift-widget.drift-widget-welcome-online { display: none !important; } </style>

  1. Install the CSS Tools Plug In
  2. In Visual Builder create an CSS Tool Element on your page.
  3. Create 2 seperate workflows.

Workflow #1

When Page is loaded only when ‘tabs’ state is not ‘value of the page(s) you’d like Chat Widget to be visible’

Add Custom Style To Head CSSTools A:

iframe#drift-widget.drift-widget-welcome-online { display: none !important;}

Workflow #2

Do every 1 second only when ‘tabs’ state is ‘value of page(s) you’d like Chat Widget to appear’

Add Custom Style To Head CSSTools A:

iframe#drift-widget.drift-widget-welcome-online { display: unset !important;}

For those with a bottom navigation bar, you can use this code for Workflow 2. This raises the position of the widget up the page, so it doesn’t cover your nav bar

iframe#drift-widget.drift-widget-welcome-online { bottom: 80px !important; display: unset !important;}

Hopefully this proves useful to someone out there!

Any feedback or suggestions are welcomed and appreciated.

Rafe

3 Likes