#Script loading with View Transition API

1 messages · Page 1 of 1 (latest)

tough nova
#

Hello everyone,

I've built a website using Astro and leveraged its View Transitions API. However, I've hit a snag. My Calendly button component isn't fully working.

The issue is during client-side navigation, where the essential script code fails to load. This causes the 'onclick' event to malfunction, preventing Calendly's pop-up widget from appearing.

I've experimented with the astro:page-load directive, but to no avail. It's possible I may have implemented it incorrectly, or it may not be the right solution.

Could you help me? Here's the code for my Calendly component:

// Calendly.astro
const onClick = Calendly.initPopupWidget({url: '${calendlyUrl}'});return false;;

<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet" />
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>

<WidgetWrapper id={id} isDark={isDark} containerClass={max-w-5xl mx-auto ${classes?.container ?? ''}} bg={bg}>
<div
class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none dark:border dark:border-slate-600"

<Headline
  title={title}
  subtitle={subtitle}
  classes={{
    container: 'mb-0 md:mb-0',
    title: 'text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading',
    subtitle: 'text-xl text-muted dark:text-slate-400',
  }}
/>
<div class="mt-6 max-w-xs mx-auto">
  <a href="#" class="btn btn-primary w-full sm:w-auto" onclick={onClick}>
    <Icon name="tabler:rocket" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
    {buttonText}
  </a>
</div>

</div>
</WidgetWrapper>

Website: https://venger.me/

P.S. If you could share a link or explain how to better embed the code, I'd appreciate it as well!

venger.me
venger.me - Your catalyst for unstoppable growth

Marketing funnels, automation and reporting for your business

echo schooner
#

Let's see if I understood it:
Everything was working normal before you added View Transition, I mean: onClick event and Calendly widget. Then with viewtransition the widget, thus onClick event stopped working?

tough nova
#

@echo schooner Yes 🙂

The onclick event stopped working because the script included in my copmonent is not loading.

<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>

It loads on a page refresh, but not on the client navigation.

Appreciate that you wrote back to me.

echo schooner
#

ok, but to be clear, it stopped after you added viewtransitions?

tough nova
#

Yes, that's correct!

I've debugged this component without viewtransitions. And just doublechecked it again to not waster your time.

@echo schooner

echo schooner
#

ok, thanks

#

ok, so to not keep you waiting, I can reproduce but can't fix, yet. Later I'll give another shot

#

hope somebody else can chime in

tough nova
#

yes, still appreciate your effort, have a nice day 🙂

echo schooner
#

so... I had a urge to try something else lol, I moved the css to the head and the js cript to the footer and it seems to work