gupshup-integrations v1.1.1
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)}
/>