Meet–Me Web Component

Overview

The Meet Me Web Component is a click-to-call or click-to-video button which you can embed in your website to let visitors establish a video call with you.

Meet Me

Meet Me can be integrated into websites and third-party tools; Website owners publish Meet Me links on their website, visitors click on the Meet Me link to immediately set up a 1:1 web meeting with the website owner. The website owner will be notified that a visitor is waiting for a meeting and can join that meeting with just one click.

Meet Me meeting requests are stored in Meet Me Queues that are accessible from within the web meeting platform. Every 1:1 meeting is set up as a separate meeting, different visitors will never see each other and by accident join meetings they are not allowed to.

Glossary

Meet Me Channel

A channel is defined as 1 concurrent meeting within a Meeting Queue. The number of channels per Meeting Queue defines the maximum number of concurrent meetings within a Meet Me Queue. Meet Me Channels do not count towards the number of standard meeting rooms assigned to a Customer.

Meet Me Queue

A queue is represented by a unique Meeting Queue link which can be published on the Customer website. This unique Meeting Link looks similar to the following:

https://rooms.veeting.com/addons/meet-me/<RANDOM-STRING>

A Meet Me Queue requires at least one Meet Me Channel. Multiple Channels can be assigned to the same Meet Me Queue

Meet Me Agent

A Meet Me Agent is a meeting organizer who has access to at least one Meet Me Queue. All Meet Me Agents are meeting organizers of the same account, but not all meeting organizers are Meet Me Agents.

Customer

An entity with a web meeting account and at least one active meeting room.

Visitor

Any person who wants to get in contact with the Customer. A visitor does not need an account with the web meeting platform.

Pre-requisite

Meet Me can only be activated for valid accounts with at least 1 active meeting room. Ask our team to enable Meet Me for your account.

Meet Me Setup

Once Meet Me is activated for an account a new navigation menu “Meet Me” will appear under “Account Settings”. Account Admins will set up and configure their own Meet Me.

The following properties will be configurable for each Meet Me Queue:

  1. Number of Meet Me Channels
    
    1. Meeting permissions 
      
      1. Whether an email address is required to join the room
        
        1. List of meeting organizers who will have access to the queue
          

Meet Me Queue

Meet Me Queues are list of meeting requests, similar to Upcoming Meetings. The list shows the current meeting requests in the order they came it, together with the exact time of the meeting request. Meet Me agents can then join or decline the meeting request

Meet Me Waiting Room

Visitors who click on a Meet Me link on the customers website will be forwarded to the “Join Meeting” screen where they fill in their name and press “Join Meeting”. Instead of directly being routed to the meeting room they will end up in a Meet Me Waiting Room where they see the number of persons before them who are also waiting to be taken into a meeting. Visitors can the choose to wait until a Meet Me agent joins the meeting or leave a contact request message instead.

Embedding

Make sure to embed the Javascript file directly from your web meeting instance. This way you never miss an update.

<html>
<body>
  <!-- embedd the web component -->
  <ul>
    <li>
      <a class="meet-me"
        data-display-mode="window"
        data-connection-type="meeting"
        data-queue-id="604fa16281f2eb60f7463c92">
          Garden department (opens in new window)
      </a>
    </li>
    <li>
      <a class="meet-me"
        data-display-mode="window"
        data-connection-type="meeting"
        data-queue-id="604fa07f81f2eb60f7463c91">
          Sports department (opens in new window)
      </a>
    </li>
  </ul>

  <meet-me id="meet-me"
    api-host="https://<Web Meeting Domain Name>"
    participant-name="My name"
    participant-email="test@example.com"></meet-me>

  <script>
    const elem = document.getElementById("meet-me");
    elem.addEventListener("openend", () => {
      console.log("Meet-Me opened");
      elem.style.display = "block"
    });
    elem.addEventListener("closed", () => {
      console.log("Meet-Me closed");
      elem.style.display = "none";
    });
    elem.addEventListener("pickedUp", () => {
      setTimeout(() => {
        try {
            document.querySelector("#meet-me").shadowRoot.querySelector("modal-content > iframe").style.margin = 0;
        } catch (e) {
          // TODO
        }
      }, 500);
    });

    window.addEventListener("message", (event) => {
      console.log("Meet-Me closed (post message)", event.data);
      if (!event || !event.data) {
        return;
      }
      if (event.data.event === "meetingDurationUpdated" && event.data.payload.remainingSeconds === 0) {
        window.location.reload();
      } else if (event.data.event === "leave") {
        window.location.reload();
      }
    }, false);

  </script>    

  <!-- embedd the WebRTC adapter for browser compatibility -->
  <script type="text/javascript"
    src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

  <!-- embedd the web component code -->
  <script type="text/javascript"
    src="https://<Web Meeting Domain Name>/component/meet-me/elements.js"></script>

</body>
</html>

Attributes

You can use HTML attributes to configure Meet Me. Some attributes are mandatory, others optional. The table below describes each of the attributes available.

Attribute nameMandatory?Description
api-hostYesThe domain name of your web meeting instance, for example https://rooms.veeting.com
participant-nameYesThe name of the participant. If you don't know the name you may use a placeholder such as Anonymous.
participant-emailNoThe email address of the participant.

Not sure how to best implement your project?

Contact our team to discuss the details.