Integrating an 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:

  • The code below contains variables from your Flow file.
  • That means you can copy and paste it verbatim into your project.
  • We used our code export engine to produce it, so you can be sure that it is exact

Custom Code

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: Hoshi.

Let’s get to it.

Folder Breakdown

When you export a project you’ll see the following structure:

  • Hoshi (Folder)
    • css (Folder)
    • FlowCommon (Folder)
    • fonts (Folder)
    • img (Folder)
    • index.html
    • js (Folder)
    • readme.html

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.

Integrating a Single Instance

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.

  1. The first step is to move the entire Hoshi folder to a location of your choice inside your site’s file structure.
  2. Add the following code to the <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>
                                        
  3. Also, add the following code to the <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 hoshiResourcesPath = ".";
            let hoshiScript = [`${hoshiResourcesPath}/js/hoshiToggleButton.js`];
            loadScripts(hoshiScript)
        </script>
                                        
  4. Integrate your button into your page by copy/pasting the following line of code into your page:
                                        <hoshi-button id="hoshiButton"></hoshi-button>
                                        
  5. Refresh the page to see the 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 the hoshiResourcesPath.

  6. To make your button actually do something, add some logic to the callback method:
    
        function callback() {
            //put your logic code here
        }
                                        

Details For What You Just Did

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.

hoshiResourcesPath is where you specify the path to the Hoshi folder. You must update the value of this variable based on the new location you have chosen for your Hoshi folder.

The callback() gets triggered when the button’s animation completes.

Multiple Instances

If you want multiple instances of a buttons on a page, do the following:

  1. Create a second (third, or fourth…) instance of your button in instances.js by creating another ToggleButton variable with a different ID. For example:
                                                const hoshiButton = createTextInput(
          "hoshiButton",
          callback,
          hoshiResourcesPath,
          HoshiTimeline,
          HoshiReverseTimeline,
          "Name"
        );
        
                                        
  2. Add another button element to your page which uses the new ToggleButton variable you created in the previous step. For example:
    <hoshi-button id="hoshiButton"></hoshi-button>
  3. Refresh your browser and enjoy your second ToggleButton!

For each new ToggleButton instance you would like to create, repeat the steps above using new variable names.

Multiple Types

If you want a different toggle button (with different timelines) on your page do the following:

  1. Export another timeline
  2. Delete the FlowCommon folder from the exported code
  3. Add the folder to your project, right next to your first Hoshi folder.
  4. Hook everything up, by following the steps in the first section.
  5. Refresh your browser.

Repeat the steps above for each additional type you would like to integrate into your page.

Make Things Global

Best practice is to put the Hoshi and FlowCommon folders in a directory on your site that can be accessed from any other page.

Remember to modify the commonFolderPath or the hoshiResourcesPath 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.

FlowCommon

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:

web-animations.min.js

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.

player.js

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.

ToggleButton.js

This file is the button class that contains your component and handles user clicks. It also contains a player that drives your animation.

Connect With Us

If you have questions about this, please reach out either: