Dynamically Rendering Widgets
tip
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.
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.
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:
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.
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.
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.
tip
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:
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.
Final Result#
The resulting HTML code is shown below. Please feel free to copy and make use as your own.