Build Chrome RingCentral widgets extension for CRM

This tutorial will show you how to build Chrome RingCentral widgets extension for CRM with ringcentral-embeddable-extension-factory

Table of Contents

• What does Chrome RingCentral widgets extension for CRM do?
• Demo video(Insightly)
• Screenshots(Insightly and Hubspot)
• Realworld code examples
• Create project with ringcentral-embeddable-extension-factory
• Build and Use
• Make the features works
• Build with custom RingCentral clientID/appServer
• Credits
• License

What does Chrome RingCentral widgets extension for CRM do?

In general, All the third party features of our ringcentral-embeddable supported and some content insert:

• For CRM contact phone number text, we make it click-to-call link.

• For CRM contact info page, we will add a click-to-call button in proper position.

• For CRM contact list, we will add a hover-to-show tooltip to show click-to-call button.

• Sync CRM contacts to our widgets after user authorize.

• Sync call log to CRM automatically or manually.

• Check CRM contact activities from our widgets.

• Show CRM contact info panel when inbound/outbound call with CRM contact.

Demo video(Insightly)

https://youtu.be/Qfje5d5OdK0

Screenshots(Insightly and Hubspot)

screenshots	screenshots

Realworld code examples

• insightly-embeddable-ringcentral-phone
• hubspot-embeddable-ringcentral-phone

Create project with ringcentral-embeddable-extension-factory

Need nodejs 8.10+/npm, recommend using nvm to install nodejs/npm.

Then let's create an extension project with ringcentral-embeddable-extension-factory:

npx ringcentral-embeddable-extension-factory my-app

Looks like this:

Build and Use

1. build content.js

# install dependencies, requires nodejs8.10+
npm i

# create config file, and set proper thirdPartyConfigs.serviceName
cp config.sample.js config.js

# then run it
npm start

# edit src/*.js, webpack will auto-rebuild,
# after rebuild, do not forget to refresh in extension page

1. Go to Chrome extensions page.
2. Open developer mode
3. Load dist as unpacked package.
4. Go to the CRM site to check

Make the features works

For now it is just a widget, you can call with it, to make all the features work, still need more developer work.

To make it easier, we already set common modules to reduce developer efforts, you could set proper selectors, methods to make all features to work:

• Edit src/chrome-extension/config.js to make click-to-call related features to work
• Follow the guide in src/chrome-extension/features/third-party-api.js to make all third party features to work.
• Further more you can edit dist/manifest.json and dist/background.js to do more customization work.
• And you can always read Realworld code examples to get some hint about how to do it.

Build with custom RingCentral clientID/appServer

• Create an app from https://developer.ringcentral.com/, make sure you choose a browser based app, and set all permissions, and add https://ringcentral.github.io/ringcentral-embeddable/redirect.html to your redirect URI list, Edit config.js.

• Fill your RingCentral app's clientID and appServer in config.js.

  ringCentralConfigs: {
    // your ringCentral app's Client ID
    clientID: 'your-clientID',

    // your ringCentral app's Auth Server URL
    appServer: 'your ringCentral app Auth Server URL'
  },

Credits

Created with Embbnux Ji's tuturial: Building Chrome Extension Integrations with RingCentral Embeddable

License

MIT