/weweb-tutorials

How to set up a donation system on a WeWeb website?

Explore our simple step-by-step guide to setting up a donation system on your WeWeb website to help your non-profit or cause garner funds effortlessly. 160 characters.

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Book a free No-Code consultation

How to set up a donation system on a WeWeb website?

Step 1: Sign In To Your WeWeb Account

The first thing you should do is sign in to your WeWeb account. Visit WeWeb’s website and click on the ‘Sign In’ button or link available on the front page. Input your username and password when prompted to do so.

Step 2: Open the Website Editor

The next step is to open your website editor. Locate the website you want to set up a donation system on Dashboard. Click on 'Edit Website' to open the website editor.

Step 3: Navigate To The Webpage You Want to Include a Donation System

Choose the webpage where you want to include the donation system from the menu on the left side of the website editor screen. Alternatively, if you want to create a new page for your donation system, click on 'Add page' from the same menu, name your new page and click on 'Create'.

Step 4: Add A Button or Embeddable Form

Depending on the look and feel you want your donation system to have, you can either add a simple button that will redirect your visitors to an external donation page or create an embeddable donation form right on your webpage.

  • To add a button to your website, click on 'Element' in website editor and simply drag and drop the 'Button' element into the desired area of your web page. Customize the button label to something like "Donate Now".

  • To use an embeddable form, first you need to create a donation form on a platform such as Donorbox, PayPal, or similar. Once the form is created, the platform will give you a generated code snippet that you'll need to embed in your WeWeb website. In the website editor, click on 'Embed' in the element menu, and drag and drop the 'Embed Code' box to the desired location on your webpage. Click on the embed box then add the generated code snippet to the box.

Step 5: Link the Donation Button/Form

Next, you need to link your button or form to your donation processing method.

  • If you choose to add a button that sends users to an external donation page, you need to insert the link of your donation page in the field provided for the button. To do this, click on the button, then click on 'Action' and select 'Link'. Insert the link of the donation page in the URL field.

  • If you chose to use an embeddable donation form, the form is typically linked to your donation processing platform as part of the embedding process, but you should verify this either by checking the preview or going directly to your live website.

Step 6: Publish Your Changes

The final step is to publish your changes. Click on the 'Publish' button visible in the upper right corner of your screen. This will make your donation system go live and accessible to your visitors.

Step 7: Test Your Donation System

Now that your donation system is live, it's crucial to test it. Try making a small donation to ensure that the process is working smoothly and as desired. This step is crucial to make sure your donors won't encounter problems while trying to make a donation.

There you have it! You've successfully set up the donation system on your WeWeb website. Feel free to notify your website visitors or constituents about this new donation feature on your website. They'll appreciate the improved accessibility.

Explore More Valuable No-Code Resources

No-Code Tools Reviews

Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.

Explore

WeWeb Tutorials

Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.

Explore

No-Code Tools Comparison

Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.

Explore

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Cookie preferences