⚡️ Introduction

The News Widget Plugin is a versatile product that enables users to embed a customizable news widget on their websites or platforms. This widget provides access to Hindustan Times or Live Mint news content, allowing users to display the latest news articles, headlines, and images from Hindustan Times within their own platforms. The widget is designed to be easily integrated and placed anywhere on the client's website, offering a seamless news consumption experience to their audience.

⚡️ Installation

Copy-paste the script <link> into your <head>.

Copy Link

<script src="ht-widget.js"></script>

⚡️ Integrations

After adding script of HTWidget SDK we can access intance of HTWidget in the window object.

We can invoke the SDK by calling the render function from the HTWidget instance with custom configurations 

<head>
<script src="ht-widget.js"></script>
</head>
<body>
....
<div id="app"></div>
<script>
window.addEventListener('load', () => {
    window.HTWidget.render({
        layout: 'page',
        element: 'app',
        clientId: 'CLIENT_ID',
        clientSecret: 'CLIENT_SECRET',
    });
});
</body>

Invoking HTWidget with custom event emitter

It will be useful in the scenario when your script loaded asyncronously or window object does not contain htWidget instance on time of page load.

Note: Make sure to register htWidgetLoad event before the HTWidget script get loaded

window.addEventListener('htWidgetLoad', () => {
        window.HTWidget.render({
            layout: 'page',
            element: 'app',
            clientId: 'CLIENT_ID',
            clientSecret: 'CLIENT_SECRET',
        });
    });

⚡️ Configurations

Configuration Description Type Default
layout Type of the widget client wants to display page -
element Id of the element to inject SDK HTML string app
clientId Unique id of the user integrating SDK string -
clientSecret Unique client secret to authenticate with HTWidget SDK string -
primaryColor A primary color for buttons and link string #05AFC9

⚡️ Web

Even though in above integration example there is no Javascript framework used but HTWidget can be integrated and compatible with all JS frameworks like Angular, React, Next JS etc.

All we need to do is to invoke SDK on init lifecycle methods for example ngOnInit in Angular and useEffect in React or Next JS

Angular Integration


ngOnInit(): void {
    window.HTWidget.render({
        layout: 'page',
        element: 'app', //make sure to add element with the given ID in component HTML
        clientId: 'CLIENT_ID',
        clientSecret: 'CLIENT_SECRET',
        primaryColor: '#05AFC9'
    });
}

React/Next Integration


useEffect(() => {
    window.HTWidget.render({
        layout: 'page',
        element: 'app', /** make sure to add element with the given ID in component JSX **/
        clientId: 'CLIENT_ID',
        clientSecret: 'CLIENT_SECRET',
    });
}, [])