How to insert animated font awesome icon into calendly widget configuration

Other Questions Calendly
1

Hey there! I’m working on customizing a calendly badge widget and I want to include a font awesome icon that has some animation effects. I’m pretty new to this stuff so any help would be awesome.

I need to modify the text section where it currently shows “Schedule Meeting” to include an animated icon before the text. Here’s my current setup:

window.addEventListener('load', function() {
    Calendly.initBadgeWidget({
        url: 'https://calendly.com/myaccount?background_color=f0f8ff&primary_color=4a90e2',
        text: 'Schedule Meeting',
        color: '#4a90e2',
        textColor: '#ffffff',
        branding: false
    });
});

I’m thinking something like a bouncing or pulsing phone icon would look great. Has anyone done something similar? What’s the best way to integrate font awesome animations into this kind of widget setup? Thanks in advance for any suggestions!

2

Hit this exact issue last year building a booking interface for our client portal. Calendly’s badge widget won’t take HTML directly in the text property.

Here’s what worked for me - initialize the widget first, then grab the element and modify it with JavaScript:

window.addEventListener('load', function() {
    Calendly.initBadgeWidget({
        url: 'https://calendly.com/myaccount?background_color=f0f8ff&primary_color=4a90e2',
        text: 'Schedule Meeting',
        color: '#4a90e2',
        textColor: '#ffffff',
        branding: false
    });
    
    // Wait a bit for the widget to render
    setTimeout(() => {
        const badge = document.querySelector('.calendly-badge-widget');
        if (badge) {
            const textSpan = badge.querySelector('.calendly-badge-content');
            if (textSpan) {
                textSpan.innerHTML = '<i class="fas fa-phone fa-bounce"></i> Schedule Meeting';
            }
        }
    }, 500);
});

Make sure Font Awesome’s loaded first. The fa-bounce class gives you that bouncing animation. You can also try fa-pulse for a pulsing effect.

Heads up - Calendly updates their DOM structure sometimes, so this might break if they change how the badge renders.