nhagen / react-intercom Goto Github PK
View Code? Open in Web Editor NEWA component to configure and enable Intercom in your react application
License: MIT License
A component to configure and enable Intercom in your react application
License: MIT License
I am rendering my Intercom component in entry point file where I dont have user details but once a user logs in after login screen, I can add user details. How can update the props?
Hello All,
Can I use following code to call API in my ReactJS App? I want re-render Intercom on each page.
import { IntercomAPI } from 'react-intercom';
componentWillMount(){
IntercomAPI('update');
}
@nhagen could you please take a look at the following:
I am trying to update outstanding messages for a user but the call Intercom('update');
from https://developers.intercom.com/docs/intercom-javascript does not seem to work.
Here is my code:
specialButton = () => {
let that = this;
window.Intercom('trackEvent', 'someOffer');
setTimeout(()=> {
console.log("updated1")
window.Intercom('update', {"name": "new dude"})
}, 1000)
setTimeout(()=> {
console.log("updated2")
window.Intercom('update')
}, 61000)
window.Intercom('onUnreadCountChange', function(unreadCount) {
console.log("this is the onUnreadCountChange", unreadCount)
window.Intercom('show');
});
}
do you know what could be the problem? window.Intercom('update', {"name": "new dude"})
does not seem to work as well. The name is not updated.
thank you!!!
Hi there - I'm working on an app where I'd like to hide the messenger launcher on mobile views, so that we can manage screen real estate a little more carefully on small devices. I'm not sure there's a way to do this with this package in its current state.
I'd love to be able to provide a prop to this component that hides the messenger launcher (per these docs).
When ReactIntercom
props changes, Intercom('update')
method gets called with new values.
In ReactIntercom
v1 update method is called in componentWillReceiveProps
lifecycle method.
https://github.com/nhagen/react-intercom/blob/master/src/index.js#L59
In ReactIntercom
v2 update method is called directly in render.
https://github.com/nhagen/react-intercom/blob/2.0/src/react-intercom.ts#L69
Side effects in React should be called after component is rendered. Otherwise render performance is affected.
Based on my profiling calling an update takes tens of miliseconds.
In version 1 Intercom('update')
should be called in componentDidMount()
.
In version 2 Intercom('update')
should be called in useEffect()
Getting this error on page load. Full text:
Failed to load https://nexus-websocket-b.intercom.io/client-test: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:3000' is therefore not allowed access.
The response had HTTP status code 503.
Thoughts? Looks like the test page may no longer be valid - try loading https://nexus-websocket-b.intercom.io/client-test yourself.
After attempting to use this component, I noticed that there was some strange behaviour happening in my Intercom dashboard. Without going too deep into the details, I noticed that even after Intercom is shut down, the IntercomSettings property on the window object remains there.
In your code, within the componentWillUnmount lifecycle hook you delete the window.Intercom property after running window.Intercom('shutdown'), but you never delete the window.IntercomSettings.
Hi,
I'm running this on a sample app using React's create-react-app. It works when I do npm start
and try to view the app on my localhost. But it doesn't work once I create a production build using npm run build
. I get this error when I run the production build using pushstate-server build
:
TypeError: null is not an object (evaluating 'document.body.appendChild')
.
Any suggestions?
It seems Intercom is deleted on change to language_override. I can't figure out why, but when I do the change, the chat button disappears.
It seems the change triggers an unmount, which deletes window.intercom and window.intercomSettings.
Do you have an example of how we set the vertical_padding with this component thanks?
See https://fb.me/react-async-component-lifecycle-hooks and https://reactjs.org/blog/2019/08/08/react-v16.9.0.html for details. At minimum, this needs the prefix UNSAFE_
adding to these calls.
Can not find how to add custom attributes to the intercom settings via props is that possible or not. In intercom documentation it is just a field but in double quotes. Tried with passing in a prop named: custom_attributes, customAttributes, and within the user props as well
This happens sometimes when I go back on my application history and then when the component which contains Intercom is updated.
the problem I'm running into when using intercom directly is that I keep getting the error that window.Intercom is not a function because I am async loading the SDK when the main component mounts. Thus its not available in other components at the time of their lifecycle event(component did mount).
From here:
For single paged apps or pages where the URL changes without a full page reload, the Intercom Messenger does not automatically send URL changes to Intercom to match messages based on URLs. You will need to call Intercom("update") in order to initiate a "ping" every time a URL changes.
Hey I just do like what you say on the readme. But it doesn't work
const user = {
email: this.props.email,
name: this.props.fullName,
company: 'aaaa',
};
return (
<div className="app">
<div>
<Intercom appID="xxxxxx" {...user} />
......
i still see that the "company" attribute in the user's profile page is Unknown
thanks!
<Intercom appID="az33rewf" userID={ user.id } otherUserProp={ user.otherUserProp } />
should be
<Intercom appID="az33rewf" settings={{ user_id: user.id, email: user.email, name: user.name }} />
Well, at least according to that line:
window.intercomSettings = { ...props.settings, app_id: appID };
Right?
Is it possible to lazy-load the intercom script & init event? Loading the script in the head tag has a massive impact on the page load speed and time to interactive.
Leads are visitors who have interacted with Intercom, like said something in intercom
But my leads cannot access the channel they created before.
Is it because this package does not handle cookies to retrieve it?
Hi there, cool lib! Would love to use it but we render our app on the server and get this error upon trying to start the app
ReferenceError: window is not defined
at Object.<anonymous> (/web/node_modules/react-intercom/lib/index.js:24:41)
I imagine simply adding some simple protection would be fine.
I've forgotten what we decided
I just tried a new install, and while Intercom's JS loaded, some Intercom styling seemed to be failing to load; additionally, while Intercom's web interface was recognizing logged in users, the quick start guide wasn't recognizing pings from the interface. I had to uninstall this component and copy in the code from https://docs.intercom.io/install-on-your-web-product-or-site/integrating-intercom-in-a-single-page-app directly into my webpack bundle instead - once I did, Intercom worked exactly as expected. I think there are some extra setup steps (such as reattach_activator
) that Intercom recently added to their integration code that aren't included in this package.
My startup is preparing for a launch (thus our need for Intercom!), so I'm not sure I'll have time to make a PR immediately, but tracking this here in case you want to jump in!
Can i call arbitrary API endpoints from this library?
I.e. the tags endpoint.
I'm trying to assign tags to users.
It works fine 5-7 times, when props is updated. After that component does not send request to Intercom, when props is updated.
Any ideas? How to fix it?
This may or may not pertain this code base, but I'm currently using the react-intercom in my React app, However I'm seeing issues with it not recognizing its location. For instance I have set up with Intercom a Acquire message that says, if you have visited '/stories' URL pathname more then 2, send a message to this visitor. My conversations with Intercom have pointed to the non registering being because my app is a single page application. When I look at the network data in the console. I can see the Intercom 'ping' being send just once when I visit the '/stories' path, is this more a React lifecycle issue or? Any thoughts or suggestions?
Currently using react ^15.4.2.
I added import Intercom from 'react-intercom'; added nothing else as I wanted to make sure the page renders with this new addition but got the console error message:
Cannot resolve module 'prop-types' in ......./node_modules/react-intercom/lib
its referring to line 16: var _propTypes = require('prop-types');
Hello all,
We've been using react-intercom within our web app for over a year now, but since yesterday we've started receiving multiple errors in the console on every network request made. They're also causing massive performance issues. The 'rate_limited_update' red error points towards a minimised intercom script. From what I can see online, if a rate limit is exceeded, then a 429 error is given. I can see that the 'ping' network requests/responses from intercom clearly state that we're not close to exceeding our rate limit, and the response codes are all 200.
I've attached screenshots of the error in our console, and also the status code we receive, along with the rate limiting details that intercom provide within the response.
Has anyone else experienced this? Any help would be much appreciated!
Thanks,
Jack
Hi, I was wondering if there was a way of customing the styling the intercom so that we can add our company branding
NextJS project with jest / enzyme test that tests a template with react-intercom component on it gives this error:
TypeError: Cannot read property 'parentNode' of undefined
at node_modules/react-intercom/lib/index.js:73:10
Intercom has released their new messenger, is there any chance to update a repo for it? https://www.intercom.io/in-app-messaging
It doesn't appear as though this component supports user_hash
for guaranteed communication with Intercom? That is to say, the following doesn't work:
const user = { email: currentUser, user_hash: accountStore.intercomHash };
return <Intercom appID={config.intercomID} {...user} />;
This results in:
Intercom Messenger error: Missing user_hash. A valid user_hash is required to authenticate users when Identity Verification is enabled.
Due to this change...
Does this library provide access to Intercom functions that control when/how the messenger is presented? Can I simply call them using the IntercomAPI
via import { IntercomAPI } from 'react-intercom';
?
Intercom chat window occupies the whole window in a mobile web browser. I would like the resize the chat window to custom sizes. Is it possible ?
When page is loaded for the first time, intercom widget is showing on the bottom of page, but when I go to another page (SPA) Intercom widget is not showing.
I try to type this window.Intercom
on browser console, before go to another page I got this result
(){for(var t=arguments.length,n=Array(t),o=0;o<t;o++)n[o]=arguments[o];var r={boot:function(t){e.createOrUpdateUser(t)},update:function(t){e.createOrUpdateUser(t)},s
But, when I go to another page the result of window.Intercom
is undefined
can you tell me what's wrong on here?
It's not the most pressing issue, but if you leverage the git tags, you'll get a release history on the release tab (https://github.com/nhagen/react-intercom/releases). You'll need to retroactively tag each commit where you updated the package.json release version.
Thanks for the useful project!
For every react-intercom component, intercom iframe is mounted, even for the same appIDs
If Intercom isn't loaded by the time the component unmounts an uncaught error is thrown.
index.js:106 Uncaught TypeError: window.Intercom is not a function
at Intercom.componentWillUnmount (index.js:106)
at ReactCompositeComponent.js:409
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:408)
For some reason, this has stopped working for me in production.
import { IntercomAPI } from 'react-intercom';
And I'm using this to try to track events, but it doesn't work. I did some digging, and thought this was interesting:
(in Chrome console)
x = require('react-intercom').IntercomAPI
- a(){a.c(arguments)}
window.Intercom === x
- false
Yet in development (local server), x === window.Intercom
is true. Very strange. I'll have to just use window.Intercom
for the time being.
Is there any way to know if a call to the IntercomAPI (for example, IntercomAPI('update', { email: email.value })
) has succeeded or failed?
I can't find anything in the Intercom docs or here. How do people handle this?
Thanks!
Well, sometimes its time for another type of issue.
It works like a charm thank you for your work!
Hi there,
It seems that the component does not support user-logout from the system.
according to Intercom's docs in case of a user logoff intercom needs to be shutdown and booted again in order to remove previous conversations.
This is aseptically important for sites using both 'Support' & 'Acquire' since this moves intercom from 'Support' mode to 'Acquire' (the opposite is performed automatically the first time a user_id or email introduced).
Is there a plan to support this kind of behavior?
I get this error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
I import react-intercom as import { Intercom } from 'react-intercom';
.
UPDATE
It works now, but I had to set it up 'manually' first. Meaning, I had to make sure my app is connected to Intercom, then I could use react-intercom. I followed this gist and I managed to connect app with Intercom. After that react-intercom seems to be working.
But it somehow doesn't make sense that I had to do this first, right?
Hey Folks,
This package hasn't gotten a ton of attention from me lately, but a number of issues have come up that needed to be addressed. I was able to find some time today and migrated the build system to rollup, and the component itsself to a functional component using hooks.
This means there were some significant API changes, and thus a 2.0 branch/tag, and a new 2.0 alpha release on NPM.
The biggest changes are (a) that now both exports of this package are now named exports, and (b) the package is now more strict about the props that are passed in.
There are also improvements to the TS types, and probably some other things. Happy to document anything that I've forgotten to mention here. Please leave a comment or submit a PR if you find anything worth documenting.
You can read documentation on the alpha release by looking at the 2.0 branch or 2.0.0-alpha.1 release.
You can try out the latest 2.0 release by installing react-intercom@next
. This should be more or less ready to be released, but I want to get some eyes on it to confirm there aren't any issues.
Once I feel confident there won't be any issues, I'll merge this into master and push an official v2.0.0 release.
I upgraded my NextJS project to NextJS 4 & React 16 and react-intercom stopped working. Gives
TypeError: window.Intercom is not a function
on browser-side.
Any ideas?
Wouldn't this make it so once an app is launched into production, Intercom would stop functioning?
Perhaps just an issue for me… but I just wasted too much time trying to get this working… only to realize that this repo uses appID
(with a uppercase "D") instead of camelCase appId
(with a lowercase "d")
The fix:
- appId='my_app_id_here'
+ appID='my_app_id_here'
Thought I'd add an issue here incase someone else runs into the same problem.
If so, click the thumbs up below…
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.