How to keep messenger launcher hidden using userflow live-chat provider

  • 12 October 2023
  • 2 replies

Hello team,

I'm creating an application that uses the integrated Intercom messenger app triggered by Userflow resource center. so, from an option in the Userflow resource center, I want to open the Intercom messenger.

This works smoothly, however, I'm implementing a custom launcher, and even following the documentation's recommendations and keeping the attribute hide_default_launcher: true, every time Userflow opens the Intercom messenger, it automatically shows the launcher, as if Userflow overwrites this property, even adding an Intercom('onShow') event and forcing the update of the hide_default_launcher attribute to true, the launcher continues to be displayed.

Where could the error be? Is this really possible ? 


Best answer by Ivo Junior 13 October 2023, 22:55

View original

2 replies

Just in case it might be helpful to someone...

In my case, I'm using NextJS 13, which means I'm working with React.

After few hours of investigation, I realized that there's an issue with the vanilla JavaScript example script from Intercom's documentation. Sometimes the events are not even triggered correctly, so merely copying and pasting wasn't enough, specially if you are working with typescript.

Additionally, I eventually decided not to use a custom launcher to handle both Userflow and Intercom simultaneously. Instead, my workaround was:

  • Use a fully customized launcher for Userflow. However, when Userflow triggs the Intercom messenger, the Intercom launcher essentially overwrites and occupies the exact same position as Userflow's launcher. This led to a conflict when trying to use both simultaneously, which I couldn't resolve.

I also want to share how useful the react-use-intercom library is. Here's a brief, literal example of its usage:


import { useClerk } from '@clerk/nextjs'
import { useEffect } from 'react'
import { IntercomProvider, useIntercom } from 'react-use-intercom'
import { useSidebarWidth } from './sidebar'


export const IntercomMessengerProvider = ({
}: {
children: React.ReactNode
}) => {
const { width: sidebarWidth } = useSidebarWidth()

const onHide = () => {}

const onShow = () => {}

const onUnreadCountChange = () => {}

return (
appId={process.env.NEXT_PUBLIC_ITERCOM_APP_ID ?? ''}
alignment: 'left',
backgroundColor: '#5b4eec',
actionColor: '#5b4eec',
horizontalPadding: sidebarWidth + EXTRA_SPACING,
verticalPadding: 16,
<Config />

const Config = () => {
const { user } = useClerk()
const { width: sidebarWidth } = useSidebarWidth()
const { update } = useIntercom()

useEffect(() => {
if (!user) return

email: user.emailAddresses[0]?.emailAddress,
name: user.fullName ?? '',
}, [user, update])

useEffect(() => {
horizontalPadding: sidebarWidth + EXTRA_SPACING,
}, [sidebarWidth, update])

return <></>


Userlevel 4

Hey @Ivo Junior Racheal from the support engineer team here👋 


Thanks for providing such a detailed breakdown here! Can you provide some more context on what the error is in our example JavaScript? I’d love to get eyes on that!