Integration of Link is done using a small snippet of javascript that can be displayed in any part of your application. Widget integration requires the m1-link tag and a set of configuration options as shown in the sample configuration JSON.
The source code sample below shows how to integrate MeasureOne Link widget into your front-end using plain vanilla javascript
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> YOUR TITLE HERE </title>
<script src="https://api-stg.measureone.com/v3/js/m1-link-2021042000.js"></script>
</head>
<body>
<h1>YOUR TITLE HERE</h1>
<div>
<m1-link></m1-link>
<script>
var config = {
access_key: "<<YOUR_ACCESS_TOKEN>>",
host_name: "api-stg.measureone.com",
datarequest_id: "<<DATA REQUEST ID>>",
branding: {
styles: {
primary_dark: "#186793",
primary_light: "#2e9ccb",
secondary_color: "#ffffff",
min_height: "700px"
}
},
options: {
"display_profile": false
}
}
// Take reference to widget
const m1_widget = document.querySelector("m1-link");
// Add configuration
m1_widget.setAttribute("config", JSON.stringify(config));
// Add event listeners
m1_widget.addEventListener('datasourceConnected',(event)=>{
// Perform operation on datasourceConnected event.
console.log(event);
//hide or destroy the widget once connected
});
</script>
</body>
</html>