Skip to main content

Custom Embed It Widgets

  • Updated
This article provides a clear guide for creating and managing custom Embed It widgets. While this process is straightforward, it does require basic technical skills and an understanding of embedded code.

Overview

Custom Embed It widgets is a paid feature. Please contact your customer success manager for pricing information.

The custom widget functionality allows admins to create and embed other external content that aren't part of the prebuilt list. 

Here are examples of custom widgets that can be created:

  • Discussion Forum Threads: Embed dynamic discussion forum threads from platforms like Khoros, Discourse, etc. directly onto your chapter pages.
  • External News Feeds: Embed external news feeds from trusted sources, delivering the latest industry updates, news, and articles directly on your chapter pages.

How Do Custom Widgets Work?

Custom widgets allow Admins to seamlessly integrate content from diverse sources onto chapter pages. These widgets comprise of two fundamental elements:

  1. Embed code: The embed code is typically provided by the external content source platform such as YouTube, Twitter, Instagram, and more. It's a piece of code or a URL specific to the content you want to include, and it acts as the connection point between your chapter page and the external content source. 
  2. Variables: Variables are an optional and powerful feature within custom widgets, designed to facilitate effortless configuration and content customization. Variables give admins the flexibility to let organizers tailor content at the chapter level within the chapter settings. 

After creation and activation, these widgets are available in the Chapter Page Builder tool, letting admins add them to chapter pages easily.

Getting Started - Obtaining Embed Code from your content platform

To embed content from your chosen platform, you must first obtain the embed code that will be added to your custom widget. Follow these generic steps to obtain the embed code from your source platform:

The following steps are generally applicable across different content platforms, but the specific locations and options may vary. 

  1. Log In to the Platform: Access the content platform where your desired content is hosted. Ensure that you are logged in with the necessary permissions.
  2. Locate the Content: Navigate to the specific content you wish to embed. This could be a video, social media post, or any other type of content available on the platform.
  3. Find the Share or Embed Option: Content platforms typically provide a "Share" or "Embed" option near the content you want to embed. Look for icons like "Share," "< >," or "Embed."
  4. Click the Embed Button: Click on the Embed or similar button to access the embed code. This will open a dialog or box with the code you need.
  5. Customize if Necessary: Some platforms offer customization options for the embed code, such as selecting the size or appearance of the embedded content. Make adjustments according to your preferences.
  6. Copy the Embed Code: Select the entire embed code or click a Copy button if available. The code is usually provided in HTML format.

Always ensure that you are complying with the platform's terms of use and copyright restrictions when embedding content from external sources.

Creating and Enabling Custom Widgets

Once you have obtained the embed code from your chosen platform, you are ready to proceed with creating a custom widget.

To create and enable a custom widget, follow these steps:

  1. Navigate to the Admin Dashboard: Access the admin dashboard and select the Page Builder tab in the left navigation.
  2. Access the "Widgets" Tab: Click on the Widgets tab located at the top of the page.
  3. Create a New Widget: In the top right corner, click New widget.
  4. Edit Modal: The Edit modal will pop up, allowing you to customize your new widget
  5. Enter a Name: Provide a name for your custom widget at the top of the modal.
  6. Upload an Icon (Optional): While optional, it is highly recommended to upload an icon for your custom widget. This makes it easier to identify the widget within the list of widgets.
  7. Select "Available On": From the Available on dropdown, choose one of the following options:
    • Disabled: This option prevents the widget from appearing as a component within the chapter page builder canvas. Useful if you are not ready to use the widget.
    • Chapter: Selecting Chapter enables the widget as a component option within the chapter page builder canvas.
  8. Paste the Embed Code: Select Code and paste the embed code you obtained from your source platform into the provided input box.
  9. Preview: Click Preview to verify that the code is functioning correctly and that the desired content is being pulled in as expected.
  10. Adding Variables: Please see Variables section below for more information
  11. Save Widget: Click Save to preserve your widget settings and embed code.

Once custom widgets are saved and enabled, they become readily available as components within the chapter page builder tool. To learn more about detailed instructions, see Chapter Page Builder-Layouts, Elements and Components help doc. 

Variables

Setting up custom widgets without variables locks the widget to display the same content or use the same settings consistently wherever it's added. This rigidity is determined by a static embed code entered by the admin during widget setup and ensures uniformity of how the widget shows up across all chapter pages.

Adding a variable to a custom widget's embed code introduces flexibility. It establishes a way to easily configure the widget without having to work directly with the embed code. This empowers admins to grant organizers the capability to precisely customize and adjust widget content or other settings at the chapter level, all within the chapter settings. This adaptability ensures that the widget seamlessly caters to individual chapter needs and preferences through a user-friendly experience.

How do Variables Work?

Variables serve as dynamic placeholders within the custom widgets embed code, allowing for the flexible customization of content or settings without the need for manual code changes. 

Here's how they function:

  • Dynamic Customization: Variables replace static values in the embed code, making it possible to dynamically populate these values. This dynamic customization is especially valuable for content or settings that may vary from one chapter page to another.
  • Example Without a Variable: Consider a YouTube playlist embed code without a variable. In this case, the playlist ID is fixed within the code, and it always displays the same playlist represented by the code highlighted below. Changes or customization would require manual code editing. 
    • <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?si=TBuG8SHN356ReP4b&amp;list=PLUC9Vz9R3tpLkRC8dNf5dOpL-O-OJ944y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  • Example With a Variable: When a variable is introduced, the code becomes more adaptable. In the YouTube playlist embed code example with a variable, the static playlist ID is replaced with the variable placeholder, indicated by {{playlist-id}}. Organizers, through an intuitive interface in the chapter settings, can easily input their preferred playlist ID. This dynamic replacement allows organizers to showcase the YouTube playlist that best suits their chapter's needs.
     
    • <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?si={{playlist-id}}&amp;list=PLUC9Vz9R3tpLkRC8dNf5dOpL-O-OJ944y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Creating Variables

To create variables for custom widgets, follow these steps:

  1. Navigate to the Admin Dashboard: Access the admin dashboard and select the Page Builder tab in the left navigation.
  2. Access the Widgets Tab: Click on the Widgets tab located at the top of the page.
  3. Edit a Custom Widget: Click Edit next to a custom widget.
  4. Edit Modal: The Edit modal will pop up, allowing you to add variables to the widget.
  5. Access the Variables: Scroll down to the Variables section and click on the expand icon.
  6. Adding Variables: Click Add variable and take the following steps: 
    1. Enter a Name (required):  Choose a name that intuitively indicates to the organizer the type of variable the custom widget will accept. This ensures clarity and ease of use.
    2. Enter a Default value (optional) - Default values are optional but highly recommended. They guarantee that the custom widget will always display content or have a default setting wherever it is added. The default value can be replaced if the organizer inputs a new value for the variable within the chapter settings. However, if the default value is left blank, and the organizer doesn't provide a value, the widget won't appear on the respective chapter page.
    3. Add Short Description (optional) - Enter a description that outlines the exact format required for the variable and its purpose. This description will be presented to the organizer via the chapter settings (refer to the chapter variables section below), offering valuable guidance and context for entering the correct variable. It ensures a smoother and error-free customization process.
    4. Click the Confirm chip - Your variable is now ready to be inserted into the embed code.

Add Variable to Code 

Once you've created a variable, you're ready to integrate it into the embed code, replacing the static value you aim to make dynamic. This process involves the following steps:

  1. Copy the variable: Click the Copy button to the left of the variable name. This will ensure you are using the exact format of the variable to be set in the embed code. 

  1. Locate the static value:  Locate the part of the embed code where the static value needs to be replaced. This is usually where you want the customization to occur.
  2. Insert the variable: Insert/paste the variable in place of the static value.
  3. Preview the widget: Click Preview to ensure that the code still pulls in content correctly using the default value.
  4. Save the widget: Click Save. Your custom widget is now ready to be easily configured by organizers through an intuitive interface in the chapter settings.

Editing and Managing Variables 

Once you've created a variable, you can also choose to edit or delete it later. 

Follow these steps to edit a variable:

  1. Access the variable: In the widget edit modal, scroll down to the Variables section and find the variable you would like to edit.
  2. Edit the variable: Click on the Edit icon
  3. Modify settings: Modify the applicable variable settings and click the Confirm icon
  4. Save the edit: Click Save 

Follow these steps to delete a variable:

  1. Access the variable: In the widget edit modal, scroll down to the Variables section and find the variable you would like to edit.
  2. Edit the variable: Click on the Delete icon
  3. Modify settings: Modify the applicable variable settings and click the Confirm icon
  4. Save the edit: Click Save 

Adding Custom Widgets to Chapter Pages

Once you’ve enabled and configured custom widgets via the Admin Widget tab, the widgets are ready and available to be added to your chapter pages via the chapter page builder canvas.

To learn more about detailed instructions, see Chapter Page Builder-Layouts, Elements and Components help doc.