Using WordPress
In this guide, we will get started using Call Kit on WordPress with a few steps. Let's try this out:
Prepare the environment
Before you attempt to integrate the SDK, make sure that the development environment meets the following requirements:
- The development computer with Windows or macOS is connected to the Internet.
- A browser that meets the compatibility requirements of ZEGO Express Web SDK (To check browser compatibility, please refer to Web SDK compatibility.), it is recommended to use the latest version of Google Chrome.
Step 1: Add a new page
Log in to the WordPress dashboard, and in the sidebar panel, click Add New to create a new page.
Step 2: Add a custom HTML
After creating a new page, click on the + button, and then click Custom HTML to add a custom HTML.
Step 3: Add Call Kit code in an HTML block
After adding a custom HTML, copy the prebuilt code from the below snippet.
You'll need to generate a Kit Token.
You can skip generate Kit Token if you wanna speed up your integration testing. Remember to generate the Kit Token by referring to this when you plan to make your app go live officially.
<script>
function getUrlParams(
url = window.location.href
) {
let urlStr = url.split('?')[1];
return new URLSearchParams(urlStr);
}
var script = document.createElement("script");
script.type = "text/javascript";
script.addEventListener("load", function (event) {
// Generate a Kit Token by calling a method.
// @param 1: appID
// @param 2: serverSecret
// @param 3: Room ID
// @param 4: User ID
// @param 5: Username
const roomID = getUrlParams().get('roomID') || Math.floor(Math.random() * 10000) + "";
const userID = Math.floor(Math.random() * 10000) + "";
const userName = "userName" + userID;
const appID = ;
const serverSecret = "";
const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID, userID, userName);
const zp = ZegoUIKitPrebuilt.create(kitToken);
zp.joinRoom({
container: document.querySelector("#root"),
sharedLinks: [{
url: window.location.protocol + '//' + window.location.host + window.location.pathname + '?roomID=' + roomID,
}],
scenario: {
mode: ZegoUIKitPrebuilt.GroupCall, // To implement 1-on-1 calls, modify the parameter here to [ZegoUIKitPrebuilt.OneONoneCall].
},
});
});
script.src =
"https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
Step 4: Provide appID and serverSecret
Then, replace the appID and serverSecret parameters in the following code with your project's AppID and ServerSecret that you get from Admin Console.
Step 5: Preview
After clicking the Save draft, the last step is to execute the code by clicking the Preview button.
Congratulations! So far, you've finished all the steps.
Related guide
Follow the steps to generate a Kit Token.