News Widget

The Construction Index News Widget, allows you to show the latest construction industry news headlines on your website, free of charge. It is a short piece of HTML code which is easy to add to your website.

How does the widget work?

Once the widget is in place on your website, it will refresh automatically as new stories are added to The Construction Index website.

What's it in for me?

It means visitors to your website have something new to look at every day, so they might visit more often, and stay longer when they do. More visitor traffic means more awareness of your website and your brand.

Basic Installation

Basic installation is very straight forward - just copy and past the below HTML code into your website and the widget will load!

<!-- BEGIN THE CONSTRUCTION INDEX NEWS WIDGET --> <script type="text/javascript" src="http://www.theconstructionindex.co.uk/widgets/embed-news.js"></script> <!-- END THE CONSTRUCTION INDEX NEWS WIDGET -->

Customisation Examples

You can customise the dimensions of the news widget using the method below. By default, the dimensions are 175x300 pixels.

Example 1: 300x300 widget with default colours:

<!-- BEGIN THE CONSTRUCTION INDEX NEWS WIDGET --> <script type="text/javascript">var tciNewsWidgetOptions = [{width:300, height:300}]</script> <script type="text/javascript" src="http://www.theconstructionindex.co.uk/widgets/embed-news.js"></script> <!-- END THE CONSTRUCTION INDEX NEWS WIDGET -->

Example 2: custom colours, 250x250 square widget:

<!-- BEGIN THE CONSTRUCTION INDEX NEWS WIDGET --> <script type="text/javascript">var tciNewsWidgetOptions = [{width:250, height:250, borderColour:'#4D4030', backgroundColour:'#4D4030', headerColour:'#ffffff'}]</script> <script type="text/javascript" src="http://www.theconstructionindex.co.uk/widgets/embed-news.js"></script> <!-- END THE CONSTRUCTION INDEX NEWS WIDGET -->

Example 3: 170x170 square widget with default colours:

<!-- BEGIN THE CONSTRUCTION INDEX NEWS WIDGET --> <script type="text/javascript">var tciNewsWidgetOptions = [{width:170, height:170}]</script> <script type="text/javascript" src="http://www.theconstructionindex.co.uk/widgets/embed-news.js"></script> <!-- END THE CONSTRUCTION INDEX NEWS WIDGET -->

Full List of Customisable Options

• width: Number without the 'px' unit of measurement
• height: Number without the 'px' unit of measurement
• borderColour: Hex Colour e.g. "#FF0000"
• backgroundColour: Hex Colour e.g. "#FF0000"
• headerColour: Hex Colour e.g. "#FFFFFF"