> ## Documentation Index
> Fetch the complete documentation index at: https://docs.givebutter.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Interactive Examples
> See Givebutter Widgets in action with interactive, customizable examples.
export const GivebutterWidget = ({widgetType = 'widget', id, ...props}) => {
const tagName = `givebutter-${widgetType}`;
const attrs = Object.entries(props).map(([key, value]) => {
const attrName = key.replace(/([A-Z])/g, '-$1').toLowerCase();
return `${attrName}="${String(value)}"`;
}).join(' ');
const idAttr = id ? `id="${id}"` : '';
const html = `<${tagName} ${idAttr} ${attrs}>`;
return ;
};
Explore live, interactive examples of Givebutter Widgets. These are real, functioning widgets that demonstrate how they'll look and behave on your website.
**Note:** These examples use a demo Givebutter account. When you implement widgets on your site,
you'll use your own Account ID and Campaign Codes.
## Button Widget
```html theme={null}
```
```html theme={null}
```
```html theme={null}
```
```html theme={null}
```
```html theme={null}
```
## Form Widget
```html theme={null}
```
Support Our Cause
Your donation makes a real difference in our community.
```html theme={null}
Support Our Cause
Your donation makes a real difference in our community.
```
```html theme={null}
```
## Goal Bar Widget
```html theme={null}
```
```html theme={null}
```
```html theme={null}
```
```html theme={null}
```
A classic thermometer-style visualization for your fundraising progress.
```html theme={null}
```
## Signup Form Widget