🟣Step 1 — Log in to your Buy Me a Coffee account
🟣Step 2 — Go to "Buttons and Graphics" from the left side menu
🟣Step 3 — Choose "Website widget" and click generate
🟣Step 4 — Copy your code and put it between the head tags in index.html
<head>
<script data-name="BMC-Widget"
data-cfasync="false"
src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
data-id="ksbye"
data-description="Support me on Buy me a coffee!"
data-message=""
data-color="#5F7FFF"
data-position="Right"
data-x_margin="18"
data-y_margin="18">
</script>
</head>
🟣Step 5 — Open your app.component.ts
import { Component, Renderer2 } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, RouterModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
constructor(private renderer: Renderer2) {}
ngOnInit() {
this.loadScript();
}
loadScript() {
const script = this.renderer.createElement('script');
script.src = 'https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js';
script.setAttribute('data-name', 'BMC-Widget');
script.setAttribute('data-cfasync', 'false');
script.setAttribute('data-id', 'your_id'); // Replace 'your_id' with your actual id
script.setAttribute('data-description', 'Support me on Buy me a coffee!');
script.setAttribute('data-message', '');
script.setAttribute('data-color', '#BD5FFF');
script.setAttribute('data-position', 'Right');
script.setAttribute('data-x_margin', '18');
script.setAttribute('data-y_margin', '18');
this.renderer.appendChild(document.body, script);
}
}
🟣Step 6 — Start Angular app
ng serveOn the bottom right corner, the Buy Me a Coffee widget will appear.
