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 Renesas IoT Sandbox account

Sign up for a free sandbox account at https://renesas.com/iotsandbox

 

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>

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>

Or

<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 following short script.  For the chatbox widget:

<script>

    $(document).ready(function () {
        
        M1_chatbox.init({
            // use mqtt2.mediumone.com for Renesas 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>

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>

Or

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

Your users can now interact with you by sending text events to your Renesas IoT Sandbox workflows directly from your website.  With your Renesas 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 Renesas IoT Sandbox account, go to Workflow Studio and create a workflow similar to 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']

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)

Similarly, the Diagnostics box is triggered by the ‘raw.button’ key, and can be answered by using the `monitoring` frame. It is 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)

With the Renesas IoT Sandbox libraries, you can create customized tables, charts and more.

For use of the login capabilities, you will need access to our API server which requires authorization. Please contact us to get access.

Voila!