Add Connectivity Widgets to Your Website in 4 Easy Steps

Note: You will need to request cross domain permission to support this capability.  Please email support@medium.one with your request and domain name.

Step 1: Get a Medium One IoT Sandbox account

Get your Medium One IoT Prototyping Sandbox [Buy-here]

 

Step 2: Get your API key and MQTT project ID

API key can be found under Setup -> Manage API Keys

1-api-keys2-right-after

Project MQTT ID can be found under Setup-> MQTT

3-mqtt4-right-after

 

Step 3: Add the widget to your HTML

1.Add jquery and jquery-ui, required for this widget to work

 

2. Add the corresponding script link (m1.chatbox.js or m1.diagbox.js) at the bottom of your html body.

 

Or

 

3. Instantiate the widget with your credentials by adding the short script:

For the chatbox widget:

Note: for the chatbox, you need to have a dedicated user and provide its credentials here in order to allow for user to chat without login.

For the diagnostics popup widget, use the following:

This widget requests user login.

Replace project_mqtt_id and API key with the credentials found on Step 2

 

4. Add a button where you want in your page to activate the widget:

Or

6-right-after5-get-report-button

Your users can now interact with you by sending text events to your Medium One IoT Sandbox workflows directly from your website.

With your Medium One IoT Sandbox account, you can easily design powerful event processing logic to return customized insight in real time.

 

Step 4: Build a workflow to handle messages

7-handle-messages

In your Medium One IoT Sandbox account, go to Workflow Studio and create a workflow like the above that takes the raw.text key as input. This is the key that is emitted by the chatbox widget.

Edit the code. The input is accessible with a call to

Messages can be sent to the Chatbox in response using:

Similarly, the Diagnostics box is triggered by the ‘raw.button’ key, and can be answered by using the monitoring frame. Best is to send the report in HTML format to be rendered.

8-rendered

With the Medium One IoT Sandbox libraries, you can be creative and create tables, charts and more.

For use of the login capabilities, you will need to get allowed to use our server API (so called CORS authorization). Please contact us to get access.

Voila!

joyceml22@gmail.com'

Author: Joyce Li