Quickly and easily start accepting tips on every page of your Wix 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.

Step 1. Generate your QUID API key

  • Login to your QUID merchant dashboard and scroll down to the API Keys section of the dashboard and click the "+" icon to create a new API key
  • You will need to specify the origin (website hostname, e.g. www.tinysecurepayments.com) for each API key that you create. This authorizes a web site at the origin address to use the API key. The origin address text field will be automatically filled with the address you provided when you signed up with QUID, if that is correct leave it as-is, otherwise change it to your website address. Click the CREATE button.
  • Copy and save your API Key and API Secret somewhere safe. You will need only the API Key in the next step.

Step 2: Create your floating button

  • Configure your floating button by selecting the color and text that you want to appear on the slider and enter the API public key (the long string of text starting with kp-) from Step 1.
  • Expand the ADVANCED section to set the minimum, maximum, and initial slider values and change any of the text that will be displayed (see below for a full description of each setting).
  • Click on the BUILD button to generate your button code. There will be two snippets of code displayed and you will need both for the next step.

Step 3. Add the QUID code snippets to your Wix site

Add the QUID library code to your Wix site

  • In your Wix editor open Settings > Tracking & Analytics
  • Click the "+ New Tool" button
  • Paste the first code snippet into the text box below the "Paste the code snippet here:" label
  • Add "QUID Header" in the Name box
  • Under "Add Code to Pages:" select "All pages" and "Load code on each new page"
  • Under the "Place Code in:" label select "Head" (this is the default)
  • Click the Apply button

Add the floating button code to your Wix site

  • In your Wix editor open Settings > Tracking & Analytics
  • Click the "+ New Tool" button and select the Custom option.
  • Paste the second code snippet into the text box below the "Paste the code snippet here:" label
  • Add "QUID Floating Button" in the Name box
  • Under "Add Code to Pages:" select "All pages" and "Load code on each new page"
  • Under the "Place Code in:" label select "Body - end" (this is the default)
    Click the Apply button
  • Publish your changes and start earning!

Floating button settings

Slider Text

Enter the text to display on the floating button tray when it is extended.

API Key

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

Floating button advanced settings

Initial Amount

Set the default price for the slider between $0.01 and $2.00. This is used when the slider is clicked without first selecting a value.

Min Slider Amount

Set the minimum price for the slider between $0.01 and $2.00.

Max Slider Amount

Set the maximum price for the slider between $0.01 and $2.00.

Paid Text

Enter the text to display when a payment has been received.

Product ID

This is an ID that you assign to this type of payment. The Product ID is not shown to users making payments with QUID.

Product Name

This is the name that you assign to this type of payment. The Product Name will be shown to users completing payments with QUID and will be displayed in their purchase history.

Product Description

This is a brief description of the purpose of the payment. The Product Description will be shown to users making payments with QUID and will be displayed in their purchase history.

Product URL

This is the web address at which the payment is made. The Product URL will be shown to users making payments with QUID and will be displayed in their purchase history.

Position

Choose whether to display the floating button at the left or right bottom corner of your site.

Show Reminder

When enabled this setting will periodically animate the floating button as a reminder to the site's visitor.

Show Demo

When enabled, this setting will play the automated floating button demo when the page loads.

Did this answer your question?