The HTML (Embed) Section

The HTML (Embed) Section is the perfect place to house custom code that will pull information onto your page that exists elsewhere on the internet. From things like Google Maps, to forms from other church management software platforms, to videos hosted on a platform like Vimeo or Youtube, to a live stream hosted on a platform like Facebook.

To begin, click on Pages in Nucleus Web. Click here for a quick link. Then click Edit on any page, or click + Create New Page to start afresh and follow the instructions on the screen.

Note: Editing a section involves much more than focusing on the specific type of section. For instance, there are a slew of design and layout options you can choose for every single section you add to a page. This guide focuses specifically on the uniqueness of the HTML Embed Section. To learn more about how to add and edit a section in general, click here.

In this guide, we'll cover the following topics. Click on any one to jump ahead.

Add An HTML (Embed) Section To A Page

As explained in this guide [COMING SOON], Nucleus pages are built using sections. There are several types of sections to use, but we’ll focus on adding an HTML (Embed) Section to a page.

To add an HTML Section to a page, go to your Pages Panel here and click on any page to edit it. (If you don’t have any pages to edit, you can always edit your Homepage. Alternatively, you can create a new page. Click here to learn more about how to do that.)

While in the Page Editor, click on + Add New Section.

Then, click to add the HTML (Embed) Section.

Next, select a layout for how the information in your section will be displayed.

Note: Many section layouts allow you to showcase text along with whatever type of specific media/content you want to add (like your HTML code). This guide will only explore the specifics of embedding HTML code. The text features rely on how the Information Section functions. To learn more about adding text to a section (and subsequently learn more about the Information Section), click here.

Finally, give your section a name. (This is purely for admin organization purposes, so it doesn’t have to be anything fancy.)

Then click Save & Start Editing.

Note: This article will only focus on the unique functionality for the HTML (Embed) Section. To learn more about how to edit the layout and design of a section, click here.

Add Your HTML Code

While editing your HTML Section, click + Add New.

Here, you can add your first snippet of code.

First, give your code a name. (This is just for organizational purposes. It will not be showcased on your webpage.)

Next, choose an option for the Sizing of your code. This tells Nucleus how you want the code to fill the section space:

  • If you don’t want Nucleus to automatically try to format your code in a way that will look best on your website, choose Original (don’t change). Whatever sizing that your code tells Nucleus to present the embed will be exactly how it showcases on your webpage.
  • If you want Nucleus to automatically adjust your embed code to respond to whatever size of screen someone is viewing your webpage from, choose Responsive (try to fill area).
  • If you’re specifically embedding a video, you can choose Responsive Video (16:9) if you want to ensure your video not only fills the space of your section according to the size of screen someone is viewing your webpage from, but also to ensure your video displays with a widescreen ratio sizing.
  • If you’re specifically embedding a video, you can choose Responsive Video (4:3) if you want to ensure your video not only fills the space of your section according to the size of screen someone is viewing your webpage from, but also to ensure your video displays with a regular/original screen ratio sizing
  • Lastly, we provide an option called Custom (Raw). In any of the other options, Nucleus does a bit of work behind the scenes to help your custom code load as best as it can, including guardrails that help protect your site from breaking while loading the custom code. In some rare cases, those guardrails may prevent the desired outcomes of how your custom code loads. Choosing this option removes those guardrails, so it's best not to select this option if you're unfamiliar with custom code.

Below this, you can paste your code, or write it from scratch if you’re a true keener 🤓 Then, click Save Now.

At this point, you can Add Another snippet of code You can add as many snippets of code as you want in your HTML (Embed) Section.

Manage Your HTML Embeds

If you have more than one snippet of code, you can arrange them in the order you want them to appear in your section. Simply click the two lines beside a line of code, drag it up/down, and drop it in your desired spot.

To Edit or Delete a snippet of code, click the down arrow on a line of code and select your desired option.

Additionally, you can click Customize Display to choose how you want your custom code to load on your site: with or without padding.

This padding only surrounds whatever it is that you're embedding on your site, not the entire section itself.For customizing how your overall section looks and feels, click Change Layout at the top.

Preview Your Page

In all places where you can create and edit your web pages or design options, Nucleus operates with an autosave feature. At any point in time, you can choose to preview your website to see how your changes in your Dashboard are affecting your website as a visitor to your site would see it.

Simply click Preview in the top right corner.

This will open a new tab in your browser and will take you to your Nucleus Web preview URL.

To go back to your Dashboard, click on the appropriate tab in your browser.

Note: Clicking on the Preview button will always open a new tab, so unless you close out each preview tab opened, you’ll end up with several tabs opened with different iterations of how you’ve changed the design of your website.

Embed A Map From Google

To embed a location from Google Maps, click on the location (presumably your church) on Google Maps’ website.

In the left sidebar, click the Share button (i.e. the one with three circles connected by two lines).

Next, click Embed a map.

Then, click COPY HTML.

Now you can go back to your Nucleus Dashboard and paste the code in your HTML (Embed) Section.

You’re more than welcome to leave the Sizing as Original, but depending on what size of device someone is viewing your webpage, the map may appear small or partially cut off. So we recommend choosing Responsive (try to fill area).

Once happy with your changes, click Save Now.

Embed A Video From YouTube

To embed a video from YouTube, find the video directly on YouTube’s website.

Click the Share button below the video.

Select the Embed option.

Below this, you can change a couple of different options. If you’d like the video to start at a specific timestamp (rather than starting from the very beginning), check the Start at box and then enter in the timestamp you want the video to start playing from.

Below this, you can choose whether you want YouTube’s video player controls to show or not. (This will be selected by default, which allows people to pause the video, add closed captions, etc. while viewing the video on your webpage.)

Additionally, you can select Enable privacy-enhanced mode which means that “YouTube won’t store information about visitors on your website unless they play the video.”

Once you’re happy with your settings, click Copy.

Now you can go back to your Nucleus Dashboard and paste the code in your HTML (Embed) Section.

Next, in the code itself, find width="560" height="315" and delete it from the code.

Then, select one of the Responsive Video sizing options (with the ratio matching the original video from YouTube). Most of the time, this will be the 16:9 option.

Lastly, click Save Now.

Embed A Video From Vimeo

To embed a video from Vimeo, find the video directly on Vimeo’s website. Depending on where you’ve found the video on Vimeo, it might look a bit different:

Finding The Embed Code: Option 1

Click the Share (i.e. the paper airplane) button in the top right corner of the video.

Select the Embed (i.e. the </> image) option.

Next, click Copy.

If you’d like to see more options to customize the embed code, click Customize this embed text below. This will take you to the second option below 👇

Finding The Embed Code: Option 2

Click the Share (i.e. the paper airplane) button below the video.

You can click on the code in the Embed field, and the entire code will be highlighted. Press Command + C on a Mac or Ctrl + C on a PC to copy the code.

Or, if you’d like to customize the code itself (which will change the way the video will appear and/or what options are available on the video player), click + Show options.

Below the video, there are several options to choose from. Select (or deselect) the ones you wish. Each option you change will make changes to the embed code, so if you make any changes, be sure to re-copy the code in the Embed field if you copied it earlier.

Note: Do not change the Size to Responsive. There are steps below to help with this, specifically for embedding Vimeo videos in Nucleus Web.

Pasting The Embed Code

Once you’ve copied your embed code, you can go back to your Nucleus Dashboard and paste the code in your HTML (Embed) Section.

Next, name your snippet of code. Additionally, make sure to choose either the 16:9 or 4:3 Responsive Video sizing option (whichever one makes sense for the video you’re embedding).

Now, in the code itself, find width="640" height="360" and delete it from the code.

Lastly, click Save Now.

What Next?

The HTML (Embed) Section isn’t the only type of section you can add to a page. Check out some of these other guides to learn about different types of sections you can add to a page in your Nucleus website:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.