Embedding HTML Widgets (Advanced)

Embedding HTML widgets into your Streamline site allows you to extend the functionality of your website by incorporating third-party services, interactive tools, and more. Follow these steps to easily embed HTML widgets on your site:

What Are HTML Widgets?

HTML widgets are small applications or elements that are embedded in a web page. These can include things like calendars, forms, maps, weather apps, and even social media feeds. They are typically added through an iframe or an embed code provided by the widget’s provider.

How to Embed HTML Widgets in Your Streamline Site

1. Locate the HTML Widget/iFrame Code

   • Go to the website or service providing the widget (e.g., Google Maps, Social Feeds).

   • Look for an option to “Embed” or “Get HTML Code.”

   • Copy the provided HTML or iframe code.

2. Edit Your Streamline Page

   • Click “Edit” on the page where you want to add the widget/iframe.

   • Navigate to the section where you want the widget.

   • Click on the “+” icon.

   • Select the HTML widget icon.

3. Paste the Code

   • Paste the copied HTML or iframe code directly into the content area while in HTML view.

4. Add Accessibility Support

   • Always include a title attribute for iframes: 

     <iframe src="your-widget-url" title="Google Calendar of upcoming events"></iframe>


   • The title should clearly describe the content (e.g., “Map of District Office Location” instead of just “Map”).

   • If the widget contains images or icons, ensure they have alt text or a text-based alternative.

   • Verify that the widget is navigable by keyboard.

5. Save and Preview

   • Save the page and confirm the widget displays correctly.

   • Click “Save and close” to make the changes live.

   • Preview the page to ensure the widget looks good and is accessible.

Best Practices for Embedding Widgets

• Adjust Size and Alignment: Modify the height and width attributes so the widget fits neatly within your design. We recommend using 100% for widths for mobile responsiveness

• Monitor Page Speed: Widgets can slow down load times; limit them on high-traffic pages.

• Prioritize Accessibility:

  • Use descriptive titles for iframes.

  • Ensure widgets do not trap keyboard focus.

  • Provide alternative text or transcripts for media-based widgets.

  • Test with a screen reader whenever possible.

Examples of Useful HTML Widgets

• Calendars: Integrate scheduling or event calendars (Google Calendar, Outlook).

• Maps: Add an interactive map for your office or facility locations.

• Weather Widgets: Show current weather conditions in a specific region.

• Forms: Embed contact or survey forms.