Gupshup Integrations Components

Web components built using stencilJS, which can be integrated to any of the front-end frameworks.

Intallation

Need to run following commands in terminal for installing package

    yarn add gupshup-integrations

or

    npm install gupshup-integrations

Usage with react

Add the following code in index.js or index.ts file present in the root of the project.

    import { applyPolyfills, defineCustomElements } from 'gupshup-integrations/loader';

    applyPolyfills().then(() => {
        defineCustomElements(window);
    });

In the file where you want to import the web component, add the following code.

    import "gupshup-integrations";

And the below code is how we can add template messaging component in the file.

    <template-messaging 
       phone-number="91XXXXXXXXXX" 
       type="self-serve" 
       app-name="<app-name>"
       api-key="<api-key"
       whatsapp-no="91XXXXXXXXXX"
    />

Usage with angular

Add the following code in app.module.ts

    import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

and in the same file under @NgModule section, add the below line

    schemas: [CUSTOM_ELEMENTS_SCHEMA]

In main.ts file, do the following

    import { defineCustomElements } from 'gupshup-integrations/loader';

    defineCustomElements(window);

And the below code is how we can add template messaging component in the file.

    <template-messaging 
       phone-number="91XXXXXXXXXX" 
       type="self-serve" 
       app-name="<app-name>"
       api-key="<api-key"
       whatsapp-no="91XXXXXXXXXX"
    />

Usage with vue

Add the following code in main.js or main.ts file present in the root of the project.

    import { applyPolyfills, defineCustomElements } from 'gupshup-integrations/loader';

    applyPolyfills().then(() => {
        defineCustomElements(window);
    });

And the below code is how we can add template messaging component in the file.

    <template-messaging 
       phone-number="91XXXXXXXXXX" 
       type="self-serve" 
       app-name="<app-name>"
       api-key="<api-key"
       whatsapp-no="91XXXXXXXXXX"
    />

Props

| Prop | description | Is Mandatory ? | | ------ | ------ | ------ | | type | "self-serve" or "enterprise" | Yes | | phone-number | Number to which whatsapp message will be sent | No | | theme | An object to handle the stylings of each element, details present at the end | No |

When type is "self-serve" following props are required

| Prop | description | | ------ | ------ | | app-name | app name provided in gupshup | | api-key | can be found in gupshup app section | | whatsapp-no | whatsapp number provided while creating the app in gupshup |

When type is "enterprise" following props are required

| Prop | description | | ------ | ------ | | username | gupshup username | | password | gupshup password |

Adding themes

Any of the below mentioned attributes and its styles can be passed.

    const styleObject = {
        button: {
            color: "white",
            backgroundColor: "black"
        },
        label: {
            color: "green"
        },
        input: {
            backgroundColor: "antiquewhite"
        },
        dropdown: {
            backgroundColor: "antiquewhite"
        },
        options: {
            backgroundColor: "black",
            color: "white"
        },
        successMessage: {
            color: "green"
        },
        errorMessage: {
            color: "red"
        }
    }
    <template-messaging 
       phone-number="91XXXXXXXXXX" 
       type="self-serve" 
       app-name="<app-name>"
       api-key="<api-key"
       whatsapp-no="91XXXXXXXXXX"
       theme={JSON.stringify(styleObject)}
    />