{"id":57,"date":"2023-07-05T21:19:45","date_gmt":"2023-07-05T13:19:45","guid":{"rendered":"https:\/\/stackproperty.sg\/blog\/?p=57"},"modified":"2023-10-02T09:10:54","modified_gmt":"2023-10-02T01:10:54","slug":"how-to-embed-a-stackproperty-web-widget-on-your-wordpress-website-for-free","status":"publish","type":"post","link":"https:\/\/stackproperty.sg\/blog\/how-to-embed-a-stackproperty-web-widget-on-your-wordpress-website-for-free\/","title":{"rendered":"How to Embed a StackProperty Web Widget on Your WordPress Website for Free"},"content":{"rendered":"\n<p>Our web widgets are free for everyone to use on their websites. Whether your website is built on WordPress or another <a rel=\"noreferrer noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/Content_management_system\" target=\"_blank\">Content Management System<\/a>, the process of embedding StackProperty widgets is very similar.<\/p>\n\n\n\n<p>In this post, I will share with you the steps needed to embed our widgets on your WordPress website. <\/p>\n\n\n\n<p>Let&#8217;s start!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_55 counter-hierarchy ez-toc-counter ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-69db6d924128e\" ><span class=\"\"><span style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-69db6d924128e\"  type=\"checkbox\" id=\"item-69db6d924128e\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/stackproperty.sg\/blog\/how-to-embed-a-stackproperty-web-widget-on-your-wordpress-website-for-free\/#Step_1_Go_to_The_Widgets_Page_to_Select_a_Widget\" title=\"Step 1 : Go to The Widgets Page to Select a Widget\">Step 1 : Go to The Widgets Page to Select a Widget<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/stackproperty.sg\/blog\/how-to-embed-a-stackproperty-web-widget-on-your-wordpress-website-for-free\/#Step_2_Customise_Your_Widget\" title=\"Step 2 : Customise Your Widget\">Step 2 : Customise Your Widget<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/stackproperty.sg\/blog\/how-to-embed-a-stackproperty-web-widget-on-your-wordpress-website-for-free\/#Step_3_Copy_the_Widget_Code\" title=\"Step 3 : Copy the Widget Code\">Step 3 : Copy the Widget Code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/stackproperty.sg\/blog\/how-to-embed-a-stackproperty-web-widget-on-your-wordpress-website-for-free\/#Step_4_Login_to_Your_WordPress_Admin_Create_a_Post\" title=\"Step 4 : Login to Your WordPress Admin &amp; Create a Post\">Step 4 : Login to Your WordPress Admin &amp; Create a Post<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/stackproperty.sg\/blog\/how-to-embed-a-stackproperty-web-widget-on-your-wordpress-website-for-free\/#Step_5_Check_that_Your_Widget_is_Working\" title=\"Step 5 : Check that Your Widget is Working\">Step 5 : Check that Your Widget is Working<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Go_to_The_Widgets_Page_to_Select_a_Widget\"><\/span>Step 1 : Go to The Widgets Page to Select a Widget<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Visit <a rel=\"noreferrer noopener\" href=\"https:\/\/stackproperty.sg\/widgets\" target=\"_blank\">https:\/\/stackproperty.sg\/widgets<\/a>. There are over <strong>70+ web widgets in 4 categories<\/strong> that you can choose from:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HDB Resale Widgets<\/li>\n\n\n\n<li>HDB Rental Widgets<\/li>\n\n\n\n<li>Private Property Sale Widgets<\/li>\n\n\n\n<li>Private Property Rental Widgets<\/li>\n<\/ul>\n\n\n\n<p>For this tutorial, let&#8217;s choose &#8220;HDB Resale Widgets&#8221;, which is the default category. Scroll down the page and locate a widget that you would like to embed. Every widget that you see on the page is accompanied by a demo and a short description.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"366\" src=\"https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/widget-example.png\" alt=\"Widget demo and example\" class=\"wp-image-58\" srcset=\"https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/widget-example.png 800w, https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/widget-example-768x351.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Let&#8217;s go with the first widget on the page &#8211; Comparison of HDB resale transactions grouped by town, for the chosen period. To customise it, click on the &#8220;<a href=\"https:\/\/stackproperty.sg\/widgets\/generate?widget=hdb_resale_towns_transactions_chart&amp;widget_value=&amp;widget_value2=&amp;widget_bar_radius=5&amp;widget_type=bar&amp;widget_color1=%233835a1&amp;widget_color2=%23ffa600&amp;widget_color3=%231f6df5&amp;widget_color4=%23ff7c43&amp;widget_color5=%235233f9&amp;widget_color6=%23f95d6a&amp;widget_color7=%23a05195&amp;dr=6m\" target=\"_blank\" rel=\"noreferrer noopener\">Customise and get embed code<\/a>&#8221; link.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Customise_Your_Widget\"><\/span>Step 2 : Customise Your Widget<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You should now be at the widget customiser page. In the &#8220;Widget Generator&#8221; box, you can choose different settings to change the look and feel of your widget. You can also see a demo \/ preview of the widget in the &#8220;Widget Demo&#8221; section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"403\" src=\"https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/widget-customise.png\" alt=\"Widget customiser and demo\" class=\"wp-image-60\" srcset=\"https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/widget-customise.png 800w, https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/widget-customise-768x387.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>When you are done with updating the settings, click on the &#8220;Generate widget demo &amp; code&#8221; button. The new widget demo will then render in in the &#8220;Widget Demo&#8221; section for you.<\/p>\n\n\n\n<p>When you are satisfied with the outcome, check out the next step.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Copy_the_Widget_Code\"><\/span>Step 3 : Copy the Widget Code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You can click on the &#8220;Copy code&#8221; button in the &#8220;Widget Code&#8221; section to copy the latest widget code. This code can be pasted in any website to render the configured widget. Let&#8217;s see how you can do this for WordPress.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Login_to_Your_WordPress_Admin_Create_a_Post\"><\/span>Step 4 : Login to Your WordPress Admin &amp; Create a Post<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Login to your WordPress admin and open (or create) the post that you want to embed the widget on. Create a new block using the &#8220;+&#8221; symbol. Locate the &#8220;Custom HTML&#8221; component using the component filter. Select the &#8220;Custom HTML&#8221; component.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"365\" src=\"https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/wp-block-custom-html.png\" alt=\"Custom HTML component\" class=\"wp-image-61\" srcset=\"https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/wp-block-custom-html.png 800w, https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/wp-block-custom-html-768x350.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>You should the &#8220;Custom HTML&#8221; component appearing on your post. Paste into the box the HTML that you copied from step 3. Then click outside the box to exit the editing mode.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"333\" src=\"https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/wp-block-custom-html-2.png\" alt=\"HTML component\" class=\"wp-image-62\" srcset=\"https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/wp-block-custom-html-2.png 800w, https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/wp-block-custom-html-2-768x320.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>It&#8217;s done! Now, it&#8217;s time to check that it works.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5_Check_that_Your_Widget_is_Working\"><\/span>Step 5 : Check that Your Widget is Working<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>At the top right corner of your WordPress Admin, click on preview &gt; preview in new tab. The preview should be launched and you should be able to see the embedded widget.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"597\" src=\"https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/wp-widget-preview.png\" alt=\"Widget preview\" class=\"wp-image-63\" srcset=\"https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/wp-widget-preview.png 800w, https:\/\/stackproperty.sg\/blog\/wp-content\/uploads\/2023\/07\/wp-widget-preview-768x573.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>That&#8217;s it! When you are ready, you can publish your post. The widget will update automatically when the data changes. There is no need to regenerate the widget code to stay updated.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Explore over 70+ free web widgets showcasing Singapore property statistics and charts. Learn how to embed them on your website for free!<\/p>\n","protected":false},"author":1,"featured_media":139,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[10],"class_list":["post-57","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-tos","tag-widgets"],"_links":{"self":[{"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/posts\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":4,"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions\/68"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/media\/139"}],"wp:attachment":[{"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/media?parent=57"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/categories?post=57"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/tags?post=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}