Quickly and easily start accepting tips on every page of your website using the QUID floating button. Add it to your site and a floating button is displayed in the bottom right or left corner and is visible in the same location on all pages while the visitor navigates and scrolls through your site.

Add the floating button to your site

First, add the QUID JavaScript library and stylesheet to your site by adding the following code to the <head> section of your site's pages:

<link rel="stylesheet" href="https://js.quid.works/v1/assets/quid.css">
<script src="https://js.quid.works/v1/client.js"></script>


Next, add the QUID floating button code to each page on which you want the button displayed. Here is an example of the code from tinysecurepayments.com (see below for a description of each setting):

<script type="text/javascript">
quid.createFAB({
      apiKey: "kt-754D4CKK0ZGZ3APWRJTSL3T5SM0K342O",
      baseURL: "https://app.quid.works",
      currency: "CAD",
      productID: "floating-tip",
      productName: "Thanks for the tip!",
      productURL: "https://tinysecurepayments.com",
      productDescription: "Thanks for your support!",
      position: "right",
      minAmount: "0.01",
      maxAmount: "2.00",
      amount: "1.00",
      text: "Slide the Q to leave a tip!",
      paidText: "Thanks for the tip!",
      palette: "default",
      demo: true,
      reminder: true,
      onSuccessCallback: function() { console.log('Payment Succeeded'); },
    });
</script>

Floating button required settings

apiKey

Description: This is your QUID API key. Create your API key in your QUID merchant dashboard.

baseURL

Description: This must be "https://app.quid.works"

currency

Description: This must be the same currency as your QUID merchant account.
Possible values: "USD", "CAD"

productID

Description: This is an ID that you assign to this type of payment. The productID is not shown to users making payments with QUID.
Example: "floating-tip"

productName

Description: This is the name that you assign to this type of payment. The productName will be shown to users making payments with QUID and will be displayed in their purchase history.
Example: "Thanks for the tip!"

productURL

Description: This is the web address at which the payment is made. The productURL will be shown to users making payments with QUID and will be displayed in their purchase history.
Example: "https://tinysecurepayments.com"

productDescription

Description: This is a brief description of the purpose of the payment. The productDescription will be shown to users making payments with QUID and will be displayed in their purchase history.
Example: "Thanks for your support!"

Floating button optional settings

position

Description: Choose whether to display the floating button at the left or right bottom corner of your site.
Possible values: "right", "left"
Default value: "right"

minAmount

Description: Set the minimum price for the slider. Value must be enclosed in double quotes.
Possible values: between "0.01" and "2.00"
Default value: "0.01"

maxAmount

Description: Set the maximum price for the slider. Value must be enclosed in double quotes.
Possible values: between "0.01" and "2.00"
Default value: "0.01"

amount

Description: Set the default price for the slider that is used when the slider is clicked without first selecting a value. Value must be enclosed in double quotes.
Possible values: between "0.01" and "2.00"
Default value: Half-way between the minimum and maximum amounts.

text

Description: Enter the text to display on the floating button tray when it is extended. Value must be enclosed in double quotes.
Possible value: Any text up to maximum 45 characters
Default value: "Slide the Q to leave a tip!"

paidText

Description: Enter the text to display when a payment has been received. Value must be enclosed in double quotes.
Possible value: Any text up to maximum 25 characters
Default value: "Thank You!"

palette

Description: Select the color palette to use for the Floating Button. Value must be enclosed in double quotes.
Possible values: default, dark, blue, maroon, red, orange, green, and grey
Default value: default

demo

Description: When enabled this setting will play the automated floating button demo when the page loads. Value must not be enclosed in double quotes.
Possible values: true, false
Default value: true

reminder

Description: When enabled this setting will periodically animate the floating button as a reminder to the site's visitor. Value must not be enclosed in double quotes.
Possible values: true, false
Default value: true

Did this answer your question?