Pre-tasks #
Secure your website with a valid SSL certificate (unless testing locally). Without https, mic and camera permissions would be denied by the browser.
Get the
domain,consumerIdandjwtdetails from the email sent to you with the test credentials.The below steps are for plain JavaScript integration with your web apps. For other integrations please check this section.
Add a meeting element #
Note: If you change the meeting element id, you need to pass the updated elementId as an optional argument.
xxxxxxxxxx11<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;"></div>
Import Clan Meeting #
xxxxxxxxxx11<script src="https://cdn.clanmeeting.com/releases/api/conferencing/v2.0.10/dist/clanmeeting.min.js"></script>
Start meeting #
Pass domain, consumerId and a jwt (for host) as per the details shared with you by our team.
xxxxxxxxxx171<script>2 const domain = 'clanmeeting-domain';3 const consumerId = 'clanmeeting-consumer-id';4 const optionalProperties = {5 roomName: 'uniqueRoomName',6 displayName: 'Host',7 jwt: 'your-token'8 };9 const meeting = new ClanMeeting(domain, consumerId, optionalProperties);10
11 // Optionally, generate a random room name and anonymize the display name12 // Overwrites the values specified as arguments in line 413 meeting.generateRoomName().anonymizeDisplayName();14
15 window.onload = function() { meeting.start(); };16 window.onunload = function() { meeting.end(); };17</script>
Example meeting page #
Here we are generating a random roomName and displayName but you could specify these details in optionalProperties.
xxxxxxxxxx2912<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;"></div>7
8 <script src="https://cdn.clanmeeting.com/releases/api/conferencing/v2.0.10/dist/clanmeeting.min.js"></script>9
10 <script>11 // TODO: edit the domain, consumerId and jwt before using this code12 const domain = 'clanmeeting-domain';13 const consumerId = 'clanmeeting-consumer-id';14 const optionalProperties = {15 jwt: 'your-token',16 };17 const meeting = new ClanMeeting(domain, consumerId, optionalProperties);18
19 meeting.generateRoomName().anonymizeDisplayName();20
21 window.onload = function() {22 meeting.start();23 };24 window.onunload = function() {25 meeting.end();26 };27 </script>28 </body>29</html>
