Link Search Menu Expand Document

Dynamically Rendering Widgets

This walkthrough is for web-based widget solutions. For more general setup information regarding a web-based widget, please go to Connecting the Widget to your Website.

Overview

There are cases where you might want different widgets to appear within the same web experience, depending on user selection. Rather than load multiple widgets on the same page, or redirect to different pages, you can display based on Dynamic Rendering.

A working example, complete with code comments, can be found at the following link:

Example


Required Steps

To start, you should have multiple widgets that you’d like to render on the page. You can learn more about customizing your widget in the Integration Guides.

The widgets should be provided to you as a URL. For the sake of this walkthrough, they’ll be called widget1 and widget2.

You’ll also need access to the code for the webpage that you’d like to add the widgets to, and some basic JavaScript/HTML knowledge. If your site is running on another framework - no worries; although you won’t be able to use the code examples, the functionality still applies.

Adding HTML

Our widgets are rendered via an <iframe> html element on your site. The iframe code you’ll add to your HTML will look something like this:

<iframe src="URL" id="ID" height="600px" width="100%" scrolling="yes" />

With URL being the URL option you’d like to show when the user enters the page (either widget1 or widget2), and ID being a unique reference ID for the iframe that you’ll use in the function call.

Adding JavaScript

We’ll need a function that renders the different widgets inside your iframe. Fortunately, we can access the URL of the iframe via the src attribute.

function renderWidget(id, url) {
    document.getElementById(id).src = url;
}

In this function, we’re providing the id of the iframe as well as the url that we’d like to change it to. The function can either be added to and referenced from its own .js file or be included in a <script> tag in the HTML.

Adding Interaction

Now that we have the widget as well as the function to render it, we’ll need a way for the user initiate the action. You can use any type of interactive element as long as it can trigger an event (such as radio buttons, dropdowns, even inputs or clickable sections) - in this example, we’ll be using buttons.

<button onclick="renderWidget('ID', 'widget1')">Render Widget 1</button>
<button onclick="renderWidget('ID', 'widget2')">Render Widget 2</button>

With ID being the ID of the iframe.

That’s it! If you click a button, you’ll re-render the widget with the selected URL.

Additional Options

Now that you’ve built the core dynamically rendering widgets, you can add in optional customization.

Customization

The example has some basic classes for you to build off if you’d like, as well as highlighted sections that show what is and is not editable on the page.

Since the interactive inputs are built directly in the HTML, you have full control of how the elements look and feel. Although this example uses a tabbed approach, feel free to stylize the components to render in any manner you’d like. We’d recommend adding at least a clear header and descriptor explaining the core functionality of the widget (to find and book parking), but how you do so is up to you.

Anything inside the <iframe> component cannot be manipulated or stylized. Anything surrounding the widget is completely customizable.

Disabling the Active Input

To reduce the number of loads required for the iframe component, it’s recommended to disable the input for the “active tab”, or currently-rendered widget. This can be handled a variety of ways depending on your framework; in this case, the example is in plain JavaScript.

To toggle the tabs:

function toggleTabs(element, tabContainerId) {
    // Get all of the tabs within the tab container, specified by the tabContainerId
    const tabs = document.getElementById(tabContainerId).childNodes;

    // Enable every tab except for the one that was clicked
    tabs.forEach(tab => {
        tab.disabled = (tab == element);
    });
}

Once you have tab toggle, your onclick event will need to call a wrapping function that toggles the tabs and renders the widget:

function tabSelected(element, tabContainerId, widgetId, url) {
    renderWidget(widgetId, url);
    toggleTabs(element, tabContainerId);
}

And the interactive element will need to call itself and the container id in the call:

<div id="tabContainer">
    <button onclick="tabSelected(this, 'tabContainer', 'ID', 'widget1')">Render Widget 1</button>
    <button onclick="tabSelected(this, 'tabContainer', 'ID', 'widget2')">Render Widget 2</button>
</div>

Alternatively, you can create an Event Listener to look for onclick events rather than passing in the element into the call.

Storing the widget URL

If you’re using a CMS tool, it’s highly recommended to include the widget urls as an input option so that you can swap out the the tabs on the fly. Although it’s rare for a widget to change once added, this provides more flexibility should you like to add or change the UI components, venues, parking locations, etc.