This article shows you how to accept QUID payments on your Blogger site. For this example I will be adding QUID to the blog https://quidblogger.blogspot.com.

Create a QUID API Key

Follow these steps to create your API key

Add the QUID JavaScript library to your site

The QUID JavaScript library is the code that creates all the buttons and sliders on your site. It needs to be added to a part of your site that will be visible on every page where you might want a QUID button or slider. For this Blogger blog, I've added the code to my Sidebar.

In your Blogger admin panel, navigate to your Layout editor:

In one of the areas that allows for the addition of Blogger Gadgets, click on the "+ Add a Gadget" button and select the "HTML/JavaScript" gadget type from the pop-up window.  In the gadget editor, leave the gadget Visible checkbox checked (don't worry, there won't be anything displayed in this gadget), the Titlefield blank and add the following code in the Content field, making sure to use your own API key.

<link rel="stylesheet" href="https://js.quid.works/v1/assets/quid.css">
<script src="https://js.quid.works/v1/client.js"></script>
<script>
    quid.autoInit({
      apiKey: 'your-QUID-API-key',
      onPaymentSuccess: function(){},
    });
</script>

Save the gadget to close the configuration window and save the layout arrangement. I've moved the new gadget to the bottom of my sidebar so that neither the space it occupies nor the border between gadgets looks out of place.

Add a QUID tip slider in your sidebar

In the Layout editor, click on the "+ Add a Gadget" button in the sidebar area where you want the QUID slider. Select the "HTML/JavaScript" gadget type from the pop-up window.  In the gadget editor, leave the gadgetVisible checkbox checked, in the Title field add something like "Support This Site" and add the following code in the Content field, customizing the QUID slider settings as you want:

Welcome to my Blogger blog. If you like the blogging on this Blogger blog, feel free to donate some fake money!
<div class="quid-slider"
    quid-amount="1"
    quid-min-amount="0.01"
    quid-max-amount="2.00"
    quid-currency="CAD"
    quid-product-id="QUID Blogger Tip"
    quid-product-url="https://quidblogger.blogspot.com/"
    quid-product-name="QUID Blogger"
    quid-text="TIP"
    quid-product-description="Thanks for the Tip" />
</div>

Add the QUID payment code to your blog posts

In your Blogger admin panel, navigate to Posts and either create a new post or select the Edit link for an existing post. In the blog post editor, switch from the Compose editor to the HTML editor.

Navigate to the place in the HTML source where you want the QUID slider to appear and add the following code, making the appropriate changes for your site:

<div class="quid-slider"
    quid-amount="1"
    quid-min-amount="0.01"
    quid-max-amount="2.00"
    quid-currency="CAD"
    quid-product-id="QUID Blogger Tip"
    quid-product-url="https://quidblogger.blogspot.com/"
    quid-product-name="QUID Blogger"
    quid-text="TIP"
    quid-product-description="Thanks for the Tip" />
</div>

Click on the Update button to save your blog post and load the blog page as a visitor to see the QUID slider in action!

Did this answer your question?