How to add a chatbot to React, Next.js, Vue or Angular

Step by step

1. 1Pick your framework's tab

   Open Embed Codes and pick your website. Next to HTML/JavaScript there is a tab for React, Next.js, Vue and Angular. Each tab is a ready file with your website's key in it, and a short guide under it.

   

2. 2React

   Save the code as its own file, src/AparsoftChatbot.jsx. Then import it in App.jsx and render <AparsoftChatbot /> once. It draws nothing itself: the chat button appears on every page of the app.

   

3. 3Next.js

   Save the code as components/AparsoftChatbot.jsx. It starts with 'use client', so it runs in the browser. Import it in app/layout.js and put <AparsoftChatbot /> inside <body>, after {children}. The chat shows on every page, and your layout stays a server component.

   // app/layout.js
   import AparsoftChatbot from '@/components/AparsoftChatbot';
   
   export default function RootLayout({ children }) {
     return (
       <html lang="en">
         <body>
           {children}
           <AparsoftChatbot />
         </body>
       </html>
     );
   }

   

4. 4Vue

   Save the code as src/components/AparsoftChatbot.vue. Import it in App.vue and put <AparsoftChatbot /> once in its template. The file is written for Vue 3.

   

5. 5Angular

   Save the code as src/app/aparsoft-chatbot.component.ts. Add AparsoftChatbotComponent to your root component's imports, and <app-aparsoft-chatbot></app-aparsoft-chatbot> to its template. In an NgModule app, add it to the module's imports instead.

   

6. 6Nothing to install

   Each guide ends the same way: there is no package to add. The chat loads from Aparsoft's servers.

   

7. 7Open your app

   Here it is in a new Next.js app, saved and added just as the page says. The chat button is there, and it greets you.