WebComponent, HTML, Button
This document covers all the details you need to know to integrate an HTML button into your site. The steps below pertain to the HTML Toggle Button – WebComponent export.
When working through this doc, remember:
Every time you export a timeline to code it varies depending on the animations, layer names, etc.
To ensure these instructions are crystal clear they are tailored to the code you have just exported.
For example, the name of the timeline you just exported is: Miro
.
Let’s get to it.
When you export a project you’ll see the following structure:
The index.html
file is included to allow you to quickly view/test your toggle button in a browser without having to integrate it into a webpage. You can get rid of it along with the readme.html
before integrating your button code.
This section explains how to integrate a single instance of your component on a webpage. If you want to reuse the component several times throughout a page, you'll have to follow these steps, then continue with those in Multiple Instances section.
Miro
folder to a location of your choice inside your site’s file structure.<head>
or <footer>
of your page.
<script>
function loadScripts(sources) {
sources.forEach(src => {
let script = document.createElement("script");
script.src = src;
script.async = false;
document.head.appendChild(script);
});
}
let commonFolderPath = "./FlowCommon"
let flowCommonScript = [`${commonFolderPath}/flowCommon.js`];
loadScripts(flowCommonScript)
</script>
<head>
or <footer>
of your page. Make sure this script executes after the script in step 2.
<script>
function callback() {
console.log("I've been clicked!")
}
let miroResourcesPath = ".";
let miroScript = [`${miroResourcesPath}/js/miroToggleButton.js`];
loadScripts(miroScript)
</script>
<miro-button id="miroButton"></miro-button>
If the button doesn’t show up at this point, check your browser’s console to see if there is an issue with either of the
commonFolderPath
or themiroResourcesPath
.
function callback() {
//put your logic code here
}
You just integrated 2 scripts into your page. The first dynamically injects a few common scripts (used by all the Flow Web exports) into the <head>
of your page.
commonFolderPath
is where the path to the Flow Common folder is specified. If you decide to move the FlowCommon folder, you must update the value of this variable.
The second script injects the timeline that drives the button’s animation. It also defines a callback which is triggered when the button’s state is toggled. You can replace the code inside of this callback with what ever logic you would like to trigger when the button is clicked.
miroResourcesPath
is where you specify the path to the Miro folder. You must update the value of this variable based on the new location you have chosen for your Miro folder.
The callback()
gets triggered when the button’s animation completes.
If you want multiple instances of a buttons on a page, do the following:
instances.js
by creating another ToggleButton
variable with a different ID. For example:
const miroButton = createTextInput(
"miroButton",
callback,
miroResourcesPath,
MiroTimeline,
MiroReverseTimeline,
"Name"
);
<miro-button id="miroButton"></miro-button>
For each new ToggleButton instance you would like to create, repeat the steps above using new variable names.
If you want a different toggle button (with different timelines) on your page do the following:
FlowCommon
folder from the exported codeRepeat the steps above for each additional type you would like to integrate into your page.
Best practice is to put the Miro and FlowCommon folders in a directory on your site that can be accessed from any other page.
Remember to modify the commonFolderPath
or the miroResourcesPath
variables to point to these folders if you do so.
You’ll want to make sure the common files are only imported one time on your page.
These are a set of files you’ll need to run your component on the web. One is a polyfill for the Web Animations api, the others are a player and a button class.
The files are:
The polyfill for the Web Animations api. This file comes from [W3C's Github Page](https://github.com/web-animations/web-animations-js), and is maintanied by W3C.
This file is the thing that actually controls your animations. If you want to learn some more about it, have a look at our player documentation.
This file is the button class that contains your component and handles user clicks. It also contains a player that drives your animation.
If you have questions about this, please reach out either: