This repository holds the source code for the message360° WebRTC widget. The widget is an option for WebRTC users that do not want to utilize the full platform. The widget is can be loaded onto another site following the instructions down below.
The widget is dependent on a set up of the WebRTC platform. Even if you do not plan on using the full site, you need to set one up and have it active and running. This is because the widget will be loading content through the platform via iFrame. If you have some experience with iFrames and their uses, you can read more here: iFrame W3Schools. If you don't have a WebRTC platform for you message360° account up and running, follow this link: WebRTC Repository
-
Navigate to your desired install directory and perform a
git clone git@gitlab.ytel.com:danielparkk/message360-widget.git -
This will download the source code into a folder containing an
index.htmland a javascript fileiframeResizer.min.js.
-
The
index.htmlfile gives a pretty clear example of how the widget can be implemented into another site. -
You can place the
iframetag from the html file you downloaded onto an html file for your website:
<body>
<iframe id="wrtc-m360-iframe" src="https://webrtc-client-dev.message360.com/widget.html" scrolling="no" frameborder="0" style="width:240px;position: absolute;bottom: 0;right: 16px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"></iframe>
</body>- You also need to load the script into the head of your html file:
<head>
<script type='text/javascript' src='/path/to/iframeResizer.min.js'></script>
</head>- Finally you need to write a very small line of javascript code to enable the resizing of the widget.
<body>
<!--Site Content-->
<script type='text/javascript'>
iframeResize();
</script>
</body>- After you do all these parts, your HTML page should look something like this.
<html>
<head>
<script type='text/javascript' src='path/to/iframeResizer.min.js'></script>
</head>
<body>
<iframe id="wrtc-m360-iframe" src="https://webrtc-client-dev.message360.com/widget.html" scrolling="no"
frameborder="0" style="width:240px;
position: absolute;
bottom: 0;
right: 16px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"></iframe>
<script type='text/javascript'>
iframeResize();
</script>
</body>
</html>This will look a little different depending on the content on your site, but you can use this as a general skeleton/outline.
As stated before, the widget is content from the WebRTC platform loaded via iFrame. You just need to enter a username and caller ID number (Verified on the message360° account that was configured with the platform.) into the widget an proceed to use the dialpad to make calls.