Integration Guide – Robo Connector JS Library

Introducing the Robo Connector JS Library

Our JavaScript library enables seamless integration with the Robo Connector API by leveraging declarative HTML tags and meta tags. This allows you to embed dynamic flows, documents, and functions directly into your webpages without writing complex JS code.

The library automatically initializes based on meta or custom tags and handles API authentication, data fetching, and rendering.

Initialization via Meta Tag

Include this meta tag in your HTML <head> to configure the Robo Connector client and project context:

<meta name="robo-connector" data-init="" data-client="Robo Connector" data-project="project1" />

This initializes the JS library with the specified client and project.

Initialization via Custom Element

You can alternatively use the custom element approach in your HTML body:

<robo-connector robo-connector-init=""></robo-connector>

This will automatically start the Robo Connector integration for the page.

Embedding Flows, Documents, and Functions

The library supports embedding dynamic components using these HTML tags:

<flow data-template="consult with chat">consult with chat</flow> — Embeds a business flow template.
<document data-display data-document="price">Loading...</document> — Displays a document named "price".
<document data-display data-document="main" data-refresh>Loading...</document> — Displays the "main" document with auto-refresh.
<function data-provider="Inner,Facebook" data-include-header="h2" data-after-function="get_project">student_cart</function> — Invokes the "student_cart" function with multiple providers, includes a header, and runs after "get_project".

Advanced Function Tags

You can specify additional attributes on <function> tags for more control:

data-function="video" and data-option='{"id":"klnXkWrVhJg"}' to embed a video player.
data-function="crossword" with a data-option JSON containing crossword puzzle configuration.
data-hide-after-function="login" to hide this function after the specified other function runs.


<function id="lesson-1" data-function="video" data-option='{"id":"klnXkWrVhJg"}' data-provider="Google"></function>

<function data-function="crossword" data-option='{
  "letters": [
    ["C", "0", "T"],
    ["D", "0", "G"],
    ["L", "0", "0", "N"]
  ],
  "answer": ["A", "O", "I", "O"]
}'></function>

How It Works

Once initialized, the JS library scans the DOM for these special tags, processes their attributes, and fetches data or triggers functions via the Robo Connector API. It then replaces the tags' content with live data or interactive UI components.

Getting Started

To start integrating:

Include the Robo Connector JS library in your page (script tag - URL to be provided).
Add a meta tag or <robo-connector> element to initialize the integration.
Use the <flow>, <document>, and <function> tags in your HTML as needed.

Robo Connector Integration Guide

Quick Links