How-to

How to: Use the HTML Snippet widget

html snippet widget

From slideshows and polls to forums and booking calendars, our HTML Snippet widget allows you to add all kinds of useful extras to your website. Find out how to use it with these step-by-step instructions.

If you’re wondering what on earth a HTML Snippet widget is (and we don’t blame you if you are), it’s a tool that enables you to add new features and functionality to your website from third-party providers.

How does it work? It’s pretty simple actually – you get a code from your chosen third-party provider and paste that code into the snippet widget box in Moonfruit, which then handles the more complicated coding so you don’t have to.

Our favourite widgets

It’s up to you which widgets you choose to include on your site, but below are a few of our favourites. Most are fully customisable – so you can select the size, colours and font, to make sure the widget’s design and style are in keeping with that of your website.

Flickr Slideshow

Great slideshows can instantly liven up any gallery page. This one from Flickr is sure to add a bit of oomph to yours. Flickr Slideshow

Twitter feed

Keep your site bang up-to-date and show visitors why they should follow you on Twitter with a sneak preview of your feed (and your super interesting tweets). Twitter feed

Google Maps

Being able to pinpoint your exact location is really helpful for customers visiting your site. See our how-to guide for more info.

Wufoo

Forms are a great way to obtain the information you need from visitors and are great for contact pages. We like Wufoo’s fully customisable designs. Wufoo forms

Poll Daddy

Got a burning question to ask your site visitors? Want to get feedback about your products? Online polls are the best way to find out what your visitors are thinking. We like Poll Daddys’ easy-to-use software and designs. Poll Daddy

Booking Bug

Need a system to take online bookings and enquiries? Booking Bug is the one for you. This widget allows you to set up bookings by the hour, day or week, by offering classes, courses or events. Booking bug

Before you start:

  • Take a look at some of the third-party widgets listed on this link
  • Decide which widgets you’d like to add to your site (don’t go crazy now – too much going on can make your site look cluttered and unappealing)
  • You’ll need to follow the instructions on the third party website – some will require you to be logged in or create accounts in order to generate the code
  • Get the snippet of code ready to save time

Here’s how you do it:

Step 1: Click on Insert in the main toolbar. Then click on HTML Snippet in the sidebar. (There are also a few predetermined widgets in the software which you can see at the bottom of this sidebar, so if they’re one of the ones you want to add, click on your chosen one and follow the steps below)

HTML snippet

Step 2: Your widget box will then appear on the page. Position the widget where you’d like it to appear (if you change your mind, you can always move it later)

Step 3: In the Editor, click on the Setup tab and you’ll see the box where you can paste the HTML code for your widget

Step 4: When getting the code for your widget, there will be a basic predefined code ready, but if you adapt anything, e.g. font, colour or fields, then a customised code will be generated for you. This is the code you have to copy and paste

Step 5: When you have your snippet of code ready, simply paste the HTML code into the blank field (or come back once you’ve got your code and copied it to your clipboard)

HTML snippet

Step 6: Click Apply

Step 7: If dimensions are supplied within the code the widget will ask you if you want to resize using the given dimensions – click Yes

Step 8: Now Save the page

Step 9: Don’t panic that you can’t see your new widget yet, you have to click View my site in order to see it

HTML snippet

Step 10: Once you’ve checked out your new widget, make sure it sits well on your page (it may be smaller or larger than the box you moved) and voila, you’re all done!

Do you use the HTML Snippet widget? What features have you added to your website? Share below.

Want to create a free website with Moonfruit? Go to our homepage to find out how


Vicki Shiel
Editor at Moonfruit. Likes food and smoothies.

More posts by this author


15 Responses to “How to: Use the HTML Snippet widget”

  1. Sharka

    the google maps widget has NO apply button, so each time i set the address and then go to preview… it just shows up as the original one – london and not the address i set.. (and wanted)

    Reply
    • Amita Parikh

      Hi Sharka
      Apologies for the delay in getting back to you – in general, it’s best to submit a support ticket for any technical questions – but if you go to edit your site, click on ‘Insert’ and then scroll down, you should see a ‘Google Maps’ widget. You can simply click this, then enter the address. There is an ‘Apply’ button on the bottom right. You can click that and save your changes and then click ‘View my site’.
      Thanks.

      Reply
    • subtiffany

      Hi, I have the same issue – the APPLY button bottom right is not showing in google chrome?

      Reply
      • Amita Parikh

        Hi – have you contacted our support team about this? We just tried it in Google Chrome and can’t replicate the error you’re seeing. You will need to paste your code into the box before the ‘Apply’ button becomes clickable though.

        Reply
  2. Morten

    It appears these HTML snippets are loaded onto the page using an iframe. That doesn’t work for all third party scripts. How would you recommend inserting a code which needs to be inserted on the main page?

    Reply
  3. Mark

    Hi,
    I have inserted a HTML widget onto my website that works ok. However the thing is cramped and unusable on the mobile phone mode. Is there any fix for this?

    Mark.

    Reply
  4. Mike Morton

    How do I find the code for Googlemaps to enter it into my HTML Snippet Please.

    Reply
  5. tom c

    basically i embeded a ‘latest upload’ gallery of hosted videos with the html snippet. I cannot change the links as this was done through a third party… not the problem.
    then i created a transparent shape in html to overlay the videos with a link attached that’s supposed to drop into my site page, ‘latest-uploads’.
    that works fine as well when tested.
    Problem is, when I refresh the page the latest uploads overlay is on another layer and the video gallery is on the top layer. How can I set this up so the overlay layer stays on top?

    Reply
    • Amita Parikh

      Hi Tom – can you please submit a support ticket through your account dashboard regarding this request? A member of our support staff will get back to you.

      Reply

Add a comment to Sharka

  • (will not be published)

More posts by this author