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.
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.
For state-based rendering languages like React, this functionality may be already built-in. Here's a live example using the tabs from this documentation:
- Calendar View
- List View
This walkthrough provides an overview of how to create the same experience as above in the simplest way possible, agnostic to what framework you're using. The end result will be an HTML page that includes two tabbed widgets, switching between an event calendar and an event list.
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
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:
URL being the URL option you'd like to show when the user enters the page (either
ID being a unique reference ID for the iframe that you'll use in the function call.
We'll need a function that renders the different widgets inside your iframe. Fortunately, we can access the URL of the iframe via the
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.
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.
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.
Now that you've built the core dynamically rendering widgets, you can add in optional 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 toggle the tabs:
Once you have tab toggle, your onclick event will need to call a wrapping function that toggles the tabs and renders the widget:
And the interactive element will need to call itself and the container id in the call:
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.
The resulting HTML code is shown below. Please feel free to copy and make use as your own.