2.6.0 • Published 5 months ago
da-dialler v2.6.0
Using da-dialler
Package
This guide will help you integrate the da-dialler
package into your React and Next.js applications to add a dialler component.
React App Integration
Install the
da-dialler
package:npm install da-dialler@latest
Create the Dialler Component:
import DaDialler from "da-dialler"; import { useContext, useEffect } from "react"; import { InitPhoneConfig, NotificationPlacement, } from "da-dialler/dist/types/DataTypes"; const notify = ( type: string, placement: NotificationPlacement, message: string, description: string ) => { // Handle Notification toasts }; const initSipConfig = { notificationCallback: notify, customAgentName: "Joe", sipPassword: "Temp@123", sipExtension: "5607", sipDomainURL: "demo.dial-afrika.com", domainPort: "7443", }; const App = () => { return ( <> // Your Layout and at this node, your Dialler Container. <Dialler {...initSipConfig} /> </> ); }; /* ** Create a Dialler component to handle phone context and state. ** the context is of type PhoneState and should allow you to ** access all dialler methods through the context, ** @config: InitPhoneConfig ** add your Sip Configs here and trigger a dialler rerender. ** phone connection at this point is usually handled with the ** log in state to connect the phone immediately after login. ** if that doesn't happen, the dialler status ques should let ** you know, and a notification trigger is invoked for the same. ** Users still have the manual connect option on the Dialler. */ function Dialler(config: InitPhoneConfig) { const phoneState = useContext(DaDialler.PhoneContext); useEffect(() => { console.log("Phone State", phoneState); if (phoneState) { phoneState.phone.connect(); } }, [phoneState]); return ( <> <button onClick={() => phoneState?.clickToDial("123456")}> Click to Dial </button> <DaDialler.Dialler {...config} /> </> ); } export default App;
Run your React app:
npm start
Next.js App Integration
Install the
da-dialler
package:npm install da-dialler
Create the Dialler Component:
import DaDialler from "da-dialler"; import { useContext, useEffect } from "react"; import { InitPhoneConfig } from "da-dialler/dist/types/DataTypes"; const notify = ( type: string, placement: any, message: string, description: string ) => { console.log( "Notification Callback", type, placement, message, description ); }; const initSipConfig = { notificationCallback: notify, customAgentName: "Joe", sipPassword: "Temp@123", sipExtension: "5607", sipDomainURL: "demo.dial-afrika.com", domainPort: "7443", }; const Home = () => { return ( <div style={{ padding: ".5rem", position: "fixed", right: 0, bottom: 0, }} > <Dialler {...initSipConfig} /> </div> ); }; function Dialler(config: InitPhoneConfig) { const phoneState = useContext(DaDialler.PhoneContext); useEffect(() => { console.log("Phone State", phoneState); if (phoneState) { phoneState.phone.connect(); } }, [phoneState]); return ( <> <button onClick={() => phoneState?.clickToDial("123456")}> Click to Dial </button> <DaDialler.Dialler {...config} /> </> ); } export default Home;
Run your Next.js app:
npm run dev
By following these steps, you can integrate the da-dialler
package into your React or Next.js application and add a dialler component.