GithubHelp home page GithubHelp logo

react-intercom's Introduction

This package is no longer maintained

This is an unofficial package, is not maintined by Intercom, and now should now be considered deprecated. I can not recommend using external dependencies to manage adding simple scripts to your page. Please refer to official Intercom documentation for installation instructions.

Installing Intercom (and other similar third party scripts) is trivial without using a package like react-intercom. Using an unofficial dependency to do so may be convenient, but ultimately is not something I recommend. Unnecessary third party dependencies introduce unnecessary security risks and compatibility risk. If you'd like to maintain an internal version of this package, please fork this repo or use this package as a guide on how that can be done. Its easy!

react-intercom

A component to configure and enable Intercom in your react application. react-intercom is meant to support both the legacy and current versions of intercom messenger. If you run into issues, please submit an issue. Pull requests are also welcome!

Installation

npm i react-intercom --save

Usage

Inside of your application where you would be running Intercom, insert Intercom:

import React from 'react';
import Intercom from 'react-intercom';

export class App extends React.Component {

  render () {
    const { appUser } = this.props;
    
    const user = {
      user_id: appUser.id,
      email: appUser.email,
      name: appUser.name
    };

    return (
      <div className="app">
        <Intercom appID="az33rewf" { ...user } />
      </div>
    );
  }
}

This loads the javascript required to boot Intercom, and will update the settings when the props change. For example, when the active user changes in the application, new props should be passed to reflect that, and Intercom will be registering the new user. react-intercom also exports the singleton window.Intercom if you'd rather interact with a module than window. For example, where you'd like to log an event in your application:

import { IntercomAPI } from 'react-intercom';
IntercomAPI('trackEvent', 'invited-friend');

This is, of course, equivalent to just calling window.Intercom('trackEvent', 'invited-friend'); or even Intercom('trackEvent', 'invited-friend');.

react-intercom's People

Contributors

alphashuro avatar amilajack avatar daniel-cottone avatar ffxsam avatar frostney avatar jakemmarsh avatar joewang704 avatar liamhubers avatar mberkom-orange avatar nhagen avatar telnicky avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

react-intercom's Issues

Lazy load

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.

Receiving multiple 'rate_limited_update' errors in console

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.

Screenshot 2019-07-11 at 09 17 31

Screenshot 2019-07-11 at 09 18 04

Screenshot 2019-07-11 at 09 18 27

Has anyone else experienced this? Any help would be much appreciated!

Thanks,

Jack

Intercom deleted on change to language_override

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.

Thank you

Well, sometimes its time for another type of issue.
It works like a charm thank you for your work!

Support for user_hash for Identify Verification

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.

Crash when ran headless (jest / enzyme test)

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

Not able to use IntercomAPI

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');
}

Access to `Intercom('show');` Function

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';?

Supply a prop to hide the messenger launcher

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).

No 'Access-Control-Allow-Origin' header is present on the requested resource

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.

Cannot resolve module 'prop-types' in ......./node_modules/react-intercom/lib

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');

Calls to Intercom('update') should be placed in effect not in render method

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.
image

In version 1 Intercom('update') should be called in componentDidMount().

In version 2 Intercom('update') should be called in useEffect()

Need to update Intercom integration code

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!

Fail to catch errors on unmount

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)

Beware the uppercase “D” in “appID”(it’s not “appId”)

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.

Did you also have this issue? 🤪

If so, click the thumbs up below…

Lead cannot retrieve history message

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?

IntercomSettings persist on window object after shutdown

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.

IntercomAPI not working properly

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.

vertical_padding

Do you have an example of how we set the vertical_padding with this component thanks?

How update works ?

Hi,
i fail to understand how Intercom('update') work
I don't see it fired in my network console when i call it

image

The intercom doc is not very clear... did you guys manage to update and fetch new message when ever you want ?

Thanks

Trying to setup react-intercom

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?

Acquire Issues

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?

Add SSR rendering support

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.

2.0 Refresh

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.

Callbacks for IntercomAPI?

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!

Not working on production build created with create-react-app

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?

Incorrect documentation?

<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?

window.Intercom('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:

  • I use setTimeout to tackle the latency issue(it takes time for intercom to update messages that user is supposed to receive)
  • When user clicks the button I send an event to intercom that triggers an automessage. I am trying to get an instant update or any update in the user's chat.
    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!!!

window.Intercom undefined when using next.js

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?

Custom attributes

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

Reboot Intercom on user logout

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?

unable to send user details to intercom

    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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.