Fidia Docs
Search…
Embedding Payment Widget
How to embed Fidia payment link on your website, app or blog.
Fidia payment widget embeds a Fidia payment link on your website. This widget allows you to specify a trigger button which when clicked pops up Fidia's payment link and allows you receive support from your fans/audience without them having to leave your website.
To give you a feel of how this works, we created a demo website that uses our widget. You only have to click the embedded Fidia button to see it in action.
View Demo

Usage for Non-Developers

You can copy the embed code directly from the dashboard and paste it into your websites, apps or blogs.

Usage for Developers

HTML

Embedding a Fidia payment link on your website is super simple. First, you need to import our embed script. Add the below snippet to anywhere within your HTML code.
<script src="https://embed.getfidia.com/js/v1.js" async></script>
Specify a button which when clicked would popup our payment link widget. This button can be placed anywhere within the body tag and has to have the following attributes:
  • class - fidia-embed-target
  • data-fidia-username - Your Fidia username
  • data-fidia-slug - The slug of the payment link you want to embed
This will look as shown below:
<button class="fidia-embed-target" data-fidia-username="gbahdeyboh" data-fidia-slug="laptop"></button>
You can add as many buttons as desired and each of them will be replaced by Fidia's custom button.

Vue

Add the below script to your mounted hook.
mounted(){
const fidiaScript = document.createElement('script');
fidiaScript.async = true;
fidiaScript.setAttribute('src', "https://embed.getfidia.com/js/v1.js");
document.getElementsByTagName("head")[0].appendChild(fidiaScript);
}
Then add your button anywhere in your component or it's child component.
<button class="fidia-embed-target" data-fidia-username="gbahdeyboh" data-fidia-slug="laptop"></button>

Nuxt

In your plugins folder, create a file named fidia-widget.js. Copy and paste the below code into this file.
export default () => {
(function() {
const fidiaScript = document.createElement('script');
fidiaScript.async = true;
fidiaScript.setAttribute('src', "https://embed.getfidia.com/js/v1.js")
document.getElementsByTagName("head")[0].appendChild(fidiaScript);
})();
};
In your nuxt.config.js file, import this plugin as shown below.
plugins: [
{ src: '~/plugins/fidia-widget', mode: 'client' },
],
Now you can specify a target button anywhere within your layouts, pages, or components.
<button class="fidia-embed-target" data-fidia-username="gbahdeyboh" data-fidia-slug="laptop"></button>

Contribution

This widget still needs a lot of customizations, improvements, and fixes. PRs and issues are definitely welcomed!
Copy link
On this page
Usage for Non-Developers
Usage for Developers
Contribution