Button Configuration
The below code will use Every.org styling, because the a tag has the data-every-style attribute. To use your own styling, remove that attribute and add your own class or css.
<!DOCTYPE html>
<html lang="en">
<head>
<script async defer src="https://embeds.every.org/0.4/button.js"></script>
</head>
<body>
<a data-every-style href="https://www.every.org/lilbubsbigfund#/donate">Donate</a>
</body>
</html>If you don't want to create a button in your site, style it and link to the widget you can use our styled button that it's fully customizable. We are linking the button to the widget automatically!
<script>
everyDotOrgDonateButton.createButton({
selector: '#yourElementToAttachTheButton',
nonprofitSlug: "yourNonprofitSlug"
})
</script>The createButton function accepts an object with the following properties:
{
/**
* Selector to render button in
*/
selector?: string;
/**
* Identifier for nonprofit on Every.org; you can get it by going to the
* nonprofit's profile on Every.org and looking at its URL
* @example
* If the URL is https://www.every.org/givedirectly, the slug is "givedirectly"
*/
nonprofitSlug: string;
/**
* Identifier for fundraiser on Every.org; you can get it by going to the
* fundraiser's profile on Every.org and looking at its URL
* @example
* If the URL is https://www.every.org/givedirectly/f/my-fundraiser, the slug is "my-fundraiser"
*/
fundraiserSlug?: string;
/**
* If present, do not show the normal www.every.org background,
* only show the donation modal and do not allow people to exit
* the modal.
* @default true
*/
noExit?: boolean;
/**
* If not present, just a link to hrefUrl
*/
onClick?: () => void;
/**
* Button text
* @default "Donate"
*/
label?: string;
// Css class to add to the button
className?: string;
// Show the every icon inside the button
withIcon: boolean;
// Useful styling props
bgColor?: string;
textColor?: string;
borderRadius?: string;
fontSize?: string;
padding?: string;
}