Here’s a step-by-step guide to set up an EmbedIt Widget from Pagebuilder using Khoro’s ActiveCast option to retrieve the latest threads in a discussion:

Create a Custom Widget in Bevy:

1. Go to your Bevy instance’s Custom widgets page
2. Click the “New widget” button.
3. Name the widget (for example, “ZD Khoros”) and make it available in the desired chapter.

Retrieve the ActiveCast Code:

1. As an administrator of the Khoros Community, log in to the Khoros platform.
2. Open a new tab and navigate to ActiveCast settings.
3. Select a board and configure the settings (as shown in the image below).
4. Copy the ActiveCast code to your clipboard. It will look similar to the following:

<script type="text/javascript" id="lia-ac-lt-YNPforum-board" 
  src="https://xxxx.stage.lithium.com/t5/activecast/latestthreadspage?activecast.parent_element_id=lia-ac-lt-YNPforum-board"></script>
<script type="text/javascript">
  LITHIUM.ActiveCast.getLatestThreads('YNPforum-board', {
    "parentElementId": "lia-ac-lt-YNPforum-board",
    "displayNodeTitle": false,
    "hrefTarget": "_blank",
    "maxNumberOfMessages": 3,
    "numBodyWords": 10,
    "displayNodeLabel": false
  });
</script>

Configure the Custom EmbedIt Widget:

1.  

   Go back to the previous tab with the Custom EmbedIt widget.
2. Paste the ActiveCast code into the “Code” section of the widget.
3. Save the widget.

Add the Widget to Page Builder:

• Access the Chapter’s Page Builder editor (as explained in Chapter Page Builder).
• Add a new Container from the left panel and set its max-width to 1170px (to match the rest of the container).
• Drag the custom widget (“ZD Khoros”) from the left panel into the Container you created.
• The widget should now preview the threads you saw in the widget preview.
• Save the template and navigate to the chapter page.

Apply Bevy Instance Styles:
The current format may not match the font family and hues in your Bevy instance. EmbedIt widget is technically an iframe, styles are not automatically inherited. Retrieve the general styles from your Bevy instance by using the CSS import function. Edit the custom widget and add the following snippet at the top of the code:

<style>
  @import url("https://bevyinstance.com/config/style/theme");
  @import url("https://bevyinstance.com/config/style/generalstyles");
  body {
    background: transparent;
  }
</style>