Skip to main content

Using HTML Blocks for Custom Content

Guide on how to use HTML blocks to add and customize content on your pages.

Gil Chan avatar
Written by Gil Chan
Updated over a week ago

Overview

HTML blocks let you embed custom content, third-party widgets, forms, and code into your CraftedStays pages. This is useful for adding functionality that isn't built into the templates.

Adding an HTML Block

  1. Go to your site's Template Editor

  2. Navigate to the page where you want to add the block

  3. Click "Add Section"

  4. Select "HTML" from the available sections

  5. Configure the section:

  • Title - Optional heading above your content

  • Subtitle - Optional subtitle

  • HTML code - Paste your HTML/embed code here

6. Save changes
​

Common Uses for HTML Blocks

Embedding Forms

Google Forms

  1. In Google Forms, click Send > Embed

  2. Copy the <iframe> code

  3. Paste into HTML block

Typeform

  1. In Typeform, go to Share

  2. Click Embed in a web page

  3. Copy the embed code

  4. Paste into HTML block

Jotform

  1. In Jotform, click Publish > Embed

  2. Copy the iframe embed code

  3. Paste into HTML block

Embedding Widgets

Elfsight Widgets

  1. Create your widget at elfsight.com

  2. Copy the embed code provided

  3. Paste into HTML block

Social Media Feeds

Most social media platforms provide embed codes:

  1. Find the embed option in the platform

  2. Copy the embed/iframe code

  3. Paste into HTML block

Adding Booking Widgets to Custom Pages

If you want a booking widget on a custom landing page:

  1. Get your booking widget code from your PMS or from Settings

  2. Create an HTML block on your custom page

  3. Paste the booking widget code

QR Codes

  1. Generate a QR code using any QR code generator

  2. Download as an image OR get embed code

  3. Add to HTML block (as image or embed)

Example HTML Code

Simple Formatted Text

<div style="text-align: center; padding: 20px;"><h2>Welcome to Our Properties</h2><p>We offer the finest vacation rentals in the area.</p><p><strong>Call us:</strong> (555) 123-4567</p></div>

Embedded YouTube Video

<div style="text-align: center;"><iframe width="560" height="315"src="https://www.youtube.com/embed/VIDEO_ID"frameborder="0"allowfullscreen></iframe></div>

Line Breaks and Basic Formatting

<p>First paragraph</p><p>Second paragraph</p><br><p><strong>Bold text</strong> and <em>italic text</em></p>

Tips for Using HTML Blocks

Keep It Simple

  • Basic HTML works best

  • Avoid complex JavaScript that might conflict with the site

  • Test your embeds before publishing

Mobile Responsiveness

  • Test how your content looks on mobile devices

  • Use responsive embed codes when available

  • Consider wrapping content in a responsive container:

<div style="max-width: 100%; overflow: hidden;"><!-- Your embed code here --></div>

Styling Considerations

  • HTML blocks inherit some styles from your template

  • You can add inline styles for custom formatting

  • Avoid overriding global site styles

Troubleshooting

Embed not showing

  1. Check that the embed code is valid HTML

  2. Some embeds require HTTPS - make sure your site uses it

  3. Try the embed on a simple HTML page to verify it works

Widget loads slowly

  1. Third-party widgets load from external servers

  2. This is normal and outside CraftedStays control

  3. Choose lightweight embed options when available

Embed breaks page layout

  1. Check for unclosed HTML tags

  2. Add a container div with max-width

  3. Test with simpler code first

JavaScript not working

  1. Some JavaScript may conflict with site scripts

  2. Try using simple iframe embeds instead

  3. Contact support for complex integrations

What NOT to Put in HTML Blocks

  • Sensitive information (API keys, passwords)

  • Malicious scripts (these will be blocked)

  • Heavy animations (slow down page load)

  • Tracking scripts (use the dedicated analytics integration instead)

Related Articles

Did this answer your question?