News Widget

Wed July 24 2019

Related Information

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 Boolean false to hide photos true
data-descriptions descriptions Boolean false to hide description true

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: