• Medium One

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

Project MQTT ID can be found under Setup-> MQTT

Step 3: Add the widget to your HTML

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

1

2

3

<script type="text/javascript"

src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

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

<script type="text/javascript" src="https://www.mediumone.com/assets/js/m1.chatbox.js"></script>

1

<script type="text/javascript" src="https://www.mediumone.com/assets/js/m1.chatbox.js"></script>

Or

<script type="text/javascript" src="https://www.mediumone.com/assets/js/m1.diagbox.js"></script>

1

<script type="text/javascript" src="https://www.mediumone.com/assets/js/m1.diagbox.js"></script>

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

For the chatbox widget:

<script> $(document).ready(function () { M1_chatbox.init({ // use mqtt2.mediumone.com for Medium One Sandbox websocketserver: 'mqtt.mediumone.com', mqtt_channel: "chat", project_mqtt_id: "rfghhIHBDb", API_key: "LNKR6GQWDCGHJEHWJKJD23BOELWBQGQYDKMRVGAZQGQ3DAMBQ", user_mqtt_id: "9o0rg0YamGM", user_password: "Abc123!$", offset: 200 }); }); </script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<script>

$(document).ready(function () {

M1_chatbox.init({

// use mqtt2.mediumone.com for Medium One Sandbox

websocketserver: 'mqtt.mediumone.com',

mqtt_channel: "chat",

project_mqtt_id: "rfghhIHBDb",

API_key: "LNKR6GQWDCGHJEHWJKJD23BOELWBQGQYDKMRVGAZQGQ3DAMBQ",

user_mqtt_id: "9o0rg0YamGM",

user_password: "Abc123!$",

offset: 200

});

});

</script>

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:

<script> $(document).ready(function () { M1_diagnostics.init({ mqtt_channel: "monitoring", project_mqtt_id: "rfghhIHBDb", API_key: "LNKR6GQWDCGHJEHWJKJD23BOELWBQGQYDKMRVGAZQGQ3DAMBQ" }); }); </script>

1

2

3

4

5

6

7

8

9

<script>

$(document).ready(function () {

M1_diagnostics.init({

mqtt_channel: "monitoring",

project_mqtt_id: "rfghhIHBDb",

API_key: "LNKR6GQWDCGHJEHWJKJD23BOELWBQGQYDKMRVGAZQGQ3DAMBQ"

});

});

</script>

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:

<button id="m1-chat" class="btn dark">Chat with us</button>

1

<button id="m1-chat" class="btn dark">Chat with us</button>

Or

<button id="m1-diag" class="btn dark">Get Report</button>

1

<button id="m1-diag" class="btn dark">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

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

text_in = IONode.get_input('in1')['event_data']['value']

1

text_in = IONode.get_input('in1')['event_data']['value']

Messages can be sent to the Chatbox in response using:

import MQTT def update_frame(frame, data): publish_data = {"frame": frame, "data": data} MQTT.publish_event_to_client(frame, json.dumps(publish_data)) log(u"MQTT Publishing: frame {}={}".format(frame.upper(), data)) message = "hello world" update_frame('chat', message)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

import MQTT

def update_frame(frame, data):

publish_data = {"frame": frame, "data": data}

MQTT.publish_event_to_client(frame, json.dumps(publish_data))

log(u"MQTT Publishing: frame {}={}".format(frame.upper(), data))

message = "hello world"

update_frame('chat', message)

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.

import MQTT def update_frame(frame, data): publish_data = {"frame": frame, "data": data} MQTT.publish_event_to_client(frame, json.dumps(publish_data)) log(u"MQTT Publishing: frame {}={}".format(frame.upper(), data)) html = "<div>This is the body </div>" update_frame('monitoring', html)

1

2

3

4

5

6

7

8

9

10

import MQTT

def update_frame(frame, data):

publish_data = {"frame": frame, "data": data}

MQTT.publish_event_to_client(frame, json.dumps(publish_data))

log(u"MQTT Publishing: frame {}={}".format(frame.upper(), data))

html = "<div>This is the body </div>"

update_frame('monitoring', html)

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!

1 view

© 2018 Medium One   All Rights Reserved

4633 Old Ironsides Dr. #280, Santa Clara, CA  95054                

info@mediumone.com

|

  • LinkedIn - White Circle
  • Twitter - White Circle
  • YouTube - White Circle
  • Google+ - White Circle