Please wrap your component with `IntercomProvider`.

[hatched-esther]

I have some problems trying to get the Intercom messenger to show up. I'm trying to migrate from using the react-intercom library. I currently have a structure like this:

   <Context.Provider1>
     { condition ? (
       <IntercomProvider appId={*****} /> 
         <img src="" onClick={()=> show()} /> // this is using the useIntercom hook 
          <Components /> 
       </IntercomProvider>
      ) : (<Components/>)}
   <Context.Provider1 />

Trying to do this triggers the error: Please wrap your component with IntercomProvider. Any help with this particular case is appreciated. Also... please let me know if this is not an acceptable place to ask for help, happy to move this anywhere you deem appropriate. Thank you for your library!

[devrnt]

@hatched-esther Thanks for your issue. You can't use the useIntercom hook in the same component where you used IntercomProvider. I should note this in the docs.

It's also suggested to wrap your IntercomProvider as high in "the tree" as possible. This can be e.g. in your app.jsx. This won't have any bad effects for your performance, it just "prepares" the Intercom instance and won't be booted until you call boot or pass autoBoot to IntercomProvider.

So in your case it would be as easy as creating a new component:

const Page = () => (
  <IntercomProvider appId="*******">
    <OpenIntercomComponent />
  </IntercomProvider>
)

const OpenIntercomComponent = () => {
  const { show } = useIntercom(); 

  return (
    <img src="" onClick={()=> show()} /> // this is using the useIntercom hook 
    <Components /> 
  );
}