Skip to main content
Answered

Messenger Button Does Not Appear (Using React/NextJS)

  • 12 December 2022
  • 4 replies
  • 1164 views

Trying to get started with the messenger but unable to get it to appear. Like the title says, using React and Next.

What I have so far in my app:

  • Intercom is loaded (`window.Intercom` is defined)
  • "boot" and "update" are getting called in the correct spots with the (presumably) correct payloads
  • I'm getting successful responses back from `https://widget.intercom.io/widget/APP_ID`as well as `https://api-iam.intercom.io/messenger/web/ping`/li>
  • In the DOM, there is a hidden iframe element with id `intercom-frame` and a div with id `intercom-lightweight-app`. The div only contains a style element, there is no content

Curious what could prevent the messenger button from appearing when everything I mentioned above appears to be working correctly

Best answer by Teodor Radu

Hi, having the same problem with this.

I can confirm everything is integrated properly. However, calling `window.Intercom(‘show’)` in the console actually opens the intercom panel, but displays the message “Couldn’t load app, please try again”. The bottom right pill with the message icon that doesn’t show.

Currently I have to create my own pill and workaround by calling window.Intercom(‘show’) from a react component.

This is for NextJS 14 with App Router.

Please help, I want to subscribe after the free trial, but not if the thing doesn’t work!

 

Thanks,

Teodor

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

4 replies

Racheal
Intercom Team
Forum|alt.badge.img+5
  • Customer Support Engineer
  • 512 replies
  • December 15, 2022

Hey @jackson c​ Racheal from the support engineer team here👋 

 

There is a lot of possibilities here so your best option would be to write into support so we can take a better look! Just some general things you can check:

 

  1. View your Messenger settings. Are you showing the Messenger to the right people? Make sure of this under Messenger > Control your inbound conversation volume. Settings here will determine who can view the Messenger and contact you.
  2. Check your identity verification settings under Settings > Security. If you enforce identity verification but want to have the Messenger visible to Visitors and Leads the Messenger will not load and you will receive a 403 error in the browser console. This is configured separately for web, iOS, and Android.
  3. Check if you are on a trusted domain under Messenger > Keep your Messenger Secure. If the domain is incorrectly added or not listed the Messenger will not load and you'll receive a 403 error.
  4. Are you using a public suffix domain?
  5. Are you using an ad-blocker or using private mode? This may block JavaScript tracking functionality, such as the Messenger. Linked is how to resolve this.

 

If you are still experiencing an error, could you send us a link to the page where the Messenger has been installed (or a screenshot of your installation code if it's behind a login)?


Any update on this?

I’m going in circles trying to find a solution to this.

 


  • New Participant
  • 2 replies
  • Answer
  • November 9, 2024

Hi, having the same problem with this.

I can confirm everything is integrated properly. However, calling `window.Intercom(‘show’)` in the console actually opens the intercom panel, but displays the message “Couldn’t load app, please try again”. The bottom right pill with the message icon that doesn’t show.

Currently I have to create my own pill and workaround by calling window.Intercom(‘show’) from a react component.

This is for NextJS 14 with App Router.

Please help, I want to subscribe after the free trial, but not if the thing doesn’t work!

 

Thanks,

Teodor


  • New Participant
  • 2 replies
  • November 9, 2024

It does seem that free trials aren’t automatic when you sign up first. So if trying this without a subscription, one needs to create a developer app https://app.intercom.com/a/apps/YOUR_APP_ID/developer-hub


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