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 SuperViz for collaborative forms and video capabilities.

1. Create a New React Project

First, create a new React application using Vite with TypeScript.

1
npm create vite@latest customer-support-form -- --template react-ts
2
cd customer-support-form

2. Install Required Libraries

Next, install the necessary libraries for our project:

1
npm install @superviz/room @superviz/collaboration @superviz/video react-icons uuid

• @superviz/room: Core package for creating and managing SuperViz rooms.
• @superviz/collaboration: Contains components for collaboration features, including FormElements for synchronized form interactions.
• @superviz/video: Provides video conferencing functionality.
• react-icons: Library for using icons in React applications.
• uuid: A library for generating unique identifiers, useful for creating unique participant IDs.

3. 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;

4. Set Up Environment Variables

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

1
VITE_SUPERVIZ_API_KEY=YOUR_SUPERVIZ_DEVELOPER_KEY

Step 2: Implement the Customer Support Form Application

In this step, we'll implement the main application logic to create a collaborative customer support form with video call capability.

1. Import Required Modules

Open src/App.tsx and add the necessary imports:

1
import { FormElements } from "@superviz/collaboration";
2
import { createRoom, Room } from "@superviz/room";
3
import { VideoEvent, VideoHuddle } from "@superviz/video";
4
import { useCallback, useEffect, useRef, useState } from "react";
5
import { IoIosCall } from "react-icons/io";
6
import { v4 as generateId } from 'uuid';
7

8
// SuperViz developer token ::
9
const DEVELOPER_TOKEN = import.meta.env.VITE_SUPERVIZ_API_KEY;

Explanation:

• FormElements: SuperViz component for synchronizing form inputs across participants.
• createRoom, Room: Used to create and manage a collaborative SuperViz room.
• VideoEvent, VideoHuddle: Components for implementing video conferencing.
• IoIosCall: Icon for the video call button.
• generateId: Function to create unique IDs for participants.

2. Create the Main App Component

Now, let's implement the App component that will manage the form and collaboration features:

1
export default function App() {
2
  // States ::
3
  const [huddleStarted, setHuddleStarted] = useState(false);
4

5
  const roomRef = useRef<Room | null>(null);

Explanation:

• huddleStarted: State to track whether the video huddle has been started.
• roomRef: Reference to store the SuperViz room instance.

3. Initialize SuperViz Room

Create an initialization function to set up the SuperViz room and FormElements component:

1
// Initialize ::
2
  const initialize = useCallback(async () => {
3
    try {
4
      const room = await createRoom({
5
        developerToken: DEVELOPER_TOKEN,
6
        roomId: "ROOM_ID",
7
        participant: {
8
          id: generateId(),
9
          name: "Name " + Math.floor(Math.random() * 10),
10
        },
11
        group: {
12
          id: "GROUP_ID",
13
          name: "GROUP_NAME",
14
        },
15
      });
16

17
      // Store the room instance in the ref
18
      roomRef.current = room;
19

20
      const formElements = new FormElements({
21
        fields: [
22
          'name',
23
          'email',
24
          'company',
25
          'role',
26
        ]
27
      })
28

29
      room.addComponent(formElements)
30

31
    } catch (error) {
32
      console.error("Error initializing SuperViz Room:", error);
33
    }
34
  }, []);
35

36
  useEffect(() => {
37
    initialize();
38
  }, [initialize]);

Explanation:

• createRoom: Creates a SuperViz room with participant and group information.
• FormElements: Initializes the component with the form fields we want to synchronize.
• room.addComponent: Adds the FormElements component to the room for real-time collaboration.
• useEffect: Calls the initialize function when the component mounts.

4. Implement Video Huddle Functionality

Add a function to start a video huddle for direct communication with customers:

1
const startHuddle = async () => {
2
    const video = new VideoHuddle({
3
      participantType: "host",
4
    });
5

6
    video.subscribe(VideoEvent.MY_PARTICIPANT_JOINED, () =>
7
      setHuddleStarted(true)
8
    );
9

10
    // Use the room instance from the ref
11
    if (roomRef.current) {
12
      roomRef.current.addComponent(video);
13
    }
14
  };

Explanation:

• startHuddle: Function to initialize and start a video call.
• VideoHuddle: Creates a new video conference component with the current user as host.
• video.subscribe: Listens for when the local participant joins the video huddle and updates state.
• roomRef.current.addComponent: Adds the video component to the room for real-time communication.

5. Create the Form Interface

Finally, implement the JSX to render the customer support form with the call button:

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
          {!huddleStarted && (
7
            <button className="rounded-full bg-green-400 p-3 text-white text-lg" onClick={startHuddle}>
8
              <IoIosCall />
9
            </button>
10
          )}
11
        </header>
12
        <main className='flex-1 p-20 flex w-full gap-2 items-center justify-center'>
13
          <form className="min-w-[500px] bg-white rounded-lg border border-solid border-gray-300 p-6 flex flex-col gap-6">
14
            <div>
15
              <label htmlFor='name' className='text-md font-bold'>Name</label>
16
              <input
17
                type='text'
18
                id='name'
19
                name='name'
20
                placeholder='Your Name'
21
                className='w-full p-3 border border-gray-300 rounded-md'
22
              />
23
            </div>
24
            <div>
25
              <label htmlFor='email' className='text-md font-bold'>Email</label>
26
              <input
27
                type='text'
28
                id='email'
29
                name='email'
30
                placeholder='Your Email'
31
                className='w-full p-3 border border-gray-300 rounded-md' />
32
            </div>
33
            <div className="flex gap-2">
34
              <div>
35
                <label htmlFor='company' className='text-md font-bold'>Company</label>
36
                <input
37
                  type='text'
38
                  id='company'
39
                  name='company'
40
                  placeholder='Your Company'
41
                  className='w-full p-3 border border-gray-300 rounded-md' />
42
              </div>
43
              <div>
44
                <label htmlFor='role' className='text-md font-bold'>Role</label>
45
                <input
46
                  type='text'
47
                  id='role'
48
                  name='role'
49
                  placeholder='Your Role'
50
                  className='w-full p-3 border border-gray-300 rounded-md' />
51
              </div>
52
            </div>
53

54
            <button
55
              type='button'
56
              className='bg-purple-400 text-white p-3 rounded-md disabled:bg-gray-300'
57
            >
58
              Start Chat
59
            </button>
60
          </form>
61
        </main>
62
      </div>
63
    </>
64
  )
65
}

Explanation:

• Header: Contains the application title and a call button that appears only when the video huddle hasn't started.
• Form: Contains input fields for name, email, company, and role, each with the correct ID and name attributes that match the fields specified in FormElements.
• Start Chat Button: A button to proceed after the form is filled out (in a real application, this would trigger the next step in your customer support flow).

Step 3: Understanding How FormElements Works

Let's look at how SuperViz's FormElements enables collaborative form interactions:

1. Field Specification
   • The FormElements component is initialized with an array of field names that should be synchronized.
   • These fields correspond to the 'name' attributes of the input elements in your form.
2. Real-time Synchronization
   • As users type in form fields, their inputs are synchronized in real-time with other participants.
   • All participants can see what others are typing as they type it, enabling collaborative form completion.
3. Customer Support Scenario
   • A support agent can help a customer fill out a form by typing in fields directly, or by guiding them verbally via the video huddle.
   • Both the customer and agent see the same form state at all times, making it easier to provide assistance.
4. Integration with Video
   • The video huddle feature complements the form collaboration by providing face-to-face communication.
   • Support agents can explain complex fields or requirements while simultaneously helping with form completion.

Step 4: Running the Application

1. Start the 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 see updates in real-time across multiple participants.

2. Test the Application

• Collaborative Form: Open the application in multiple browser windows or tabs to simulate different users (customer and support agent). Type in one form and observe how the input is synchronized in real-time with the other window.
• Video Huddle: Click the call button in one window to start a video huddle and test the face-to-face communication feature.
• Combined Experience: Test the full scenario by having one window represent the customer and another represent the support agent. Fill out the form collaboratively while communicating through the video huddle.

Summary

In this tutorial, we built a customer support form application with real-time collaboration using SuperViz. We implemented form field synchronization using the FormElements component and added video calling capabilities for direct communication. This combination enables effective customer support scenarios where agents can assist users with form completion while maintaining visual and verbal communication.

This application demonstrates how SuperViz can enhance customer support experiences by providing real-time collaboration tools. The approach can be extended to various scenarios such as:

• Customer onboarding processes
• Technical support for complex application forms
• Sales assistance during purchase or registration
• Virtual consulting sessions

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