Widgets are interactive and dynamic pieces of content that sit within sections on a web page to help improve user experience.
Available Widgets
Facebook Feed | Adds a feed from a Facebook Page on the page. |
---|---|
Content Block | Adds generic content and HTML onto the page. |
Twitter Feed | Adds a Twitter post feed onto the page. |
Display Anything | Adds a image slider onto the page. |
Page Tree Widget | Adds a list of related pages onto the page. |
Product Display | Adds a list of selected products onto the page. |
Google Maps | Adds a Google Map view onto the page. |
Tab Set | Adds a series of tabs, which can contain other widgets, onto the page. |
How to Add Widgets
- Open a template page
- Click on Add/Remove Widgets
- You'll be presented with a selection of widgets on the right hand side
- Drag a widget you wish to use, to the content areas in the centre of the page
- Once you drop the widget, you'll see a pop-up with the settings for that Widget.
- Once completed, Save the popup window
- Click "Save Widgets", once you've finished placing widgets onto the page.
How to Remove Widgets
- Click the Add/Remove Widgets button
- Select a widget on the page
- Drag and drop the widget onto the "Drop Here to Remove" section
Facebook Feed widget
The Facebook Feed widget connects to a Facebook Page.
To use the facebook feed, you simply need to provide a Facebook Page url (www.facebook.com/pagename)
You can also display the Facebook feed for the page, by selecting the "Show Stream" option within the settings
Content Block widget
The content block widget allows you to simply and easily add static content to your page. This can be done using the text editor provided to you in the widget, or by inserting HTML content into the widget.
Note: If using HTML, the content editor removes certain tags (such as Script and Button) and also any empty tags. To keep empty tags for styling purposes, use
Twitter Feed
You can include content from your twitter feed by using the Twitter Feed widget. To use this, you need to provide the following details:
- Account Name
- Number Of Items (to show)
- Consumer Key
- Consumer Secret
- Oauth Token
- Oauth Secret
You can get your Consumer Key, Consumer Secret, Oauth Token & Secret by creating an "app" on this page: https://dev.twitter.com/apps
Once you have set up your "app", look for the following options:
- Consumer Key = API Key
- Consumer Secret = API Secret
- OAuth Token = Access Token
- OAuth Token Secret = Access Token Secret
Display Anything widget
The display anything widget allows you to put an image slider onto your page, to display several images responsively.
To use this widget, simply add it to your page, and then include a selection of images to use.
Page Tree Widget
The Page Tree widget displays a simple list of the pages that are related to this page on the site, depending on which options you choose. The list also links through to the specified pages.
The options for the Page Tree widget are as follows:
- Parent pages - Displays all pages above the current page in the site tree
- Sibling pages - Displays all pages that are on the same level as the current page on the site tree
- Child pages - Displays all pages that are below the current page on the site tree
Product Display widget
This widget allows you to quickly and easily display a list of specified products on your site.
When you add in a Product Display widget, you will be given several options:
Display Method:
- Automatic by Location - This will display every product that has an event at the specified location. Note: When using this option, the events for the product will automatically be filtered to this location.
- Automatic By Product Group - This will display all products that are part of the specified product group(s).
- Display Manual List - This will display the products that you specify in the list provided.
Order By:
- Alphabetical
- Price (High to Low)
- Price (Low to High)
- System Ordering - based on Product Id
- Closest to Availability - Ordered by date of the next available event
Display Options:
- By Location - Locations: Allows you to specify which locations are to be displayed
- By Product Group - Must Be In All Product Groups: If selected, will only display Products that appear in all of the selected product groups. Otherwise, will display any products in each product group.
- By Product Group - Product Groups: Allows you to specify which product Group(s) are to be displayed.
- Manual List - Product Selection: Allows you to search for and add in products to the Manual List
Google Maps widget
This widget allows you to display a Google Map indicating where your Locations are. You can select specific locations using the settings provided.
The options for the Google Maps widget are as follows:
- Zoom Level: How far in the map is zoomed when it loads. 0 = World View, 17 = closest zoom level
- Custom Size: Allows you to define a fixed width. Leave blank for auto sizing.
- Locations to Use: Allows you to define which locations you want to have displayed on the map.
To fully use this feature, you need to ensure that you have the Coordinates set up on each location to be used. The co-ordinates can be found by looking at the URL provided by google maps when you have found a location. By default, the co-ordinates are to the centre point of the screen.
The highlighted area shows where you can find the coordinates: @{Latitude},{Longitude},{zoom level}z
These details then need to be included in the Address tab of the relevant Location.
Tab Set widget
The tab set allows you to display a number of widgets behind tabs. Note: Each tab set can only contain one Widget.
When you add the tab set widget to the content area, you will see the following:
To add tabs, simply drag in additional widgets into the darker green area of the tab set.
This will then create the first tab in the tab set.
You can re-name the tab by clicking int he area where it currently displays "Tab one name" and then editing the name.
To add additional tabs, simply repeat the process listed above.
Once you have placed the relevant content into the tab set, save the page.
To re-arrange the tab sets, you simply ro-order the widgets you have placed into the tab set, after having first saved the page.