Media and Embedded Content
      Back to home
      1. Streamline Support
      2. Creating Content
      3. Media and Embedded Content

      Embedding HTML widgets (Advanced)

      It's easy to embed any widgets you can get your hands on if they are in HTML format.

      October 2024

      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. Click “Edit” on the page you want to add the widget/iframe to
        • Navigate to the section where you want to add the widget.
        • Click on the “+” icon
      3. Click on the HTML widget icon
        • Paste the copied HTML or iframe code directly into the content area while in HTML view.
        • Ensure you add a title to keep the iframe and any other embedded content ADA compliant. To do this simply add “title=’Enter name of iframe here’”
          1. Note: Change the name to a more descriptive title that applies to the iframe content you embed.
      4. Save your HTML
        • After pasting the code, save the page & ensure the widget displays correctly.
        • Click “Save and close” to make the changes live to the page!
      5. Preview and make any edits
        • You’ll be able to see the embedded content immediately

      Best Practices for Embedding Widgets

      • Adjust Size and Alignment: You can customize the height and width attributes in the iframe code to fit the widget properly within your design.
      • Monitor Page Speed: Some widgets can slow down page loading times, so use them sparingly, especially on pages where speed is crucial.
      • Most importantly, check for Accessibility: Make sure the widget complies with accessibility guidelines, such as providing alternative text for visual elements.

      Examples of Useful HTML Widgets

      • Calendars: Integrate scheduling or event calendars, such as Google Calendar or Outlook.
      • Weather Widgets: Show current weather conditions in a specific region.

      By embedding HTML widgets, you can enhance the functionality of your Streamline site and improve user engagement with interactive elements.