BetaHelp
ESSign up

Add Custom code and Embed blocks to your pages

Embed Google Maps, external calendars, audio players, or HTML widgets using the Custom code (Embed) block on your pages.

On this page

When you need to display an external tool right inside a section of your page—such as an interactive Google Map, a Spotify player, or a booking widget from another platform—you can use the Custom code (Embed) block. This component lets you insert HTML, CSS (<style>), and JavaScript (<script>) snippets or <iframe> tags while controlling their exact position and size on the canvas.

Insert the Custom code (Embed) block into a section on your page

To place an embed inside the layout of any page:

  1. Open your site in the visual editor and go to the page and section where you want to add the widget.
  2. In the left toolbar, click Insert (+).
  3. Among the available components, select Custom code (Embed) and drag it into the desired container or column on the canvas.
  4. With the block selected, look at the right inspector panel and click Edit the code inside the Custom code group to open the code editor.
  5. Paste the HTML or <iframe> snippet provided by the external service and apply your changes.
  6. Adjust the block’s Width and Height under the Size group in the inspector so the widget has enough room without clipping its content or creating unnecessary scrollbars.

If you’re designing a CMS Entry page (for example, a Branches collection where each location has its own map, or an Episodes collection where each item has a different audio player), you can also use Link CMS code in the inspector so the block pulls its embed code straight from a field in that collection.

Embed external widgets (Google Maps, external calendars, audio players, third-party forms)

Almost every online platform offers a Share → Embed option that gives you a snippet ready to copy and paste. Here are the most common use cases and how to get the best results:

  • Interactive maps (Google Maps): search for your business on Google Maps, click Share → Embed a map, copy the <iframe src="https://www.google.com/maps/embed?..."></iframe> code, and paste it into your Custom code block. Changing width="600" in the snippet to width="100%" lets the map adapt automatically to the column width on both desktop and mobile.
  • Audio and podcast players (Spotify, SoundCloud, Apple Podcasts): copy the embed code for an episode, album, or playlist so visitors can listen without leaving your page.
  • External calendars and schedulers (Calendly, Cal.com, Google Calendar): although véltica includes its own built-in booking and payment system under Catalogue, if you already use an external calendar you can paste its embed snippet into a Custom code block to display it in your contact section.
  • Third-party forms, surveys, or calculators (Typeform, Tally, financial widgets): paste the provider’s HTML and <script> snippet so the interactive widget renders inside the box you placed in your layout.

For safety—and so you can move, resize, and select the block comfortably while designing—some interactive scripts are shown in a static preview inside the editor. Click Preview in the top bar or visit your published site to interact with the widget just as your visitors will.

How an Embed block on the canvas differs from Code in the head in Page settings

In véltica, there are two different places where you can paste HTML or scripts, and each serves a specific purpose:

Feature Custom code (Embed) block on the canvas Code in the head in Page settings
Where you set it up From Insert → Custom code inside a visual section on the canvas. From Pages → Page settings (⋯) → Advanced → Code in the head.
Where it is injected in the HTML Inside the visible body of the page (<body>), right in the row and column where you place the block. Inside the invisible <head> tag of that page before the visual content loads.
What to use it for Visual elements that take up space in the layout: maps, players, external tables, iframes, or third-party payment buttons. Domain verification <meta> tags, conversion pixels on thank-you pages, custom <style> rules, or background tracking scripts with no visual interface.

If you need to install an analytics tool across your entire website at once without going page by page, you can set it up directly from your main dashboard under Settings → Google Analytics.