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.
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
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
Being able to pinpoint your exact location is really helpful for customers visiting your site. See our how-to guide for more info.
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
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
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)
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)
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
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
- Got a business idea? Don’t let fear of failure hold you back Business
- Beat your rivals with these 9 top tools for competitor analysis Business
- How to write a vision statement that delivers? Here are 6 forward-thinking tips Business
- “I went for what I love, not what I could make out of it financially” says Stefan Saigau People
- Running a business from home? This government announcement may interest you Business
15 Responses to “How to: Use the HTML Snippet widget”
Add a comment