The Construction Index News Widget

The FREE construction news widget, allows you to show the most up to date construction news, on your own website. Using the short piece of HTML code below, this is an easy cut and paste website update.

How does the widget work?
Once the widget code is installed on your website, it will now automatically refresh with new construction news as its published on The Construction Index website. The Construction Index is free to access, with no subscription or registration pay wall.

What's it in for me?
The new modern design supported with custom colours, could really add to both the look and feel of your website. The fresh new content delivered daily will offer visitors to your website something new to engage with, some may even visit more often.

Basic Installation
Basic installation is very straight forward - just copy and paste the below HTML code into your website and the widget will load! If you have any problems, let us know via the contact us form. We will do our best to support you with any challenges you might face.

Customisation Examples
You can customise the dimensions of the construction news widget, using the method below. By default the dimensions are set to 200 x 400 pixels.

170x600 (no photos)

<!-- tci-news-widget -->
<div class="tci-news-widget" data-width="170" data-height="600" data-photos="false"></div>
<script src="https://www.theconstructionindex.co.uk/widgets/embed-news.js"></script>
<!-- /tci-news-widget -->

200x600

<!-- tci-news-widget -->
<div class="tci-news-widget" data-width="200" data-height="600"></div>
<script src="https://www.theconstructionindex.co.uk/widgets/embed-news.js"></script>
<!-- /tci-news-widget -->

300x600

<!-- tci-news-widget -->
<div class="tci-news-widget" data-width="300" data-height="600"></div>
<script src="https://www.theconstructionindex.co.uk/widgets/embed-news.js"></script>
<!-- /tci-news-widget -->

How to customise your new construction news widget

The recommended way would be to use HTML5 'data attributes' on your HTML tag, like in the examples above (they look like this data-example="value"). You can also configure single instances of the widget on your page using a Javascript variable, which will be an object with the keys / values below.

Data Attribute	Variable Key	Type	Example	Default
data-width	width	Integer	300 for 300px width, 100% for full width	200
data-height	height	Integer	500 for 500px height	400
data-background-colour	backgroundColour	String	#cacaca for grey background	#003964
data-header-colour	headerColour	String	#000000 for black header font colour	#E58705
data-photos	photos	Bool	false to hide photos	true
data-descriptions	descriptions	Bool	false to hide description	true
data-max-size	maxSize	Bool \| String	false for automatic or 'xs', 'sm', 'md', 'lg' to limit the number of columns	false

Here is an example showing all options using data attributes:

<div class="tci-news-widget" data-width="300" data-height="500" data-background-colour="#cacaca" data-header-colour="#000000" data-photos="true" data-descriptions="false"></div>

The preferred way to configure your widget is to use data attributes as shown in the above examples, but an example of the Javascript configuration (which was used in the first version of the news widget) would be:

var tciNewsWidgetOptions = {
    width: 300,
    height: 500,
    backgroundColour: '#cacaca',
    headerColour: '#000000',
    photos: false,
    description: false
}

Live Demo: