DEV Community

Cover image for Add Video Calls in WordPress in Just 3 Steps
Sagar Kava for Video SDK

Posted on

Add Video Calls in WordPress in Just 3 Steps

This tutorial will provide a step-by-step guide that can help you create a video calling app in WordPress with the Prebuilt Video SDK in Just 5 minutes. I've been creating various guides, such as this one, on different subjects. My personal goal is to make it easier for new developers to start building Web and Mobile applications without all the unnecessary hurdles.

Prebuilt SDK is the easiest way to add a video calling feature to your website. It works on any device, with no installation needed. Create meetings, join meetings and let people talk face to face over webcam in real-time.

  • HD,Full HD Video Calls
  • Add your logo
  • Video calls Real-time messaging
  • Cloud recording
  • Whiteboard and More

Add Video Calls on WordPress in 3 Steps

Step 1: Create an account and generate API Key

First, you will need to Sign Up to create a Video SDK account, which is absolutely free. Once you set up the account go to settings>api-keys and generate a new API key for integration. (For more info, you can follow How to generate API Key?)

Step 2: Add a Custom HTML block to your page

Once you've logged in to your WordPress dashboard., you'll want to add a Custom HTML block to the page of your site where you wish to create a video call embed. (For more info, you can follow this support article on Wordpress.org)

How to Add Video Calling in WordPress with Prebuilt SDK

Step 3: Add Prebuilt Code in HTML block on WordPress

Simply copy and paste the following code into your Custom HTML block

<script>
  var script = document.createElement("script");
  script.type = "text/javascript";

  script.addEventListener("load", function (event) {
    const config = {
      name: "Video SDK Live",
      meetingId: "prebuilt",
      apiKey: "<YOUR API KEY>",

      containerId: null,

      micEnabled: true,
      webcamEnabled: true,
      participantCanToggleSelfWebcam: true,
      participantCanToggleSelfMic: true,

      chatEnabled: true,
      screenShareEnabled: true,
    };

    const meeting = new VideoSDKMeeting();
    meeting.init(config);
  });

  script.src =
    "https://sdk.videosdk.live/rtc-js-prebuilt/0.3.1/rtc-js-prebuilt.js";
  document.getElementsByTagName("head")[0].appendChild(script);
</script>
Enter fullscreen mode Exit fullscreen mode

Now, Add the apiKey:"<YOUR API KEY>" (in the code above) in apiKey the property you need to provide your API KEY which we have generated in Step 1.

How to Add Video Calling in WordPress with Prebuilt SDK

Preview your site and Go live ๐ŸŽ‰

How to Add Video Calling in WordPress with Prebuilt SDK

You can also see step-by-step see video tutorial
Create different roles (host, guest, etc.)
Create unique meeting links each time

Advanced

Developers, see our Prebuilt SDK for more information on creating and configuring rooms.

Basic features: Join Screen, Camera Control, Mic Controls, Redirect on Leave, Share Your Screen, Send Messages, Pin Participants.

Advanced features : Cloud Recording, Go Live On Social Media, Change Layout, Customize Branding, Customize Permissions, Whitelist Domain For Better Securit,

How to Add Video Calling in WordPress with Prebuilt SDK

If you have questions while using the Video SDK Prebuilt SDK, I invite you to join the Discord Community. You can ask your questions in the #no-code channel.Or you can reach out to me on Twitter.

original post: https://www.videosdk.live/blog/video-calling-wordpress

Top comments (0)