Please note: this article is only applicable to websites built after November 2018.
In this article we cover the purpose and use of rows and widgets. Detailed widget breakdowns are included within the article.
In this article:
Adding widgets to a row
To add a widget to a row you will need to click the '+ Add Content Row' button at the bottom of the page.
On the newly created row you need to select the + icon on the left which will then show '+ Add widget'
A menu will open on the left where you can then choose which widget you would like to add to the row
Types of widgets
Information Widget
An information widget will allow you to add text to your website, create an important information widget, add an expandable information section or create a button to link to other pages.
The main sections of the information widget are:
Style
The information widget style can be changed to make the widget more versatile to suit the need of the information being provided.
Standard:
A standard widget is useful for general text information or for creating a button on a menu.
General Text
Buttons
Care Card (non-urgent):
The non-urgent care card has a blue banner for the title to allow it to stand out amongst other widgets on the page, as well as provide important eye-catching information for patients. You will be unable to link a Care Card widget.
Care Card (urgent):
The urgent care card has a red banner for the title to highlight it as an urgent message for patients. You will be unable to link a Care Card widget.
Care Card (emergency):
The emergency care card is for extremely important information that needs to be provided to patients. This style is to be used sparingly and only for the most important information. You will be unable to link a Care Card widget.
Summarised Information (details):
The details summarised information section has the title displayed at all times and the widget content in an expandable box.
Standard view:
Expanded view:
Summarised Information (expander):
The expander summarised information section has the title displayed at all times and the widget content in an expandable box.
Standard view:
Expanded:
Widget Title
This is the main title of the widget that will be displayed either in larger text, a banner or as the main text for an expander box
Widget Content
Widget content is the main body text of the widget. The text style can be changed via the menu at the top to create headers, change text colour, add links, change alignment, etc.
Add a link to this widget
If you would like the whole widget to be a link you can click the 'Add a link to this widget' button . This will open a menu to the left with the different options to link, including a page from the website, an external URL or a file. This is especially useful when creating a button from an information widget.
Make this widget visible
You will need to tick this box if you would like the widget to be displayed publicly on the website. When this box is unticked the widget is only visible when logged in as an editor.
Image Widget
Image widgets can be added to create buttons, display posters, link consultation banners, etc.
To find out more about adding an image widget to your website and adding links please see the 'Adding and linking images/banners' article.
Blog Widget
The blog widget is most often used to display a news feed onto the homepage. This widget will take the latest entries on a blog page and display them in a condensed version that links to the full blog post.
To use the blog widget you will need to select the blog page that you want it to take content from. When selecting the drop down under 'Select blog page', it will list any existing blog pages on the website to choose from.
You can add a title to be displayed above the blog posts such as 'Latest News'.
The number of items is the amount of posts that the widget will display from the blog page. 5 is normally the maximum amount recommended due to the sizing of the widget.
Completed example of a blog widget:
Boundary Widget
The boundary widget allows for practices to have an interactable map for the boundary of the practice. When you input your postcode the widget will let you know if it is within the practice boundary or not. This is useful for patients looking to join a new practice.
The data for the boundary widget is automatically imported from the NHS Strategic Data Collection Service. As long as the boundary data has been submitted to the NHS SDCS it will be displayed within the widget.
If you have not uploaded data to the NHS SDCS, you will need to set up a boundary map in Google Maps or Scribble Maps. Once the new map has been made, you will then need to upload it on the widget and set the widget to active.
A correctly set up boundary widget will look like this:
Common issues:
If the practice code is different to the website code it will be unable to pull data from the NHS SDCS and you will need to uploaded a boundary map.
If the boundary map displays zoomed out after uploaded a boundary map then the map has been set up incorrectly and will have a break in the boundary lines. All lines will need to be connected to work correctly within the boundary widget.
Callout Widget
The callout widget works similar to the information widget whereby it needs a Title and Widget Content. This widget however shows the background in yellow and is often used for the 'if you need help when we are closed' section to display the information clearly.
Once the callout widget is set up it will look like this:
CQC Widget
The CQC widget allows practices to display their CQC rating, date of rating and a link to the report.
Once the CQC widget has been selected and added to the row, you will need to input the CQC location ID into the box. Finally tick the 'Make this widget visible?' box.
Once the widget is live it will look like this:
Form Widget
The form widget links patients to a form to fill out online. When editing the form widget it will display a drop down with all of the forms that are currently available on the website including custom forms created within Form Builder.
Once you have selected the form you would like to link and ticked 'Make this widget visible' the widget will display like this:
The form will automatically link below the title of the form for patients to navigate to.
Friends and Family Test widget
This widgets allows patients to quickly and easily fill in a FFT form to leave feedback for the practice. The friends and family test widget is set up within FPMS.
The widget once set up will look like:
To set up this widget please refer to the 'Friends and Family Test - How to Setup, View and Publish Responses' article.
Newsletter Widget
The newsletter widget pulls the newsletter data uploaded to FPMS and gives a link to download the latest newsletter as well as a sign up feature. When uploading a newsletter to FPMS there is an option to email the newsletter out to patients. This will send the newsletter to any patients who have signed up via the newsletter widget.
To add a newsletter log into FPMS, navigate to the globe icon on the left and choose 'Newsletters'.
Once on the Newsletter page you will then need to choose the '+' icon in the top right.
You will then need to give the newsletter a title e.g. Newsletter Spring 2025, upload the newsletter as a PDF file and ensure the 'Is visible on website' is ticked.
A completed newsletter widget will look like:
Opening Times Widget
The opening times widget will automatically pull the opening hours data from FPMS.
If you have multiple branch sites you will have a drop down menu to choose which site's opening hours you'd like to display.
A completed opening times widget will look like:
To add or update your opening hours, please see the 'Opening Hours' article.
Sites Widget
You can display the practice's address, opening times and map via the Sites Widget. If you have multiple branches, you can choose which practice's data you would like to be displayed by selecting the practice within the drop down menu.
Site:
Choose which practice's data you'd like displayed. This data is displayed as:
Map position:
Select if/where you'd like the practice map to be shown on the widget
Above
Left
Right
Show opening times:
Select this option if you'd also like the opening times displayed within the widget.
YouTube widget
The YouTube widget allows you to embed YouTube videos to the website without patients having to be redirected to the YouTube website.
Any video you are looking to upload to the website will need to be uploaded to YouTube first and then added to the YouTube widget.
YouTube URLs can be added to the widget via the full link e.g. https://www.youtube.com/watch?v=qo5_pfgPDSc
Once the link has been added and the widget made visible it will be displayed as:
Editing rows
If you click the pencil icon next to the row you will open the row settings which will allow you to change how the row is displayed.
The editor menu will look like:
- Give the row a title using the Title box. This text will be displayed at the top of that row. You can use the alignment buttons to select how the content of this row will be aligned; left, right or centred.
- Use the margin settings to choose how much space will appear around the outside of this row. Use the padding settings to choose how much space will appear around the inside of this row.
- Use the Background colour selector to set the background colour for this row.
- Use the Header colour selectors to set the header colours to be used in this row.
- Use the Font colour selector to set the text colour to be used in this row.
- To add a background image to this row click Select Image. The image picker will appear and you can either upload an image to use or choose one from the library.
- Click Save to apply your chosen settings to the row.
- For advanced users only. See Styling your website for CSS additions.
Reordering widgets and rows
Click the 'Reorganise widgets' button at the top of the page to open up the widget moving menu
To move the widget within it's row
Click the widget you would like to move from the list and then hover over the widget you would like to swap it with and click 'Swap'
To move the widget to a new row
Click the 3 lines to the left of the row you would like to move and then drag it to the location you would like the row to go
Once you have moved the widget to the correct location choose 'Save Changes'.