Step 1: Generate the Embed Code in LibGuides

1. Create the Widget.

2. In the configuration settings, check the box that says "Include jQuery Library".

   1. The JQuery is only needed for the first widget on the page.

3. Copy the generated embed code to your clipboard.

Step 2: Adding the Widget

Option A: Directly into a MODX Resource (Page)

1. Open the target Resource in the MODX Manager.

2. Ensure Rich Text is turned OFF for this resource.

3. Paste your copied embed code directly into the main content field.

Option B: Into a MODX Chunk (For Reusable Layouts)

1. Create a new Chunk.

2. Paste the embed code directly into the Chunk code field.

3. To use it on a page, you will call this chunk using [[$your-chunk-name]].

Step 3: Style the Content Box

To ensure the LibGuides box matches our website's Styling , you need to apply our custom styles.

1. Go to the very last line of the embed code you just pasted (either in your Resource or your Chunk).

2. Hit Enter to create a new line at the bottom, and paste this MODX chunk tag:

   [[$libguides-content-css]]

   Why the chunk step matters: The [[$libguides-content-css]] chunk overrides standard LibGuides styling so the embedded box natively matches the website styling. Putting it at the end widget code ensures it takes priority in the browser layout.

---

Samples

• LibGuides Content Box (LG Styling)
• LibGuide Content Box (Clean)