Overview

In this guided tutorial you will learn how to create Chrome RingCentral widgets extension for CRM. The guide is broken up into three sections:

0. What does Chrome RingCentral widgets extension for CRM do?
1. Learn how to setup, configure and get ready to development.
2. Learn how to Add advanced features to the extension

When you are finished, you will be ready to create Chrome RingCentral widgets extension for CRMs.

What does Chrome RingCentral widgets extension for CRM do?

Embbnux Ji has a tuturial: Building Chrome Extension Integrations with RingCentral Embeddable, with this tutorial, you could create Chrome extension for any site with RingCentral Embeddable, not just for CRM sites.

In this tutorial, we will show you the advanced features the extension could provide for CRM sites.

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

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

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

• 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

Init extension project

You need nodejs 8.10+/npm, recommend using nvm to install nodejs/npm, and do not support Windows OS.

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

npx ringcentral-embeddable-extension-factory my-app

# make sure you set `https://*.insightly.com/*` as url, we will use insightly as target CRM site.

• CLI tool promotes questions like name, decsription, url,
• make sure you set https://*.pipedrive.com/* as url, since we will use pipedrive as target CRM site.

Looks like this:

And there is a video to show this too.

Then, after the project folder is created, install the necessary prerequisites:

cd my-app

# install dependencies
npm i

# create local config file
cp config.sample.js config.js

# edit config.js, set `thirdPartyConfigs.serviceName` to `Pipedrive`

# let's build the extension
npm start

# now dist folder is ready for use as extension source

Now let's test the extension

1. Go to Chrome extensions page.
2. Open developer mode
3. Load dist as unpacked package.
4. Go to the pipedrive.com, login and check it.

Add advanced features to extension

You can see that without any coding, currently we just add the ringcentral-embeddable Phone widgets, you call with it, but it is not interactive with CRM site yet, All those features listed in previous chapter need your coding efforts to make it 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/content.js to make all features to work
• Further more you can edit src/manifest.json and src/background.js to do more customization work.
• And you can always read Realworld code examples to get some hint about how to do it.

In the following chapters, you will learn how exactly to make it work. This tutorial will take pipedrive.com as target CRM site, they have a modern single page app site.

Before continuing, please register an free account, login and add some contacts with proper email and real contact number.

Convert phone number text to click-to-call link

It is pretty simple, let's import config from config.js. we just need to find proper css selector.

And edit src/config.js phoneNumberSelectors to be like this:

  // modify phone number text to click-to-call link
  export const phoneNumberSelectors = [
    ///* example config
    {
      urlCheck: (href) => {
        return /\/person\/\d+/.test(href)
      },
      selector: '[data-test="phone-label"]'
    }
    //*/
  ]

Then refresh extension in Chrome extension page, check in pipedrive.com's contact detail page.

Add a click-to-call button in contact info page

And edit src/config.js insertClickToCallButton to be like this:

As you can see, pipedrive contact page just have all phone numbers info in dom, so we can just extract them from dom, since the code is a bit long, please check this link to compare the code:

source code compare

Then refresh extension in Chrome extension page, check in pipedrive.com's contact detail page.

Practice: Add hover-to-show tooltip to show click-to-call button

If you get a sense of how the config works, now it is time to try it yourself.

Edit src/config.js hoverShowClickToCallButton function to make this feature work.

Think about your solution and compare with source code

Add third party features

After the warn up, now it is time to try the third party features.

Read our third party document first.

If you want to try yourself, you could do it by edit src/config.js's thirdPartyServiceConfig and initThirdParty function.

In next chapter we will talk about authorization and sync contacts to RingCentral widgets.

Add third party features: authorization and contacts

It is a common practice that getting user authorization before accessing user data.

Since CRM site are so different, there is no common practice for this.

In general, if you could access user data as logined user from browser, no special action needed.

You may need to check network requests to find out how to get contacts list:

So we can set proper method to get pipedrive's conatct list, check the source code compare to edit your code accordingly.

After finish editing, refresh extension in Chrome extension page, check in pipedrive.com's contacts page, click contacts panel of RingCentral widgets, click auth button and try to call some contacts.

Practice: The other third party features

Since contacts and authorization are done, we will leave you to finish the Syncing call log and showing contact activities features as a practice.

Practice: Additional settings

Further more you can edit src/manifest.json and src/background.js to do more customization work, such as filtered urls you do not want to show widgets etc.

That is all, thanks for reading!