Digital

20 best uses of the HTML snippet widget

htmlheader

Celebrating the Swiss Army knife of our web design tools

Need a social feed on your website? That home page missing a great slideshow? How about a booking form for your online clients?

Well, step this way my friend and take a look at the tool that can perform all these tasks and more. The HTML Snippet widget.

For anyone who doesn’t know, the HTML Snippet widget is one of our most popular and useful tools.

On the surface, just a simple box, it allows you to paste HTML code into any page of your website.

This means that hundreds of third-party features and applications that otherwise wouldn’t be compatible with our software, can actually be used.

Come with us then, on a tour of our best and lesser-known uses, as well as saying hello to some of the lovely Moonfruiters putting them to good use.

Rollover images

Since the debut of the HTML widget there have been some awfully creative discoveries by some of our users. Not least designer Matthew Bick, who created a new way of adding interactive rollover images and buttons to his site.

matthewbick

Pretty snazzy hey?

Well, he’s generously shared his secret. Thank you Matt.

FAQ section

And we dive straight into another great bit of code, this time written by long-term user ‘Dino’.

This snippet allows you to add an interactive FAQ section to any page in your site, so any visitors can visit your website, access a list of questions and click to reveal the answer to a particular query.

Not bad Dino, and thank you for sharing.

MailChimp

The Internet’s most popular email marketing tool.

You can create multiple mailing lists and generate the sign-up forms that can be embedded into your website. It’s a great way of bringing you closer to your visitors and keeping them informed.

Just ask keen Moonfruit user Marije Oostindie, artist and founder of Ateliera Andact for example.

atelieraandacht

Marije uses MailChimp to create mailing lists for her followers and to let them know all about her latest incredible art work and designs.

To help you do the same, we’ve created a step-by-step guide.

Payloadz

So, you’re selling e-books and you want to allow your customers to pay and instantly download their purchase? Enter Payloadz!

The perfect digital download tool, you can set it up to take payments for files, guides, graphics and software,  then sit back as the automatic delivery service takes over.

Click on the image below for more info.

payloadz

Facebook feed

Yeah, you can embed a Facebook feed.

Simple to set up, it makes your Facebook status updates and activity appear automatically on your site too.

Here’s fancy pub snack purveyors McStrongs using it with aplomb.

mcstrongs

You can see how they set that up here.

Twitter feed

Not to be outdone by Facebook, Twitter is also compatible with our little snippet box. Much to the delight of writing blogger Chloe Wright.

chloewright

Phone number link

So, say a customer needs to call you, what’s the best way of making sure they get through? By adding a direct link to your mobile from your website of course.

Incredibly easy to implement, but really very useful if you’re running a business from your website.  A phone link  allows clients viewing your website on a mobile to  press the number on screen and their phone will immediately start calling you.

Interior design aficionados Silk Interiors demonstrate:

sillkinteriors

Photosnack

Slideshows, albums and portfolios. Yep, you can set up them all up through the HTML widget.

For example, Photosnack is a popular choice for interactive homepage slideshows

mrmuffin

Comslider

An equally impressive slideshow provider is Comslider.

kdm

You can find illustrated guides for both here.

Then there’s…

CoolIris

Which lets you add beautiful effects to your photographs and also integrates nicely with Facebook.

Issuu

And Issuu. Great for all sorts of publishing, but do check out the Visual Inspiration section.

Getty Images

Finally, to round off our image sub-section we have Getty Images. One of the biggest suppliers of stock images and film, they have recently made 40,000 of their images free to embed on websites.

You simply browse their library, copy the code from your chosen image and drop it into the HTML widget. A fantastic resource.

SoundCloud

That’s your visuals sorted then. Now how about a bit of music?

Well, you can create playlists and share your musical tastes by adding SoundCloud to your website.

soundcloud

You can even use it to record and upload your own tracks, which has certainly proved essential for audio and visual media designer DigiBoy Design.

digiboy

To find out how DigiBoy made it happen, check out our recent article.

Next up…

Polldaddy

Create surveys, polls and competitions with “the most powerful and easy to use survey software around”.

polldaddy

Whether you want to gage genuine opinion or just have a bit of fun with your visitors, it’s a pretty cool app for an interactive website.

We’ve gone and made a fully illustrated guide to help you set it up too.

Tables

Sort your text into nice rows and columns thanks to online tinkerers Text Fixer. They allow you to create and embed tables of various sizes and styles in just a few minutes, which means you can customise them to totally fit your websites aesthetic.

Here’s our own ‘how to’ for doing just that.

YouTube

Yay. Home of countless funny cat videos and instigator of procrastination, the world’s favourite video host is also one of the treats found in our tool box.

Here’s one we made earlier.

Vimeo

…And do check out Doozy Media using YouTube’s arch enemy Vimeo to balance things out.

doozy

BookingBug

An old favourite now, one that lets you take bookings and schedule events through your website.

bookingbug

Again, BookingBug can be fully customised, so the the appearance of the booking form matches your page design.

Here the lovely team behind Travelholics show us it in action.

travelholics

And BookingBug themselves show how it’s done.

Google Maps and Calendar

Last on our list we have 2 more favourites courtesy of Google.

There’s their famous map feature. Essential if you need clients or customers to locate you.

c9creative

And Google Calendar.

calendar

So, what you going to try first?

Maybe you have your own suggestion for the list or even something you’ve created yourself. If so, do feel free to share in the comments section below and we’ll gladly add your discovery to the mix. More the better we say.

And, if you haven’t got a website with us yet, but really want to try out these features, then you can start a free trial today. What you waiting for?

buildafreesite

Andy Siddons
Content Writer

More posts by this author


20 Responses to “20 best uses of the HTML snippet widget”

    • Andy Siddons

      Hey Simon,

      Oh, amazing. We’ll add that one to the list shortly.

      Well done.

      Andy

      Reply
      • Simon

        Thanks Andy! It will be brilliant for Moonfruit to include ShopIntegrator’s in your list of great 3rd party HTML Snippet’s.

        It will give your customer’s even more choice when building their Moonfruit site if they want to use different payment processors for example such as Sage Pay, WorldPay, Authorize.Net, PayFast, First Data and others we support. Merchant’s can sell deliverable goods with shipping costs, digital download products and customised items in the same shop using our moonfruit HTML Snippet ecommerce add-in.

        Cheers
        Simon

        Reply
  1. Mark Lawn

    Snippet widgets are simply amazing! My new motorhome hire site has online booking, sliding images, mapping and feeds for Facebook and Twitter. Not bad for a complete novice on a computer!

    Reply
  2. Paul

    Thank you for featuring Silk Interiors. We have a new home page now, but we still use the phone number feature you described. As well as a Mailchimp newsletter opt in form. And a Google Map showing distance that we will travel for a free measuring service. We’ll soon be adding a slideshow to the home page, just waiting for our photographer to take some new photos of client’s work.

    Reply
  3. M. Carr

    I like this list especially since I never gave html snippets much thought – some of them I never expected to see here

    Reply
    • Amita Parikh

      Hi – thanks for the great suggestion! We’re working on a new list of things you can add using the widget and will include this. Cheers!

      Reply
  4. excellent

    For one reason or another, I can’t see all of this text, stuff keeps disappearing? Are you using XHTML?

    Reply
    • Steven

      Hi,

      can you give a few more details about what you are having a problem with? Alternatively, please raise a support query and include as many details as you can!

      Cheers, Steven

      Reply

Add a comment to M. Carr

  • (will not be published)

More posts by this author