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

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'

const EXTRA_SPACING = 8

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

  const onHide = () => {}

  const onShow = () => {}

  const onUnreadCountChange = () => {}

  return (
    <IntercomProvider
      appId={process.env.NEXT_PUBLIC_ITERCOM_APP_ID ?? ''}
      onHide={onHide}
      onShow={onShow}
      onUnreadCountChange={onUnreadCountChange}
      autoBoot
      autoBootProps={{
        alignment: 'left',
        backgroundColor: '#5b4eec',
        actionColor: '#5b4eec',
        horizontalPadding: sidebarWidth + EXTRA_SPACING,
        verticalPadding: 16,
      }}
    >
      <Config />
      {children}
    </IntercomProvider>
  )
}

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

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

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

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

  return <></>
}