Get started with the platform and learn how to use it.

Getting Started


## What Is This Site ?

> [buymeabeer.online](/ "buymeabeer.online") is your go-to platform for connecting with your supporters and fans. Whether you’re a content creator, artist, developer, or just someone who enjoys a cold brew, our website empowers you to receive support through payments or memberships.


## How Does it Work ?
At [buymeabeer.online](/ "buymeabeer.online"), we make it simple for your audience to show their appreciation. Here’s how it works:

**Payments**: Supporters can contribute directly to you by buying you a virtual beer for a service or digital good that you provide. It’s like a friendly gesture at the digital pub – a way to say, “Cheers!” for your hard work.

**Memberships**: Create exclusive content or perks for your loyal fans. With membership tiers, you can offer special access, early releases, or personalized shout-outs.

Whether you’re an independent creator or part of a community, [buymeabeer.online](/ "buymeabeer.online") provides a seamless experience for both you and your supporters. So raise your virtual glass and let the good vibes flow!

For detailed instructions on setting up your account, configuring donation links, and managing memberships, explore our comprehensive documentation. Cheers! 🍻

Introduction


## How Do I Sign-Up ?

> It free, quick and easy to sign up. 

[Sign Up](/auth/sign-up "Sign Up")  for an account by using your preferred Social Media provider (Google, Microsoft or Facebook) or email and password. During the sign-up process you will be prompted to create your page name, please note this can't be changed later.


Sign-up


## Onboarding Steps

Once you have signed up with BuyMeABeer you then need to complete the Stripe onboarding process to link your existing Stripe account, or to complete onboarding for a new Stripe account. It is up to you
on whether you will sign-up with an individual account or a business account. See [Stripe Onboarding](https://support.stripe.com/questions/what-do-i-need-to-do-to-verify-my-stripe-account "Stripe Onboarding") for more info


## Existing Stripe account

Navigate to [Profile](/connect/profile "Profile") page and Logon with your existing Stripe account and complete the onboarding steps. Once the Connect Onboarding has been completed Stripe will return you to buymeabeer online.


## New Stripe account

Navigate to [Profile](/connect/profile "Profile") page and complete the onboarding steps and providing any Know Your Customer (KYC) information required.

After providing the email address you wish to use for Stripe, which can be the same or different as the one used for BuyMeABeer,  the steps will look something like the following

> Utilise your 2FA authentication application to scan the provided code

<Image src="/assets/images/stripe_connect_onboarding1.webp" width="800" height="400" />

> Enter the code from your authenticator application

<Image src="/assets/images/stripe_connect_onboarding2.webp" width="800" height="400" />

> Click on 'Send my verification link' which will send an email to the address you registered with, you will need to click on the link in that email to validate the email address

<Image src="/assets/images/stripe_connect_onboarding3.webp" width="800" height="400" />

> Provide your business type information, this page may vary depending on which country you're based in. This setting may be relevant for tax purposes, as income generated from Stripe and paid to you either as an individual or business should be handled appropriately.
> We are unable to provide support or guidance and recommend you speak with your tax accountant to ensure you are in compliance with laws in your country.

<Image src="/assets/images/stripe_connect_onboarding4.webp" width="800" height="400" />

> If Individual is chosen please provide your personal details for identity/kyc purposes.

<Image src="/assets/images/stripe_connect_onboarding5.webp" width="800" height="400" />

> Provide information about what you will be providing for payment on Stripe, we suggest 'Other Digital Goods' as industry and under 'Product Description' something that aligns with what you offers supporters, e.g 'Social media personality, Digital Artist, Musician etc.'

<Image src="/assets/images/stripe_connect_onboarding6.webp" width="800" height="400" />



> Enter details that will be added to payment details, e.g 'buymeabeer.online' or 'Bob - Artist', and your phone number.

<Image src="/assets/images/stripe_connect_onboarding8.webp" width="800" height="400" />



> If you wish to donate a percentage of membership/payments to [Stripe Climate](https://stripe.com/climate "Stripe Climate") then configuration as per your requirements.

<Image src="/assets/images/stripe_connect_onboarding9.webp" width="800" height="400" />



> If you wish use [Stripe Tax](https://stripe.com/tax "Stripe Tax") to let you calculate, collect, and report tax on global payments then select digital goods and Opt-in. 

<Image src="/assets/images/stripe_connect_onboarding10.webp" width="800" height="400" />

> Once the Connect Onboarding has been completed Stripe will return you to the settings page of buymeabeer.

How to Onboard your BuyMeABeer.online account to Stripe

Stripe Onboarding

Billing


## One Off Payments

The quickest and simplest way to support is by making a One-off payment on the page of your user you wish to support.

You should see the details of what they have called the product (e.g 'beer' ) and the quality of the item that you want to purchase for them. It defaults to 1, but you can increase the volume to 3 or 5 items and the Checkout button will update with
the new total. 

Upon clicking the Checkout box an Embedded Stripe hosted Checkout window will appear. You will need to provide an email address and enter your payment information using the presented payment options available in your country from Stripe.

One Off Payments


## Consuming a Subscription

Profile owners can configure subscriptions for their pages that allow you to support with regular payments with a weekly, monthly or yearly subscription.

The subscription option will be presented on the profile page, in order to subscribe you only need to select the time period you wish to consume, and then the Checkout button.

Upon clicking the Checkout button an Embedded Stripe hosted Checkout will appear that will allow you to place a subscription that will regularly pay the profile at the chosen schedule. 

## Cancelling a Subscription

You can cancel a subscription via the Stripe portal, using the username/email that you subscribed with. 

## Billing information

Subscriptions will incur a Stripe processing charge that varies depends upon payment method and taxes, and a BuyMeABeer platform fee per transaction. You should receive detailed invoices/receipts via email directly from Stripe, or you can view them from within the Stripe portal.



Subscription

Buttons


# How to configure a button for your site

This guide explains how to customize your "Buy Me a Beer" button and embed it on your website that your supporters can access your buymeabeer.online page directly from another site. Users who click the button will open new browser tab and be sent to your buymeabeer.online page.

<Image src="/assets/images/embed_button.webp" width="669" height="284" />

## 1.  Configuring Your Button

1. **Login:**  Log in to your buymeabeer.online account.
2. **Navigate to Settings:** Go to the "Settings - Buttons" section of the dashboard
3. **Customize Appearance:**
   - **Background:**  Use the gradient picker to choose a solid color, gradient, or even an image for your button's background.
   - **Emoji:** Select an emoji to add a personal touch to your button.
   - **Button Text:** Customize the text displayed on your button. The default is "Buy Me a Beer Online," but you can change it to something more specific to your content, like "Support My Work" or "Donate a Coffee." 
4. **Preview:**  As you customize your button, a preview will be displayed, so you can see how it will look on your website.
5. **Embed Code:** Once you're happy with the design, copy the provided embed code. This code contains an iframe element that you'll use to embed the button on your website.

## 2. Embedding Your Button

### 2.1  General Website Integration

1. **Paste the Embed Code:** Paste the copied embed code into the HTML of your website where you want the button to appear. 
2. **Adjust Size (Optional):** You can adjust the width and height of the iframe in the embed code to fit your website's design.

### 2.2  Specific Platforms

**WordPress:**

1. **Use a Custom HTML Block:** In the WordPress editor, add a "Custom HTML" block to your page or post.
2. **Paste the Code:** Paste the embed code into the Custom HTML block.

**Notion:**

1. **Create an Embed Block:** In Notion, add an "Embed" block.
2. **Paste the URL:**  Instead of pasting the entire iframe code, paste the URL from the iframe's `src` attribute into the Embed block. Notion will automatically embed the content.

**Substack:**

1. **Use the Code Injection Feature:**  Go to your Substack publication settings.
2. **Find the Code Injection Section:** Look for the section where you can add custom HTML code (usually in the "Design" or "Code" settings).
3. **Choose Header or Footer:** You can choose to inject the code in the `<head>` section of your Substack pages (for global inclusion) or within a specific post's `<body>` section. 
4. **Paste the Embed Code:** Paste the code into the appropriate code injection field.

**Other Platforms:**

- Most website builders and blogging platforms provide ways to add custom HTML. Look for "Custom HTML" blocks, "Embed" widgets, or "Code Injection" options in your platform's settings or editor.

## 3. Additional Notes

- **Responsive Design:** The embedded button is designed to be responsive and should adapt to different screen sizes.
- **Security:** The iframe embed method is a secure way to include content from another website. The iframe's content is isolated from your main website's code.
- **Customization Options:** We may add more customization options in the future. Let us know if you have any feature requests!

**Example Embed Code:**

```html
<iframe 
  src="https://www.buymeabeer.online/joe/embed?emoji=%F0%9F%8D%BB&background=%2309203f&buttonText=Buy%20Me%20a%20Beer%20Online"
  width="300" 
  height="200" 
  title="Buy Me a Beer Online" 
  frameborder="0"
></iframe>

Website Button

Fees


## Introduction

BuyMeABeer costs nothing to sign-up and create your account, there are no monthly fees or charges.

## Stripe Fees and Charges

Your BuyMeABeer account is linked to a Stripe Connect account that receives payments and subscriptions from your supporters. Your connected account is responsible for Stripe fees, refunds, and chargebacks 
and are subject to Stripe processing fees that vary depending on country, payment method used, if currency conversion is required. In addition BuyMeABeer.online charges a 5% platform fee per
payment which is automatically deducted from the transaction.

## Currency Conversion

Our platform accepts payments in 135+ currencies and will automatically convert those to your local currency.

### Example - USD customer

If the Stripe account is based in the USA, the checkout process for one-off payments or subscriptions will be presented in USD as the settlement currency. Your supporter if based in USA will be presented payment methods in USD and there will be no currency conversion charges. 
If the supporter is based in another country e.g France they will be presented a Payment page in EUR that is the converted value of your donation or subscription amount, and they will be charged in their local currency EUR. Your account will be subject to the
currency conversion charge from EUR (presentment currency) -> USD (settlement currency)

## Card Fees

Stripe has different acquiring fees for card usage based upon whether they are domestic or international cards. For example a United Kingdom domiliced customer making a GBP payment with domestic card issued from a United Kingdom bank will have lower fees than 
making a payment with card issued in Europe which will have higher fees.


## Example Payment

For a AUD $10.00 payment made by a customer in Australia on a domestic card, there would be a AUD $0.97 in taxes, Stripe and BuyMeABeer fees and you would receive AUD $9.03





Integrations


## Information

In the digital age, content creators, freelancers, and entrepreneurs often rely on multiple platforms to showcase their work, connect with their audience, and manage their finances. 
Two such platforms that have gained popularity are [buymeabeer.online](/ "buymeabeer.online") and [Linktree](http://linktr.ee "Linktree"). 

BuyMeABeer.online is a platform that allows creators to receive support and payments from their 
audience, while Linktree serves as a hub for all of one's online content. Integrating these two can streamline your online presence and make it easier for your supporters to contribute to your work. Here's how you can do it:

## Step-by-Step Guide

* **Create Your BuyMeABeer Account**: Start by setting up your account on BuyMeABeer.online. Customize your page with your branding, and ensure your payment methods are in place for supporters to use.

* **Set Up Your Linktree**: If you haven't already, create a Linktree account. This will be the central link you'll share across your social platforms, leading your audience to all your important content, including your BuyMeABeer page.

* **Locate Your BuyMeABeer Page Link**: Once your BuyMeABeer page is ready, copy the URL of your page. This is the link you'll be sharing on your Linktree.

* **Add Your BuyMeABeer Link to Linktree**: Log into your Linktree account, go to the 'Links' section, and add a new link. Paste your BuyMeABeer page URL here. Customize the title to something engaging like "Support My Work with a Beer" to attract your audience's attention.

* **Organize Your Links**: Position your BuyMeABeer link strategically among your other links. You might want to place it towards the top for higher visibility.

* **Promote Your Integrated Links**: With your BuyMeABeer link now part of your Linktree, promote your Linktree URL on your social media bios, email signatures, and any other platforms where you engage with your audience.

* **Share with your supporters**: Make a social media post to reminder your supporters that they can support you via BuymeaBeer.online and it can be accessed via the Linktree in your bio.

* **Monitor and Adjust**: Keep an eye on your Linktree analytics to see how your audience interacts with your links. Adjust the positioning and wording if necessary to maximize engagement.

By following these steps, you can effectively integrate BuyMeABeer.online with Linktree, creating a seamless experience for your audience to support your work. Remember, the key is to make it as easy as possible for your supporters to find and navigate your content and contribution options. Happy integrating!

For more detailed instructions and support, you can refer to the knowledge base articles provided by BuyMeABeer.online and Linktree's own support resources. Integrating these platforms not only simplifies the process for your supporters but also helps you maintain a cohesive online presence.

Integrating BuyMeABeer with Linktree


## Introduction



In the open-source community, support from peers and users plays a crucial role in maintaining and developing new features for projects. One way to facilitate this support is through donation platforms like "Buy Me A Beer" and GitHub Sponsors. 
This blog post will guide you through integrating "Buy Me A Beer" with your GitHub funding profiles, creating a seamless way for supporters to contribute to your work.

## Step-by-Step Guide

### Step 1: Setting Up Your "Buy Me A Beer" Profile

Before you can integrate with GitHub, you need to have an active "Buy Me A Beer" account. Set up your account on buymeabeer.online, customize your page with details about your project, and how payments will help. 
Complete the Stripe Onboarding process and ensure your banking information is correctly set up to receive payouts from payments or memberships you receive from buymeabeer.online

### Step 2: Configuring GitHub Sponsors

GitHub Sponsors allows the open-source community to financially support the people behind their favorite projects directly on GitHub. To enable GitHub Sponsors on your repository, you'll need to follow the steps outlined 
in the GitHub documentation. This involves creating a `FUNDING.yml` file in your repository's `.github` folder and adding your sponsorship details.

### Step 3: Linking "Buy Me A Beer" to GitHub

Once your "Buy Me A Beer" page is ready and your GitHub repository is configured to display a sponsor button, you can link the two. In your `FUNDING.yml` file, add a custom link that directs users to your "Buy Me A Beer" page. 
The syntax is straightforward:

```yaml
custom: ['https://www.buymeabeer.online/joe']
```

Replace `joe` with your actual "Buy Me A Beer" page URL.

### Step 4: Promoting Your Sponsorship Options

With everything set up, it's time to let your community know about the ways they can support your project. Share your GitHub repository and "Buy Me A Beer" profile on social media, your project's website, and within the project's documentation. 
Engaging with your community and expressing gratitude for their support encourages a positive relationship and can lead to more contributions.

### Conclusion

Integrating "Buy Me A Beer" with GitHub Sponsors is a straightforward process that can significantly benefit your open-source projects. By providing multiple avenues for support, you cater to the preferences of different supporters, 
potentially increasing the contributions your project receives. Remember to thank your contributors and maintain transparency about how their payments are being used to provide goods and services and further develop your work.

For more detailed instructions and best practices on setting up your funding profiles, refer to the resources provided by GitHub and "Buy Me A Beer" platforms. Happy coding, and cheers to your open-source journey!



Integrating BuyMeABeer with GitHub Sponsors


## Step-by-Step Guide

It's simple to add a Button to your Twitch stream

### Step 1: Configure Your Button

Use the button configuration tools on this [page](/buttons/details "Buttons") to design your button exactly how you want it to appear.

### Step 2: Take a Screenshot

- **Windows:** Press the **Print Screen** key on your keyboard to capture the entire screen. You can then paste the screenshot into an image editor (like Paint) and crop it to just the button. 
- **Mac:** Press **Command + Shift + 4**, then drag the crosshairs to select the button area you want to capture. The screenshot will be saved to your desktop.

### Step 3: Save the Screenshot

Save the screenshot as a **PNG** or **JPEG** file. 

### Step 4: Go to Your Twitch Dashboard

Log in to your Twitch account and go to your channel's dashboard, then click on the About section. Find the **Edit Panels** selector and click it.

### Step 5: Add your button

- Click on the + box then **Add a Text or Image Panel**. Click on the **Add Image** button then select the PNG or JPEG file you saved earlier.
- In the **Image Links To:** textbox enter the URL of your buymeabeer page, e.g ``https://www.buymeabeer.online/joe``
- Uncheck **Edit Panels** and the button with a hyperlink in it will appear on your stream page

### Step 6: Add a Twitch social media link

You can also add an additional social media link to your page, click on the **Edit about & links** and you'll be take to the Creator Dashboard - Settings - Channel - About tab.

- Under Social Links you can add the URL to your buymeabeer page, add a suitable title in the **Link Title** section and your page e.g ``https://www.buymeabeer.online/joe`` in a **Link URL** section, then click Add.



### Conclusion

Make sure your screenshot is clear and easy to read. You might need to experiment with different button sizes or zoom levels to get a good-looking image.

Now, viewers on your Twitch channel will see your custom button image in your panel. When they click on it, they'll be taken to your support page! 

With everything set up, it's time to let your Twitch community know about the ways they can support your project during one of your live streams. 



Integrating BuyMeABeer with Twitch

Learn how to setup your BuyMeABeer profile.

Setup


# Sign-up

Sign-up for an account on BuyMeABeer.online using your preferred Social Media provider (Google, Microsoft or Facebook) or email and password. During the sign-up process you will be prompted to create your page name, please note this can't be changed later.

Once you have provided a page name and proceeded through the account creation process you will land in the administration section for your page.

## Stripe Onboarding

Once your page has been created you will need to complete [Stripe Onboarding](/connect/profile "Onboarding") in order to confirm the your Stripe account and identity in order to be able to accept payments or memberships from your supporters.

## Payments

See [Configure Payments](/docs/configure-payments "Configure Payments")

How to Create your page on BuyMeABeer.online

Create Page


## How to configure Payments

If you browse to [Payments](/payments/details "Payments") you will find the default configuration provided for you when your account on BuyMeABeer was created. If you wish to change from the default donation item from 'Beer' to something else,
then you just need to up the 'Buy Me A What' textbox with what you want to call it, e.g Wine, Coffee, Pizza, Book etc.  

You can also alter the value of the donation amount from the default of 5, to a value more suitable your requirements, item you are calling it or your local currency requirements.

The Default Currency is provided by Stripe during your onboarding processing. If the currency on your page is incorrect or needs changing please [Contact Us](/contact "Contact Us") with the details.




Configure Payments


## How to configure Subscriptions

If you browse to [Membership](/membership/tiers "Membership") you can fill in a form that will configuration memberships. You can create multiple membership tiers (we recommend 3) and you can provide the Name, Details, Price per month (weekly and yearly automatically calculated)
Badge and Features 1, 2, 3 and 4 and if it's a Recommended plan. Upon clicking the Create button, the Membership Tier will be created and displayed. 


## How to delete Subscription Tier

You can easily delete subscriptions from the [Membership](/membership/tiers "Membership") page, simple click on the Actions button in the row corresponding to the Tier you wish to remove, click Delete and then click on the confirmation to delete.

## How to set Subscription Tier Recommended

It's easy to set a Tier to Recommended which will display the Tier in a halo box, simple click on the Actions button in the row corresponding to the Tier you wish to Recommended and it will toggle the Recommended setting for that Tier, either on or off.



Configure Subscriptions

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    code: "code",
    h1: "h1",
    h2: "h2",
    h3: "h3",
    li: "li",
    ol: "ol",
    p: "p",
    pre: "pre",
    span: "span",
    strong: "strong",
    ul: "ul",
    ...props.components
  }, {Image} = _components;
  if (!Image) _missingMdxReference("Image", true);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.h1, {
      id: "how-to-configure-a-button-for-your-site",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#how-to-configure-a-button-for-your-site",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "How to configure a button for your site"]
    }), "\n", _jsx(_components.p, {
      children: "This guide explains how to customize your \"Buy Me a Beer\" button and embed it on your website that your supporters can access your buymeabeer.online page directly from another site. Users who click the button will open new browser tab and be sent to your buymeabeer.online page."
    }), "\n", _jsx(Image, {
      src: "/assets/images/embed_button.webp",
      width: "669",
      height: "284"
    }), "\n", _jsxs(_components.h2, {
      id: "1--configuring-your-button",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#1--configuring-your-button",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "1.  Configuring Your Button"]
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Login:"
        }), "  Log in to your buymeabeer.online account."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Navigate to Settings:"
        }), " Go to the \"Settings - Buttons\" section of the dashboard"]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Customize Appearance:"
        }), "\n", _jsxs(_components.ul, {
          children: ["\n", _jsxs(_components.li, {
            children: [_jsx(_components.strong, {
              children: "Background:"
            }), "  Use the gradient picker to choose a solid color, gradient, or even an image for your button's background."]
          }), "\n", _jsxs(_components.li, {
            children: [_jsx(_components.strong, {
              children: "Emoji:"
            }), " Select an emoji to add a personal touch to your button."]
          }), "\n", _jsxs(_components.li, {
            children: [_jsx(_components.strong, {
              children: "Button Text:"
            }), " Customize the text displayed on your button. The default is \"Buy Me a Beer Online,\" but you can change it to something more specific to your content, like \"Support My Work\" or \"Donate a Coffee.\""]
          }), "\n"]
        }), "\n"]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Preview:"
        }), "  As you customize your button, a preview will be displayed, so you can see how it will look on your website."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Embed Code:"
        }), " Once you're happy with the design, copy the provided embed code. This code contains an iframe element that you'll use to embed the button on your website."]
      }), "\n"]
    }), "\n", _jsxs(_components.h2, {
      id: "2-embedding-your-button",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#2-embedding-your-button",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "2. Embedding Your Button"]
    }), "\n", _jsxs(_components.h3, {
      id: "21--general-website-integration",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#21--general-website-integration",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "2.1  General Website Integration"]
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Paste the Embed Code:"
        }), " Paste the copied embed code into the HTML of your website where you want the button to appear."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Adjust Size (Optional):"
        }), " You can adjust the width and height of the iframe in the embed code to fit your website's design."]
      }), "\n"]
    }), "\n", _jsxs(_components.h3, {
      id: "22--specific-platforms",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#22--specific-platforms",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "2.2  Specific Platforms"]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "WordPress:"
      })
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Use a Custom HTML Block:"
        }), " In the WordPress editor, add a \"Custom HTML\" block to your page or post."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Paste the Code:"
        }), " Paste the embed code into the Custom HTML block."]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Notion:"
      })
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Create an Embed Block:"
        }), " In Notion, add an \"Embed\" block."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Paste the URL:"
        }), "  Instead of pasting the entire iframe code, paste the URL from the iframe's ", _jsx(_components.code, {
          children: "src"
        }), " attribute into the Embed block. Notion will automatically embed the content."]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Substack:"
      })
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Use the Code Injection Feature:"
        }), "  Go to your Substack publication settings."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Find the Code Injection Section:"
        }), " Look for the section where you can add custom HTML code (usually in the \"Design\" or \"Code\" settings)."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Choose Header or Footer:"
        }), " You can choose to inject the code in the ", _jsx(_components.code, {
          children: "<head>"
        }), " section of your Substack pages (for global inclusion) or within a specific post's ", _jsx(_components.code, {
          children: "<body>"
        }), " section."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Paste the Embed Code:"
        }), " Paste the code into the appropriate code injection field."]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Other Platforms:"
      })
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Most website builders and blogging platforms provide ways to add custom HTML. Look for \"Custom HTML\" blocks, \"Embed\" widgets, or \"Code Injection\" options in your platform's settings or editor."
      }), "\n"]
    }), "\n", _jsxs(_components.h2, {
      id: "3-additional-notes",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#3-additional-notes",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "3. Additional Notes"]
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Responsive Design:"
        }), " The embedded button is designed to be responsive and should adapt to different screen sizes."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Security:"
        }), " The iframe embed method is a secure way to include content from another website. The iframe's content is isolated from your main website's code."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.strong, {
          children: "Customization Options:"
        }), " We may add more customization options in the future. Let us know if you have any feature requests!"]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Example Embed Code:"
      })
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-html",
        children: "<iframe \n  src=\"https://www.buymeabeer.online/joe/embed?emoji=%F0%9F%8D%BB&background=%2309203f&buttonText=Buy%20Me%20a%20Beer%20Online\"\n  width=\"300\" \n  height=\"200\" \n  title=\"Buy Me a Beer Online\" \n  frameborder=\"0\"\n></iframe>\n"
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


Getting Started

Billing

Buttons

Fees

Integrations

Setup

Website Button

Setup Guide

How to configure a button for your site

1. Configuring Your Button

2. Embedding Your Button

2.1 General Website Integration

2.2 Specific Platforms

3. Additional Notes

Table of Contents