How to Integrate RumbleTalk Group Chat with JW Player
JW Player is one of the most widely used video players for websites, live streams, and on-demand content. By pairing JW Player with RumbleTalk, you can add a live group chat next to your video — giving your audience a place to react, ask questions, and interact in real time, all without leaving your website.
This guide shows you how to embed both JW Player and a RumbleTalk chat room side by side on any webpage.
Part A: Get Your RumbleTalk Embed Code
- Log in to your RumbleTalk admin panel.
- Select the chat room you want to use alongside your video.
- Click the Embed tab.
- Copy the embed code snippet provided.
Keep this code ready — you will paste it into your page alongside the JW Player embed code in the final step.
Part B: Get Your JW Player Embed Code
- Log in to your JW Player dashboard at dashboard.jwplayer.com.
- Go to Media and open the video you want to embed.
- Click Embed or Share on the video.
- Select the Cloud-Hosted Player option and copy the embed code. It will look similar to this:
<script src="https://cdn.jwplayer.com/players/YOUR_MEDIA_ID-YOUR_PLAYER_ID.js"></script>Alternatively, if you are self-hosting JW Player or using a custom setup, the embed code will use the jwplayer().setup() method:
<script src="https://cdn.jwplayer.com/libraries/YOUR_PLAYER_ID.js"></script>
<div id="myPlayer"></div>
<script>
jwplayer("myPlayer").setup({
file: "https://your-video-url.mp4",
width: "100%",
aspectratio: "16:9"
});
</script>Replace YOUR_MEDIA_ID, YOUR_PLAYER_ID, and the file URL with your actual values from the JW Player dashboard.
Putting It Together: Side-by-Side Layout
To display the JW Player video and RumbleTalk chat next to each other, paste both embed codes into a layout like this:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
gap: 16px;
align-items: flex-start;
}
.video-wrapper {
flex: 2;
}
.chat-wrapper {
flex: 1;
height: 360px;
}
.chat-wrapper iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div class="container">
<!-- JW Player Video -->
<div class="video-wrapper">
<script src="https://cdn.jwplayer.com/players/YOUR_MEDIA_ID-YOUR_PLAYER_ID.js"></script>
</div>
<!-- RumbleTalk Chat -->
<div class="chat-wrapper">
/* Paste your RumbleTalk embed code here */
</div>
</div>
</body>
</html>This layout places the video on the left and the chat on the right. Adjust the flex values or heights to match your page design.
Why Use RumbleTalk With JW Player?
JW Player handles video delivery — RumbleTalk handles the live conversation around it. Together they give your viewers a complete experience:
- Keep viewers on your site — no need to send your audience to a Discord server or a social media comments section.
- Works with live streams and on-demand video — use RumbleTalk for live event chats or as a discussion space for recorded content.
- Moderation built in — approve messages, mute users, pin announcements, or slow down the chat during high-traffic moments.
- Gate access to registered users — use RumbleTalk’s SSO or members-only settings to restrict chat to authenticated viewers.
Integrating RumbleTalk with JW Player is that straightforward. If you have any questions or run into issues, feel free to contact our support team.
Yes. RumbleTalk works alongside JW Player whether you are streaming live or hosting on-demand video. The chat runs independently of the video player, so any JW Player embed type is supported.
Yes. If you are using the JW Player WordPress plugin to embed video on a page, you can add the RumbleTalk embed code to the same page using a custom HTML block or widget, placing them side by side with CSS.
You need a JW Player account to get your embed code. RumbleTalk works with any JW Player plan — there are no special requirements on either side for the integration to work.
Yes. Use RumbleTalk’s SSO (Single Sign-On) or members-only chat room settings to gate access to authenticated users, aligning with your existing subscriber or paywall setup.
Yes. RumbleTalk is fully responsive and works on mobile browsers. The side-by-side layout will stack vertically on smaller screens if you add a responsive CSS breakpoint, which is recommended for mobile viewers.
