Add Video Calls in WordPress in Just 3 Steps
Tags: javascript, wordpress, lowcode, webdev
Published: 2022-05-07 12:22:06

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](https://app.vidoesdk.live) to create a Video SDK account, which is absolutely **free**. Once you set up the account go to [settings>api-keys](https://app.videosdk.live/settings/api-keys) and generate a new **API key** for integration. (For more info, you can follow [How to generate API Key?](https://docs.videosdk.live/docs/guide/prebuilt-video-and-audio-calling/signup-and-create-api))

## 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](https://wordpress.org/support/article/custom-html/) on Wordpress.org)

![How to Add Video Calling in WordPress with Prebuilt SDK](http://blog.videosdk.live/content/images/2022/05/wordprees-design--1-.gif)

## Step 3: Add Prebuilt Code in HTML block on WordPress

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

```js
<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>
```

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](http://blog.videosdk.live/content/images/2022/05/wordpress-7-985981f79e1c6e48639fc189b6e8b138.png)

### Preview your site and Go live 🎉 

![How to Add Video Calling in WordPress with Prebuilt SDK](http://blog.videosdk.live/content/images/2022/05/giphy--1--1.gif)

> You can also see step-by-step see [video tutorial](https://youtu.be/o8DIxmT1Ubg)
> Create [different roles](https://video-sdks.notion.site/Create-different-roles-host-guest-etc-b925cc4b97dd4e4c9989a03985b4f3a6) (host, guest, etc.)
> Create unique [meeting links](https://video-sdks.notion.site/Create-unique-meeting-links-each-time-2858d22083674ab2acdf35d8dcc5df03) each time

<!--kg-card-begin: markdown-->
**Advanced**
<!--kg-card-end: markdown-->

> Developers, see our [Prebuilt SDK](https://docs.videosdk.live/prebuilt/api/sdk-reference/setup)  for more information on creating and configuring rooms.   
>   
> **Basic features:** [Join Screen](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/features/join-screen), [Camera Control](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/features/camera-controls), [Mic Controls](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/features/mic-controls), [Redirect on Leave](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/features/redirect-on-leave), [Share Your Screen](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/features/screenshare), [Send Messages](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/features/send-messages), [Pin Participants](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/features/pin-participants).  
>   
> **Advanced features** :  [Cloud Recording](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/features/recording-meeting), [Go Live On Social Media](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/features/go-live-social-media), [Change Layout](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/features/change-layout), [Customize Branding](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/features/customize-branding), [Customize Permissions](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/features/customize-permissions), [Whitelist Domain For Better Securit](https://docs.videosdk.live/prebuilt/guide/prebuilt-video-and-audio-calling/features/whitelist-domain),

![How to Add Video Calling in WordPress with Prebuilt SDK](http://blog.videosdk.live/content/images/2022/05/configuration-5b7667850e669d8e6d755692b451eec0--2-.png)


If you have questions while using the Video SDK Prebuilt SDK, I invite you to join the [Discord Community](https://discord.gg/Gpmj6eCq5u). You can ask your questions in the `#no-code channel`.Or you can reach out to me on [Twitter](https://twitter.com/sagarkava_).

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


{% embed https://twitter.com/video_sdk/status/1522216787978309633?s=20&t=MYR_bqud0j0v7LKLEQ9aEw %}