How to embed and customize a feed widget

Boost your digital presence by integrating a community feed widget into your website.

Here are some examples from other partners

Follow the steps below to further customize and embed the widget to suit your preferences.

Step 1: Customize the Widget

Before embedding the widget, you can customize its appearance and functionality to fit your website’s design. Here are the customizable elements you can adjust:

Edit Widget Title

Change the title of the widget to better match your site's theme or the purpose of the feed. The default title is "Our Online Community", but you can change {{title}} variable below to customise.

Edit Widget Height

Adjust the height of the widget to ensure it fits well within your webpage layout. The height is measured in pixels. The default height is 400 pixels, but you can change {{title}} variable below to customise.

Add Keyword

You have the option to filter the posts displayed by specifying a keyword. If you leave this field blank, the widget will show the latest posts from the community. Change {{keyword}} variable below to customise.

Header Background Color

Customize the header background color to align with your website’s color scheme. You can use either the color name or the hex code. The default is #2da46d, but you can change {{background}} variable below to customise.

Header Text Color

Similarly, you can adjust the header text color. The default is #FFFFFF, but you can change {{text}} variable below to customise.

Replace the variables above with your customized values:

<a href="https://healthunlocked.com/{{subdomain}}" id="{{subdomain}}HUWidget">{{title}}</a>
<script>
 var _huq = _huq || [];
 _huq.push(['_createPostsWidget', '{{subdomain}}HUWidget', '{{subdomain}}', '{{height}}', true, '{{background}}', '{{text}}', '{{keyword}}']);

 (function () {
     var hu = document.createElement('script'); hu.type = 'text/javascript'; hu.async = true; hu.id = 'huscript';
     hu.src = 'https://healthunlocked.com/bg/widget';
     var s = document.getElementsByTagName('script')[document.getElementsByTagName('script').length - 1]; s.parentNode.insertBefore(hu, s);
 })();
</script>

Step 2: Embed the Widget Code

To integrate the customized widget into your website, paste the provided code directly into the HTML portion of your site. This will embed the feed widget seamlessly into your webpage.

Adding Custom HTML to Popular Platforms

To help you add custom HTML to popular platforms like WordPress, Squarespace, Wix, and Weebly, here are some useful articles:

WordPress

• https://wordpress.com/support/wordpress-editor/blocks/custom-html-block/

Squarespace

• https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-code-to-your-site

Wix

• https://support.wix.com/en/article/wix-editor-adding-a-custom-element-to-your-site

Weebly

• https://weeblytutorials.com/add-html-to-weebly/

Need More Help?

If you encounter any issues or need further assistance, don’t hesitate to contact the support team for help.

By following these steps, you can effectively customize and embed a feed widget to enhance your website’s engagement and digital presence.