Includes

How to simplify your websites with HTML includes

Use this when you have pieces of HTML that appear on multiple pages of your website.

Simply including one HTML file from another HTML file feels like a missing feature. Fortunely, we added that feature to Wunderbucket. It's actually really simple.

<div data-merge-include="footer.html">
<!-- Whatever is inside footer.html will appear here -->
</div>

How does it work?

The value you that you use inside data-merge-include works just like a URL. You can use a relative url like data-merge-include="../footer.html" or an absolute url like data-merge-include="/footer.html".

A few basic rules:

• The file you include has to exist.
• It has to be a valid path.
• You can use full URLs but they are subject to CORS loading restrictions. I.E. data-merge-include="http://my-site.com/footer.html" will result in an error if my-site.com does not have the correct CORS headers.

We use the open-source Merge.js engine to power HTML includes. If you want to really see how this works, the source code is here: https://github.com/levinunnink/merge.js

FAQs

• My site loads in stages when I'm on localhost. Will it do that when I publish it?
• Can I include my meta tags with data-merge-include?
• Why am I getting an error when I publish my site?