How to Embed a Project Widget on Your Website

Category
Funding
Published
Updated
Views
10
Topics
funding, guide, embed, widget, integration
πŸ“¦ What is the Embed Widget? The Embed Widget lets you display your Funding Hub project on any external website β€” your blog, portfolio, organization page, or partner site. Visitors can see your project's progress and donate without leaving the host website. Opening the Widget Builder Navigate to your project's public page in the Funding Hub. Click the "</> Embed" button in the top navigation bar. The Embed Project Widget customizer modal will open. βš™οΈ Customizing Your Widget Use the toggle switches on the left panel to show or hide each section of your widget: Hero Section (Video/Image) β€” Shows the project video or cover image. Default: On Progress Bar β€” Visual funding progress toward the goal. Default: On Funding Stats β€” Raised amount, backers, and days left. Default: On Project Description β€” The main project text (adjustable word count). Default: On SDG Goals β€” UN Sustainable Development Goal badges. Default: On Donate Button β€” Call-to-action button for backers. Default: On Supporters List β€” Shows recent backers. Default: Off Reward Tiers β€” Displays available reward tiers. Default: Off Description Word Limit When the Project Description toggle is enabled, a slider appears to set the maximum word count (range: 30–300 words, default: 100). Adjust this to control how much of the description appears in the widget. Theme Choose between: πŸŒ™ Dark β€” Dark background, great for modern sites. β˜€οΈ Light β€” Light background, blends with lighter websites. Dimensions Set the Width and Height in pixels. Defaults are 400Γ—680. Adjust these to fit the layout of your target website. πŸ‘οΈ Live Preview The right panel shows a real-time preview of your widget. Every toggle, theme, or size change updates the preview instantly so you can see exactly what it will look like on your site. On mobile, switch between the βš™οΈ Customize and πŸ‘οΈ Preview tabs. πŸ“‹ Getting the Code At the bottom of the builder, you have two options: Option 1: Embed Code (Recommended) Click the "Embed Code" tab. You will see an iframe snippet ready to copy. Click "Copy" and paste this HTML into your website wherever you want the widget to appear. Option 2: Direct Link Click the "Direct Link" tab to get a standalone URL. Share this link directly β€” it opens the widget in a full page. Useful for social media or messaging. πŸ’‘ Tips For sidebar placements, use a width of 300–350px and enable only Progress Bar + Stats + Donate Button. For full-width sections, use a width of 600–800px and enable all sections. The embed is fully responsive within the iframe dimensions you set. The widget loads your project's live data β€” no need to update the embed when your campaign progresses.