{"id":8642,"date":"2021-04-01T12:22:27","date_gmt":"2021-04-01T12:22:27","guid":{"rendered":"https:\/\/taggbox.com\/support\/?p=8642"},"modified":"2026-08-05T11:06:25","modified_gmt":"2026-08-05T11:06:25","slug":"how-to-embed-widget-on-html-website","status":"publish","type":"post","link":"https:\/\/taggbox.com\/support\/how-to-embed-widget-on-html-website\/","title":{"rendered":"How To Embed Widget On HTML Website"},"content":{"rendered":"\n<iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/4RnTb34QjPQ?si=7LVIib_lZEPBVXF6\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">Adding a Taggbox widget to your HTML website is a quick process. Once your gallery is ready, you only need to generate the embed code and paste it into the HTML of the page where you want your <a href=\"https:\/\/taggbox.com\/html-widget\/\">HTML widget<\/a> to appear.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Follow the steps below.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Log in to Your Taggbox Account<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sign in to your <a href=\"https:\/\/app.taggbox.com\/\">Taggbox account<\/a>. After logging in, you&#8217;ll land on the dashboard where all your galleries are available.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Create a Gallery and Add a Feed<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you don&#8217;t have a gallery yet, create one. Then:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"666\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Connect-your-preferred-social-media-1024x666.png\" alt=\"Create a Gallery and Add a Feed\" class=\"wp-image-47370\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Connect-your-preferred-social-media-1024x666.png 1024w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Connect-your-preferred-social-media-300x195.png 300w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Connect-your-preferred-social-media-768x499.png 768w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Connect-your-preferred-social-media-1536x999.png 1536w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Connect-your-preferred-social-media-2048x1332.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the gallery.<\/li>\n\n\n\n<li>Go to <strong>Content Gallery<\/strong> > <strong>Add Feed<\/strong>.<\/li>\n\n\n\n<li>Select your preferred social media or review platform, including:\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/taggbox.com\/instagram-widget\/\">Instagram widget<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/taggbox.com\/facebook-widget\/\">Facebook Widget<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/taggbox.com\/youtube-widget\/\">Youtube Widget<\/a>.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Moderate Your Content (Optional)<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"666\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Moderate-Your-Content-1024x666.png\" alt=\"Moderate Your Content\" class=\"wp-image-47371\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Moderate-Your-Content-1024x666.png 1024w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Moderate-Your-Content-300x195.png 300w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Moderate-Your-Content-768x499.png 768w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Moderate-Your-Content-1536x999.png 1536w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Moderate-Your-Content-2048x1332.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can choose exactly which posts appear on your website.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open <strong>Content Gallery<\/strong>.<\/li>\n\n\n\n<li>Review all imported posts.<\/li>\n\n\n\n<li>Mark the posts as <strong>Public<\/strong> or <strong>Private<\/strong>.<\/li>\n\n\n\n<li>Add product tags if you&#8217;re using shoppable galleries.<\/li>\n\n\n\n<li>Organize your content before publishing.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">This ensures only the content you want visitors to see is displayed on your website through <a href=\"https:\/\/taggbox.com\/moderation\/\">moderation<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Customize Your Widget<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Go to <a href=\"https:\/\/taggbox.com\/customization\/\"><strong>Customize<\/strong><\/a><strong> &amp; Publish<\/strong> to personalize your widget&#8217;s appearance.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"666\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Customize-your-widget-1024x666.png\" alt=\"Customize Your Widget\" class=\"wp-image-47372\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Customize-your-widget-1024x666.png 1024w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Customize-your-widget-300x195.png 300w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Customize-your-widget-768x499.png 768w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Customize-your-widget-1536x999.png 1536w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Customize-your-widget-2048x1332.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can customize:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Theme and layout<\/li>\n\n\n\n<li>Card styles<\/li>\n\n\n\n<li>Background colors<\/li>\n\n\n\n<li>Fonts<\/li>\n\n\n\n<li>Custom CSS<\/li>\n\n\n\n<li>Banner settings<\/li>\n\n\n\n<li>Product CTA<\/li>\n\n\n\n<li>Other display options<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Use the live preview to see how your widget will look before publishing.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Generate the Embed Code<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"666\" src=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Generate-the-Embed-Code-1024x666.png\" alt=\"Generate the Embed Code\" class=\"wp-image-47373\" srcset=\"https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Generate-the-Embed-Code-1024x666.png 1024w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Generate-the-Embed-Code-300x195.png 300w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Generate-the-Embed-Code-768x499.png 768w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Generate-the-Embed-Code-1536x999.png 1536w, https:\/\/taggbox.com\/support\/wp-content\/uploads\/2021\/04\/Generate-the-Embed-Code-2048x1332.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once you&#8217;re satisfied with your widget:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click <strong>generate code<\/strong>.<\/li>\n\n\n\n<li>Select <strong>HTML<\/strong> from the list of publishing platforms.<\/li>\n\n\n\n<li>Choose the appropriate <strong>gallery type<\/strong> if required.<\/li>\n\n\n\n<li>Adjust the widget&#8217;s <strong>width<\/strong> and <strong>height<\/strong> according to your website layout.<\/li>\n\n\n\n<li>Copy the generated embed code.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 7: Add the Code to Your HTML Website<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open the HTML file or webpage where you want to display the widget.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Paste the copied embed code inside the section where you want your <a href=\"https:\/\/taggbox.com\/widget\/\">website widget<\/a> to appear, for example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Homepage<\/li>\n\n\n\n<li>Landing page<\/li>\n\n\n\n<li>Product page<\/li>\n\n\n\n<li>About page<\/li>\n\n\n\n<li>Blog page<\/li>\n\n\n\n<li>Any custom HTML page<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Save your changes.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 8: Publish Your Website<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After adding the code:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Save your HTML file.<\/li>\n\n\n\n<li>Upload or publish the updated website to your server.<\/li>\n\n\n\n<li>Open your website in a browser to verify that the widget is displaying correctly.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Your Taggbox widget should now appear on your HTML website.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Troubleshooting<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If your widget does not appear correctly, check the following:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Verify the Embed Code<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ensure the complete embed code has been copied and pasted without any modifications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Check the Placement<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Confirm that the code has been inserted in the correct section of your HTML page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Clear Browser Cache<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Refresh your browser or clear the cache to load the latest version of the page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Check Widget Visibility<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure the posts in your gallery are marked as <strong>Public<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Confirm Feed Connection<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If your gallery isn&#8217;t updating, verify that your connected social account is still active and authorized.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Need Additional Help?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re still facing issues embedding your widget, <a href=\"https:\/\/taggbox.com\/contact-us\/\">contact the Taggbox support team<\/a>. Share your gallery details and the webpage where you&#8217;re embedding the widget so they can help identify the issue quickly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding a Taggbox widget to your HTML website is a quick process. Once your gallery is ready, you only need to generate the embed code and paste it into the HTML of the page where you want your HTML widget to appear.&nbsp; Follow the steps below. Step 1: Log in to Your Taggbox Account Sign [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[279],"tags":[],"class_list":["post-8642","post","type-post","status-publish","format-standard","hentry","category-integration-widget"],"_links":{"self":[{"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/posts\/8642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/comments?post=8642"}],"version-history":[{"count":2,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/posts\/8642\/revisions"}],"predecessor-version":[{"id":47374,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/posts\/8642\/revisions\/47374"}],"wp:attachment":[{"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/media?parent=8642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/categories?post=8642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taggbox.com\/support\/wp-json\/wp\/v2\/tags?post=8642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}