Whereby Embedded Integration for Video Calls on Website
Whereby Embedded is the simplest way to add video calls: create a room via API, insert <whereby-embed> web component in HTML—done. No manual WebRTC, no client SDKs.
Creating a Room via API
async function createWherebyRoom(params: {
endDate?: Date;
roomMode?: 'normal' | 'group';
roomNamePrefix?: string;
}): Promise<{ roomUrl: string; meetingId: string; hostRoomUrl: string }> {
const response = await fetch('https://api.whereby.dev/v1/meetings', {
method: 'POST',
headers: {
'Authorization': `Bearer ${process.env.WHEREBY_API_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
endDate: (params.endDate ?? new Date(Date.now() + 2 * 60 * 60 * 1000)).toISOString(),
roomMode: params.roomMode ?? 'normal',
roomNamePrefix: params.roomNamePrefix,
fields: ['hostRoomUrl'],
}),
});
const meeting = await response.json();
return {
roomUrl: meeting.roomUrl,
meetingId: meeting.meetingId,
hostRoomUrl: meeting.hostRoomUrl, // organizer—with extra rights
};
}
Embedding via Web Component
// Native HTML—no npm dependencies
function WherebyCall({ roomUrl, displayName }) {
return (
<div style={{ height: 600 }}>
<whereby-embed
room={roomUrl}
displayName={displayName}
minimal
background="off"
chat="on"
screenshare="on"
style={{ width: '100%', height: '100%', border: 'none', borderRadius: 12 }}
/>
</div>
);
}
// In Next.js—add type declaration
declare global {
namespace JSX {
interface IntrinsicElements {
'whereby-embed': React.DetailedHTMLProps<
React.HTMLAttributes<HTMLElement> & {
room: string;
displayName?: string;
minimal?: boolean | string;
chat?: 'on' | 'off';
screenshare?: 'on' | 'off';
background?: 'on' | 'off';
},
HTMLElement
>;
}
}
}
Whereby script is loaded via CDN—add to <head>:
<script type="module" src="https://cdn.srv.whereby.com/embed/v2-embed.esm.js"></script>
Premeeting Screen
Whereby by default shows a media check screen before entering. To disable:
<whereby-embed room={roomUrl} skip-media-permission-prompt />
Web Component Events
const containerRef = useRef<HTMLElement>(null);
useEffect(() => {
const el = containerRef.current;
if (!el) return;
const onJoin = () => console.log('Joined');
const onLeave = (e: CustomEvent) => {
console.log('Left after', e.detail.participantId);
onCallEnd?.();
};
el.addEventListener('ready', onJoin);
el.addEventListener('leave', onLeave);
return () => {
el.removeEventListener('ready', onJoin);
el.removeEventListener('leave', onLeave);
};
}, []);
Timeline
Basic Whereby integration with room creation and web component—0.5–1 day.