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.
You can copy the embed code directly from the dashboard and paste it into your websites, apps or blogs.
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.
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>
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>
This widget still needs a lot of customizations, improvements, and fixes. PRs and issues are definitely welcomed!
Last modified 1yr ago