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

Question

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 ?

Ivo Junior · Accepted Answer

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 = 8export const IntercomMessengerProvider = ({ children,}: { children: React.ReactNode}) => { const { width: sidebarWidth } = useSidebarWidth() const onHide = () => {} const onShow = () => {} const onUnreadCountChange = () => {} return ( {children} )}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 · Answer

Hey @Ivo JuniorRacheal 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!

Join the Intercom Community 🎉

Intercom Customers and Employees

Login to the community

Intercom Customers and Employees

Scanning file for viruses.

This file cannot be downloaded