Implementing real-time forms and video huddle into a customer support application

In this tutorial we'll demonstrate how to build a customer support application that uses SuperViz to integrate real-time collaborative forms and video conferencing.

The real-time forms feature allows support agents and customers to edit form fields simultaneously, similar to how Google Docs works. When a support agent updates a form field, the customer can see the change in real-time, and vice versa. This collaborative approach ensures both parties are on the same page, leading to more efficient problem-solving. Additionally, we'll implement a video huddle feature, enabling more personalized support interactions through video calls. Let's dive in!

Step 1: Set Up Your React Application

To begin, you'll need to set up a new React project where we will integrate the SuperViz SDK.

Create a New React Project

First, create a new React application using Create React App with TypeScript.

1
npx create-react-app customer-support-app --template typescript
2
cd customer-support-app

Install SuperViz SDK

Next, install SuperViz, which will enable us to add real-time collaboration features to our application.

1
npm install @superviz/sdk uuid react-icons

• @superviz/sdk: SDK for integrating real-time communication features such as forms and video conferencing.
• uuid: Library for generating unique identifiers, useful for creating unique participant IDs.
• react-icons: A library for including icons, like a call button icon, in your React application.

Configure tailwind

In this tutorial, we'll use the Tailwind css framework. First, install the tailwind package.

1
npm install -D tailwindcss postcss autoprefixer
2
npx tailwindcss init -p

We then need to configure the template path. Open tailwind.config.js in the root of the project and insert the following code.

1
/** @type {import('tailwindcss').Config} */
2
export default {
3
content: [
4
"./index.html",
5
"./src/**/*.{js,ts,jsx,tsx}",
6
],
7
theme: {
8
extend: {},
9
},
10
plugins: [],
11
}

Then we need to add the tailwind directives to the global CSS file. (src/index.css)

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;

Set Up Environment Variables

Create a .env file in your project root and add your SuperViz API key. This key will be used to authenticate your application with SuperViz services.

1
VITE_SUPERVIZ_API_KEY=YOUR_SUPERVIZ_API_KEY

Step 2: Implement the Main Application

In this step, we'll implement the main application logic to initialize SuperViz and handle form inputs and video calls.

Import Necessary Modules

Open src/App.tsx and import the required modules:

1
import { useCallback, useEffect, useRef, useState } from "react";
2
import SuperVizRoom, { FormElements, VideoConference, LauncherFacade } from "@superviz/sdk";
3
import { v4 as generateId } from "uuid";
4
import { IoIosCall } from "react-icons/io";

• useCallback, useEffect, useRef, useState: React hooks for managing state and lifecycle events.
• SuperVizRoom, FormElements, VideoConference, LauncherFacade: Components from SuperViz for setting up the room, forms, and video conferencing.
• generateId: A function from uuid for generating unique IDs for participants.
• IoIosCall: A React icon for the call button, providing a visual element for initiating video calls.

Initialize State and References

Define state variables and a reference for managing the application’s initialized state and SuperViz instance:

1
const apiKey = import.meta.env.VITE_SUPERVIZ_API_KEY as string;
2
const ROOM_ID = "customer-support";
3

4
export default function App() {
5
  const [initialized, setInitialized] = useState(false);
6
  const superviz = useRef<LauncherFacade | null>(null);

• apiKey: Retrieves the SuperViz API key from environment variables.
• ROOM_ID: A constant string representing the unique identifier for the room.
• initialized: A state variable to check if the application is already initialized.
• superviz: A reference to store the SuperViz instance, enabling the use of its methods across different components.

Initialize the SuperViz Room and Forms

Implement a function to initialize the SuperViz room and configure form elements:

1
const initialize = useCallback(async () => {
2
  if (initialized) return;
3

4
  superviz.current = await SuperVizRoom(apiKey, {
5
    roomId: ROOM_ID,
6
    participant: {
7
      id: generateId(),
8
      name: "participant-name",
9
    },
10
    group: {
11
      id: "customer-support",
12
      name: "customer-support",
13
    },
14
  });
15

16
  const formElements = new FormElements({
17
    fields: ["name", "email", "company", "role"],
18
  });
19

20
  superviz.current.addComponent(formElements);
21

22
  setInitialized(true);
23
}, [initialized]);

• SuperVizRoom: Initializes a new SuperViz room using the API key, room ID, participant ID, and group details.
• FormElements: Creates form elements with specified fields (name, email, company, role) to collect customer information.
• addComponent: Adds the form elements component to the SuperViz room for collaboration.

Initialize Video Conferencing

Set up a function to initialize video conferencing when the call button is clicked:

1
const initializeVideo = useCallback(() => {
2
  if (!initialized || !superviz.current) return;
3

4
  const video = new VideoConference({
5
    participantType: "host",
6
    collaborationMode: {
7
      enabled: true,
8
    },
9
  });
10

11
  superviz.current.addComponent(video);
12
}, [initialized]);

VideoConference: Configures a video conference component with the host participant type and enables collaboration mode.

• addComponent: Adds the video conferencing component to the SuperViz room.

Use Effect to Initialize Components

Use the useEffect hook to ensure components are initialized when the component mounts:

1
useEffect(() => {
2
  initialize();
3
}, [initialize]);

• useEffect: Automatically calls the initialize function when the component mounts, setting up the form and room configuration.

Render the Application UI

Define the structure and styling for the customer support application's UI:

1
return (
2
  <>
3
    <div className="w-full h-full bg-gray-200 flex items-center justify-center flex-col">
4
      <header className="w-full p-5 bg-purple-400 flex items-center justify-between">
5
        <h1 className="text-white text-2xl font-bold">Customer Support</h1>
6
        <button
7
          className="rounded-full bg-green-400 p-3 text-white text-lg"
8
          onClick={initializeVideo}
9
        >
10
          <IoIosCall />
11
        </button>
12
      </header>
13
      <main className="flex-1 p-20 flex w-full gap-2 items-center justify-center">
14
        <form className="min-w-[500px] bg-white rounded-lg border border-solid border-gray-300 p-6 flex flex-col gap-6">
15
          <div>
16
            <label htmlFor="name" className="text-md font-bold">
17
              Name
18
            </label>
19
            <input
20
              type="text"
21
              id="name"
22
              name="name"
23
              placeholder="Your Name"
24
              className="w-full p-3 border border-gray-300 rounded-md"
25
            />
26
          </div>
27
          <div>
28
            <label htmlFor="email" className="text-md font-bold">
29
              Email
30
            </label>
31
            <input
32
              type="text"
33
              id="email"
34
              name="email"
35
              placeholder="Your Email"
36
              className="w-full p-3 border border-gray-300 rounded-md"
37
            />
38
          </div>
39
          <div className="flex gap-2">
40
            <div>
41
              <label htmlFor="company" className="text-md font-bold">
42
                Company
43
              </label>
44
              <input
45
                type="text"
46
                id="company"
47
                name="company"
48
                placeholder="Your Company"
49
                className="w-full p-3 border border-gray-300 rounded-md"
50
              />
51
            </div>
52
            <div>
53
              <label htmlFor="role" className="text-md font-bold">
54
                Role
55
              </label>
56
              <input
57
                type="text"
58
                id="role"
59
                name="role"
60
                placeholder="Your Role"
61
                className="w-full p-3 border border-gray-300 rounded-md"
62
              />
63
            </div>
64
          </div>
65

66
          <button
67
            type="button"
68
            className="bg-purple-400 text-white p-3 rounded-md disabled:bg-gray-300"
69
          >
70
            Start Chat
71
          </button>
72
        </form>
73
      </main>
74
    </div>
75
  </>
76
);

• Header: Displays the application title and a button for initiating video calls.
• Main Content: Contains a form for collecting customer information with fields for name, email, company, and role.
• Button for Video Call: The IoIosCall icon button triggers the initializeVideo function to start a video conference.

Step 3: Running the Application

Start the React Application

To run your application, use the following command in your project directory:

1
npm run dev

This command will start the development server and open your application in the default web browser. You can interact with the form and start video calls as part of the customer support workflow.

Test the Application

• Form Functionality: Ensure that the form fields are correctly displayed and can capture user input.
• Video Conference: Click the call button to test video conferencing, ensuring real-time video communication is established.

Summary

In this tutorial, we built a customer support application with integrated real-time forms and video conferencing using SuperViz. We configured a React application to handle form inputs and video calls, enabling seamless interaction between support agents and customers.

Feel free to explore the full code and further examples in the GitHub repository for more details.