Skip to main content

Implement builder using HTML

You can use good old HTML to implement the builder. To do so, you need to load the builder library from a CDN or host the library yourself. If you want to use a CDN, you could go with jsDelivr or unpkg.

📄 Basic implementation​

This code example shows the minimal code required to show the builder using simple HTML.

<html>
    <body>
        <!-- Load the Tripetto builder library -->
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/builder"></script>

        <!-- Fire it up! -->
        <script>
            Tripetto.Builder.open();
        </script>
    </body>
</html>

Run Try on CodePen

👩‍💻 Use a custom HTML element​

By default, the builder opens in the body element of the HTML document. If you want to use a custom HTML element for the builder, you should supply the desired element to the element property as shown in the example below:

<html>
    <body>
        <!-- Load the Tripetto builder library -->
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/builder"></script>

        <!-- This div will host the builder -->
        <div id="CustomElement"></div>

        <!-- Fire it up! -->
        <script>
            // Create a new builder instance
            const builder = new Tripetto.Builder({
                element: document.getElementById("CustomElement")
            });

            // Open the builder
            builder.open();
        </script>
    </body>
</html>

Run Try on CodePen

warning

When you specify a custom HTML element for the builder, you need to make sure to set the position style attribute of that element to absolute, relative, fixed or sticky. Otherwise it is possible that the builder is displayed outside of the element boundaries.

📦 Loading blocks​

By default, the builder does not contain any blocks (question types). So, you need to load the desired blocks (more about making blocks available to the builder here). The following example shows how to load a set of stock blocks (blocks built and maintained by the Tripetto team):

<html>
    <body>
        <!-- Load the Tripetto builder library -->
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/builder"></script>

        <!-- Load blocks -->
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-calculator"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-checkbox"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-checkboxes"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-date"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-device"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-dropdown"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-email"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-error"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-evaluate"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-file-upload"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-hidden-field"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-mailer"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-matrix"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-multiple-choice"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-number"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-paragraph"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-password"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-phone-number"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-picture-choice"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-radiobuttons"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-rating"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-regex"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-scale"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-setter"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-signature"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-statement"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-stop"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-text"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-textarea"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-url"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-variable"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/block-yes-no"></script>

        <!-- Fire it up! -->
        <script>
            Tripetto.Builder.open();
        </script>
    </body>
</html>

Run Try on CodePen

🌎 Self-host the library​

If you want to host the builder library on a custom domain, you must publish the required JavaScript file to that domain. To do so, download the following file (right-click and select save as) and publish it to the desired domain. Update the src-attributes of the script tags, so it points to the domain and location of the JavaScript file.

📥 https://unpkg.com/@tripetto/builder

⏭️ Up next​

Now you've got the basic implementation for the builder up and running, dive deeper into the following topics:

Loading and saving​

Miscellaneous​

Customization​