Skip to main content
Answered

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


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

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 <></>
}

 

View original
Did this topic help you find an answer to your question?

2 replies

  • Author
  • New Participant
  • 1 reply
  • Answer
  • October 13, 2023

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 <></>
}

 


Racheal
Intercom Team
Forum|alt.badge.img+5
  • Customer Support Engineer
  • 512 replies
  • October 17, 2023

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!


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings