Try it: Add custom code

We’re transitioning to a new UI, and are in the process of updating our Webflow University courses and videos.

Try it: Add custom code

Test real, working code in a layout using the Code Embed element

Try it: Layout-level code (map embed)

First, you’ll embed something visible directly into your layout using the Code Embed element. We’ll use a simple embedded Google Map, and you can place it anywhere on the page.

You don’t need a finished site for this. A blank or nearly blank project works just fine. The goal is to get hands-on and see custom code in action on a real site.

Step 1: Add a Code Embed element

Open any page in your site.
Add a Code Embed element to the page.
Place it inside a section, container, or div so it has some space.

Step 2: Paste the embed code

Copy and paste the code below into the Code Embed element:

<iframe
  src="https://www.google.com/maps?q=New%20York%20City&output=embed"
  width="100%"
  height="300"
  style="border:0;"
  loading="lazy">
</iframe>

Save and close the embed.

Step 3: Preview the page

Enter Preview mode. If you don’t see the map right away, make sure Enable custom code is turned on.

You’ll know this worked if you see a map showing New York City embedded directly on the page.

Google Map embedded directly into a Webflow page using a Code Embed element.

Extras:

Try changing the height value in the code from 300 to 400 and see how it affects the layout.
Try changing the src url to change the city or address displayed on the map.