JS Snippets

Integrating Third Party Tools

As End-Developers, it is quite common that you need to share some data, and that data needs to be accessible by many components at different nesting levels inside your application. Also, you might need to integrate third party tools which should be enabled at application level, and not at workflow level.

These third-party tools include solutions for chat, tracking user behavior, and advanced forms among many others. This is commonly done by tools like Intercom, Pendo, and Google Analytics by using a java script snippet or tag.

For those reasons, Kleeen provides an easy way to add Custom Global Providers to your application, so you can fulfill those requirements, and more simply going to `apps/cloud/src/app/modules/custom/providers/index.ts file, there you have this custom barrel:

export const CustomProviders = \[\];

Here you can add any Custom Global Providers that you need to, for instance, you can use a High Order Component pattern to wrap the whole application with your Custom Global Provider, in this case, let’s integrate a third party tool such as Intercom, using react-use-intercom module:

  1. Add a new file called “intercom-provider.ts”, then adding the following High Order Component:
import { IntercomProvider } from 'react-use-intercom';  
import { environment } from '../../../../environments/environment';

const intercomAppId = 'your-intercom-app-id';

interface IntercomProviderProps {  
children: JSX.Element; // This represents the whole application  

// This is the way to wrap the whole application with your Custom Global Provider  
export function CustomIntercomProvider({ children }: IntercomProviderProps) {  
return <IntercomProvider appId={intercomAppId}>{children}</IntercomProvider>;  
  1. Import and add the new Custom Global Provider that we just did to the Custom Providers catalog:
import { CustomIntercomProvider } from './intercom-provider';

export const CustomProviders = \[CustomIntercomProvider\];
  1. The Order of your Global Custom Providers is important, first Providers are gonna be above in the Providers chain, so if one of your Global Custom Providers depend on others Global Custom Providers, make sure to add it after those Providers, e.g.:
import { CustomIntercomProvider } from './intercom-provider';  
import { CustomMysteriousProvider } from './mysterious-provider';

export const CustomProviders = \[  
CustomMysteriousProvider, // MysteriousProvider depends on IntercomProvider  
  1. And that’s it!

If you have any questions, please email [email protected] and we will be happy to assist you.

Did this page help you?