Freeola Internet Get Dotted Domains Blog Guides Forums
HTML snippets in InstantPro
Menu
HTML Snippets

Using the Snippets section of the Custom Code & Snippets page in InstantPro, you can add chunks of custom HTML code in Snippets to individual pages.

Before you start the tutorial, you'll need to log in to the MyFreeola Control Panel and open the InstantPro Website builder


Using Snippets

Step 1: Once you've logged into MyFreeola and opened the InstantPro Website Builder, from the Site Overview select Custom Code & Snippets.

Site Overview

Step 2: You should now find yourself on the page shown below. There are three options on this page, but for this guide, we'll just be using the first: Custom Code Snippets. To get started, click the Create a New Snippet link.

Custom Code & Snippets

Step 3: You should now be able to assign a Snippet name and add the HTML code you want to use in the Snippet Content box.

We've chosen to use a Clock as an example in the image below, the HTML code in the Snippet Content box links to a digital clock plug in and also contains some styling.

Note: We recommend that you only use HTML when using Snippets, as using other code may cause your site to appear incorrectly, though you may still experiment with other languages if you wish.

Adding a Snippet

Once you're happy with the name of your snippet and any content within it, click Save and then Finish to be taken back to the InstantPro Site Overview.


Step 4: from the Site Overview, click Page Manager and edit the page that you want to add a snippet to.

Note: You can only add snippets using the Text Editor, so if you want to add a snippet to any page which isn't a Standard Page, you will need to edit the Page Intro Text and include it there.

Snippet Button

Now thet you're editing the page, click the Snippet Button in the Text Editor Toolbar as shown in the image above.


Step 5: You can now add you snippet to your page. As it's our first snippet, the Insert Snippet window has defaulted the drop down to our 'clock' snippet.

Insert Snipet Window

All you have to do to add a snippet to your page is select it from the drop down and click Insert.

Note: You may have noticed that there is a Create New Snippet button in this window. There are two ways to create a snippet, and by clicking this button you can create snippets while editing your page instead of using the Custom Code & Snippets page. Any Snippet you create from the text editor toolbar will also appear on the Custom Code & Snippets Page.


Step 6: Once inserted, your snippet will appear as it as shown below, with your Snippet Name in a box. You can place snippets anywhere within the text editor and this will be determined by where the Text Editor Cursor was when you clicked the Snippets Button.

Text Editor View

Step 7: Done! As you can see from the image below, though the clock may not display in the text editor, on the live site, you can see the digital clock we've added to our page.

Live View

Freeola is a UK internet service provider offering the best value and extensive free services. Please compare our domain name registration prices or check out our UK high speed internet access. If you are in business please see examples of our free hosting at Freeola.com/customer-sites.

Safe and Secure Payment

Tell us what you think!

Live Chat is offline

Live Chat is available:
9am to 6:30pm Monday to Friday (excluding bank holidays).

01376 55 60 60

Send us a ticket.