Skip to main content
Help Center
English (GB) Deutsch Español Français Italiano
Sign in Contact Us
  1. Guesty Help Center
  2. Guesty Websites
  3. Advanced
  4. Widgets overview

Advanced Website: Widgets - HTML

Expand your Guesty Website’s functionality by adding custom HTML and scripts. Use the HTML widget to embed third-party features like videos, forms, or calendars directly into your pages. You can also add global or per-page custom code with precise control over where the code loads on your site.

Important:

Only add code from trusted sources. Always review and test any custom code before publishing, and make a backup of your site first.

To learn more about using HTML in Developer Mode, see Developer Mode.

Understand where to add custom code

You have two main options for adding custom code:

  • Site-wide code: Apply code globally across all pages by adding it to the site’s header or before the closing <body> tag.
  • Per-page code: Add code to an individual page’s header for scripts or styling that should only affect that page.

Option 1: Add site-wide code (global <head> or <body> tags)

  1. In the side panel, click SEO & Settings.
  2. Click Header HTML.
  • Head HTML: Add content to the head section. Use this field for global scripts, styles, meta tags, or verification code that should appear in <head> on all pages.
  • Body End HTML: Add custom HTML or JavaScript just before the closing </body> element on every page.
  1. Paste your code, then click Save.

Tip:

Place code that loads resources (like CSS or general scripts) in the head section. Use the body end for widgets or analytics code that needs to load after the page content.

For more details, see the Duda custom code guide.

Option 2: Add per-page code (single page header)

  1. In the side panel, click Pages.
  2. Select the page you want to add code to, then click the settings gear icon.
  3. Click SEO.
  4. Scroll down to Header HTML.
  5. Paste your code in the field and click Save.

This adds code to the <head> of the selected page only.

Add the HTML widget to your site

Follow the instructions below to add the widget:

  1. Sign in to your Guesty account.
  2. In the top navigation bar, click the mode selector and select Growth mode.
  3. Click Distribution.
  4. Click the Guesty Websites thumbnail.
  5. To the right of the relevant website, click Edit.
  1. In the left panel, click + to open Widgets.
  2. Scroll down to the HTML widget.
  3. Click and drag the HTML widget into your site.

Learn more about adding widgets to your site,

Use the HTML widget content editor

  1. In the HTML content block, click the Content tab. 
  2. Paste or write your custom HTML in the provided text box.
  3. Click Update to save changes.

Use the HTML widget design editor

  1. In the HTML content block, click the Design tab. 
  2. Adjust the layout, style, or spacing for the widget as needed.

For information about general design options, see Widget design.

Important:

  • Guesty can't troubleshoot your custom code.
  • Server-side scripts (like PHP or ASP) aren't supported. Only client-side code (JavaScript, HTML, CSS) runs in widgets.
  • Use HTTPS for all external resources. Non-HTTPS links won't load in the editor.
  • Don't override or re-initialize jQuery. The editor uses jQuery 3.0 and replacing it may cause your site to malfunction.
  • If your code uses an onload event and Quick Navigation is enabled, try turning off Quick Navigation if you encounter issues.
  • Always create a backup before adding or updating code.

Add connected data to the HTML widget

Insert dynamic fields from a collection or the Content Library into the HTML widget when building dynamic pages. Use this method to display custom content unique to each page instance, without hard-coding all values in your collection.

For example, embed a SoundCloud podcast, an external calendar, or custom widgets that change for each item in your collection. Store only a unique value (like an ID or slug) in your collection, and embed it in your widget’s code using connected data. Learn more about Connected Data.

Follow the instructions below to add connected data:

  1. Sign in to your Guesty account.
  2. In the top navigation bar, click the mode selector and select Growth mode.
  3. Click Distribution.
  4. Click the Guesty Websites thumbnail.
  5. To the right of the relevant website, click Edit.
  1. In the HTML content block, click the Content tab. 
  2. Paste your HTML code into the field, then remove the URL slug (end of the URL) from the code and save it for later.
  3. Click Update.
  4. On the top bar, click Edit Row.
  5. Paste the URL slug you saved in step 2 into the Section Paragraph field.
  6. Right click your HTML widget to open the context menu and click Edit Content.
  7. Click Connect, then select the data field you want to connect the widget to.
  8. Click Copy to Clipboard, then paste the copied content into the section of code where the URL slug was before you removed it in step 2.
  9. Click Update.

Tip:

Use connected data in the HTML widget to scale your site’s dynamic content efficiently. Only store what changes in your collection; keep shared HTML or widget code in the editor for easier maintenance.

For advanced options, developer troubleshooting, and platform specifics, see Developer mode.

Related to:

Was this article helpful?
0 out of 0 found this helpful