Website widgets
Put parts of Sevastack on your own website with a copy-paste snippet. Everything people enter goes straight into your Sevastack account, with the same checks as Sevastack's own pages. No programming and no API key needed.
Before you start: two settings
- In Sevastack, open Settings → Share & embed → Embed widget and switch embedding on.
- Under Allowed websites, add every address your website uses, for example
https://yourngo.organdhttps://www.yourngo.org. Browsers only show the widget on sites in this list. Anywhere else it shows a blank box, so a copied snippet can't be put on someone else's site.
That page also shows your organisation's short code (for example SEVAFOUNDATION) and ready-made snippets with it filled in. The examples below use YOURCODE.
The widgets
Volunteer sign-up form
People fill in their name, mobile number (or email) and age and become volunteers in your Sevastack account. Skills, address and emergency contact are optional.
<div data-sevastack-volunteer="YOURCODE"></div>
<script src="https://www.sevastack.in/embed.js" async></script><iframe src="https://www.sevastack.in/embed/YOURCODE/volunteer" width="100%" height="900" frameborder="0"></iframe>Upcoming activities
Your next 12 published, public volunteer activities with date, place and spots left. Register opens the activity page; when an activity is full, new sign-ups join the waitlist.
<div data-sevastack-activities="YOURCODE"></div>
<script src="https://www.sevastack.in/embed.js" async></script><iframe src="https://www.sevastack.in/embed/YOURCODE/activities" width="100%" height="560" frameborder="0"></iframe>Volunteer impact counter
Three totals: volunteers, hours given and activities held, refreshed every hour. Numbers only, never names.
<div data-sevastack-impact="YOURCODE"></div>
<script src="https://www.sevastack.in/embed.js" async></script><iframe src="https://www.sevastack.in/embed/YOURCODE/impact" width="100%" height="200" frameborder="0"></iframe>Donation form
Donors give through your connected payment gateway and get their receipt (with 80G where it applies). Needs a plan that includes the donation widget.
<div data-sevastack-donate="YOURCODE"></div>
<script src="https://www.sevastack.in/embed.js" async></script><iframe src="https://www.sevastack.in/embed/YOURCODE/donate" width="100%" height="640" frameborder="0" allow="payment"></iframe>Campaign list
Your public fundraising campaigns with progress bars. Needs a plan that includes the donation widget.
<div data-sevastack-projects="YOURCODE"></div>
<script src="https://www.sevastack.in/embed.js" async></script><iframe src="https://www.sevastack.in/embed/YOURCODE/projects" width="100%" height="600" frameborder="0"></iframe>You can put several widgets on one page. Include the embed.js line once, after the last widget. With the code snippet the widget grows and shrinks to fit its content. With the embed box, set a height that fits.
Where to paste it
| Website builder | Steps |
|---|---|
| WordPress | Edit the page → add a Custom HTML block → paste the code snippet → Update. |
| Wix | Add → Embed code → Embed HTML → choose “Code” → paste the embed box → drag it to size. |
| Google Sites | Insert → Embed → “Embed code” → paste the embed box. |
| Squarespace | Add a Code block → paste the embed box. |
| Webflow | Add an Embed element → paste the code snippet. |
| Hand-built site | Paste the code snippet where the widget should appear. |
Your own domain
If your organisation has a verified custom domain in Sevastack (for example donate.yourngo.org), the snippets on the settings page already use it. Keep using those: volunteers who sign up then sign in to the portal on your domain.
Options
| Attribute | Widget | What it does |
|---|---|---|
data-sevastack-project="PROJECT_ID" | Donation form | Opens the form with that campaign selected. |
data-base="https://donate.yourngo.org" | Any (on the script tag) | Loads widgets from your custom domain even if the script came from elsewhere. |
To mount a widget added to the page later (for example in a single-page app), call window.Sevastack.scan().
Privacy and safety
- The sign-up widget uses the same rules as Sevastack's own sign-up page: age check (18+), consent record, spam and bot protection, and your plan's volunteer limit.
- Volunteers who sign up through the widget are marked Found us via: website_widget on their profile, so you can see which channel works.
- The impact counter and activity list never show volunteers' names, phone numbers or emails.
- Plans that include custom branding hide the small “Powered by Sevastack” line.
Troubleshooting
| You see | Fix |
|---|---|
| A blank box, or “refused to connect” | Add your website's exact address (with and without www) under Allowed websites and save. Allow a minute for the change. |
| “Page not found” inside the box | Embedding is switched off, or the short code in the snippet is wrong. Copy the snippet again from Settings. |
| “No upcoming activities right now” | Only activities that are published, marked public and dated today or later appear. |
| The widget is cut off at the bottom | With the embed box, increase height. With the code snippet the height adjusts by itself. |
| “Reached the volunteer limit on its plan” | Your plan's volunteer limit is full. Upgrade, or archive volunteers who have left. |