Fidia Docs
Search…
PAYMENT LINKS
CREATOR PROFILE
INTEGRATIONS
Tools
USE CASES
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.
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.
1
<script src="https://embed.getfidia.com/js/v1.js" async></script>
Copied!
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:
1
<button class="fidia-embed-target" data-fidia-username="gbahdeyboh" data-fidia-slug="laptop"></button>
Copied!
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.
1
mounted(){
2
const fidiaScript = document.createElement('script');
3
fidiaScript.async = true;
4
fidiaScript.setAttribute('src', "https://embed.getfidia.com/js/v1.js");
5
document.getElementsByTagName("head")[0].appendChild(fidiaScript);
6
}
Copied!
Then add your button anywhere in your component or it's child component.
1
<button class="fidia-embed-target" data-fidia-username="gbahdeyboh" data-fidia-slug="laptop"></button>
Copied!
Nuxt
In your plugins folder, create a file named
fidia-widget.js. Copy and paste the below code into this file.1
export default () => {
2
(function() {
3
const fidiaScript = document.createElement('script');
4
fidiaScript.async = true;
5
fidiaScript.setAttribute('src', "https://embed.getfidia.com/js/v1.js")
6
document.getElementsByTagName("head")[0].appendChild(fidiaScript);
7
})();
8
};
Copied!
In your
nuxt.config.js file, import this plugin as shown below.1
plugins: [
2
{ src: '~/plugins/fidia-widget', mode: 'client' },
3
],
Copied!
Now you can specify a target button anywhere within your layouts, pages, or components.
1
<button class="fidia-embed-target" data-fidia-username="gbahdeyboh" data-fidia-slug="laptop"></button>
Copied!
Contribution
This widget still needs a lot of customizations, improvements, and fixes. PRs and issues are definitely welcomed!
Last modified 6mo ago
Copy link