Before you proceed, please read how to connect participants in a meeting.
For the scheduled meetings, store the meeting start datetime along with the room name in your database.
Example scheduled meeting #
Join Button will be enabled only after the scheduled meeting start time.
Optionally, you can also set nbf (not before timestamp) while generating the JWT for the host. Authentication will fail if the host tries to join before the specified timestamp in this case. Read more
xxxxxxxxxx521<html>3 <head></head>4 <body>5
6 <div id="my-meeting" style="position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; margin: 0; padding: 0; overflow: hidden; z-index: 99; display: flex; justify-content: center; align-items: center;">7 <button id="meeting-btn" style="background-color: #008CBA; border: none; color: white; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;">Join Meeting</button> 8 </div>9
10 <script src="https://cdn.clanmeeting.com/releases/api/conferencing/v2.0.8/dist/clanmeeting.min.js"></script>11
12 <script>13 const optionalProperties = {14 // TODO: Get roomName from DB15 roomName: roomNameFromDB(),16 displayName: 'John Doe',17 // TODO: Pass a token here to join as host18 jwt: '',19 };20
21 // TODO: Edit domain, consumerId22 const domain = 'clanmeeting-domain';23 const consumerId = 'your-consumer-id';24 const meeting = new ClanMeeting(domain, consumerId, optionalProperties);25
26 window.onload = function() {27 const btn = document.getElementById('meeting-btn');28
29 // TODO: Get start datetime from the DB for this meeting30 // e.g. '2024-02-17 09:59:59' or any valid JavaScript date time format31 const startsAt = startDateTimeFromDb();32
33 // Check if it is time yet for the scheduled meeting34 if(meeting.isInFuture(startsAt)) {35 // Disable the button36 btn.disabled = true;37 btn.style.background = 'grey';38 btn.style.cursor = 'not-allowed';39 } else {40 btn.addEventListener('click', function() {41 btn.remove();42 meeting.start();43 });44 }45 }46
47 window.onunload = function() {48 meeting.end();49 }50 </script>51 </body>52</html>
Further customizations and controls #
Check all ClanMeeting properties, events and methods in the meeting customization and controls section.
