When you want to embed an item (like a calendar widget) into your Help Center page, you'll need the embed code for that item. This article will walk you through both simple and more advanced methods for embedding content, allowing for varying levels of customization.

1. Embedding Code Using the Welcome Message Box

If the Welcome Message box is not already in use, you can easily embed the code here. This method automatically places the content within a divider box, and you can also add a title in place of the Welcome Message title.

Steps:

1. Navigate to Admin > Help Center > Help Center Design.

2. In the "Welcome Message" section, paste your embed code.

This will display the embedded content within the Welcome box. You can add a title to the Welcome box as well.

For example, if embedding a calendar, it would appear as shown below:

2. Embedding Code Directly into the Template

If the Welcome Message box is already in use, or if you need more flexibility in placement, you can embed the code directly into the HTML template.

For this example we’ll add the calendar widget below the welcome message on the Help Center’s Home Page:

Steps:

1. Navigate to Admin > Help Center > Help Center Design > Template Editor.

2. Open the home.html template, which you can find in the "Portal" folder.

3. Locate the section of the HTML where you'd like to insert the embedded content. To place it below the Welcome box, find the relevant section in the code.

You can simply paste the embed code where needed and save the template. This will render the content on your Help Center's home page. For this example, however, we’ll add it below the welcome message:

Which will render on the Home Page like so:

3. Customizing the Embedded Content

To ensure the embedded content blends seamlessly with the rest of your Help Center, you can wrap it in a divider that matches the existing design elements. We’ll reuse the class used for the Welcome Message box so they look the same.

<div class="dp-po-homepage-welcome-box">
  <div class="dp-po-block">
    <!-- Embed code goes here -->
  </div>
</div>

Important: Always ensure that HTML elements are properly opened and closed. For instance, for every <div> tag, there should be a corresponding closing </div> tag.

If you want the content (like a calendar) to span the full width of the container, set the width to 100% in the embed code:

<iframe src="your-embed-url" width="100%" height="600"></iframe>

4. Adding a Title to Your Embedded Content

To add a title above the embedded content, you can modify the code as follows:

<div class="dp-po-homepage-welcome-box">
  <div class="dp-po-block">
    <div class="dp-po-title">
      <h2 class="dp-po-title-text">Company Events</h2>
    </div>
    <!-- Embed code goes here -->
  </div>
</div>

This will display a title above your embedded content, making it clear what the content is for.

Summary

These methods allow you to easily embed content within your Help Center pages, either by using the Welcome Message box or by directly editing the HTML template. This will help you customise your content to fit seamlessly into your Help Center's design.