The connected script is not working correctly (chat)

[Arhell]

Describe the Bug

I use this service, I connected it in astro.config in the head, when it loads everything works correctly, but when I go to the page inside the documentation it stops working.

Please tell me how can I connect it correctly so that it works correctly? maybe inside the plugin? I connected this plugin https://events-3bg.pages.dev/jotter/starlight/inner-workings/integration/#overriding-the-head-component

Thank you for your attention

What's the expected result?

loaded correctly when going to another page

Link to Minimal Reproducible Example

https://github.com/testomatio/docs

Participation

• [ ] I am willing to submit a pull request for this issue.

[martrapp]

Hi @Arhell, I had a look at your repository and everything looks great to me!

However, I am not sure whether I have understood the problem correctly. When I click links in the navigation sidebar with the content items, everything seems to work fine. Clicking on the "contact page" link on the "GDPR commitment page" also works fine for me.

when I go to the page inside the documentation it stops working.

Do you mean the links inside the documentation itself do not work?

I noticed that the first two links on the "Start from Scratch" point to https://docs.testomat.io/. When the server runs on a different address, e.g. localhost:4321, those are cross domain links and those will in deed reload instead of doing view transitions.

Could you please provide more detailed step by step example of what does not work for you?

[Arhell]

I mean chat icon

https://github.com/testomatio/docs/blob/docs/astro.config.mjs#L38

I'm using an external service. but when I go to another page, for example Start From Scratch No icon

[Arhell]

I read that you can reinstall the script https://events-3bg.pages.dev/jotter/astro/scripts/

But I’m a little unclear whether I can use the script that I indicated above https://github.com/testomatio/docs/blob/docs/astro.config.mjs#L38

With this component https://github.com/testomatio/docs/blob/docs/src/components/Head.astro

[martrapp]

Thank you! I'll take a look! 👀

[martrapp]

@Arhell, good news: The chat was not lost, it just got invisible ;-) TL;DR: Add this script to your site. A good place would be the Head.astro file.

<script>
  document.addEventListener("astro:before-swap", (e) => {
    const crispStyle = document.querySelector(
      'link[rel="stylesheet"][href*="client.crisp.chat"]'
    );
    if (crispStyle) {
      e.newDocument.head.appendChild(crispStyle.cloneNode(true));
    }
  });
</script>

A bit of background if you are interested:

• The chat elements are inserted dynamically by the script.chat script. They get inserted at the end of the body. This is part of the application frame of the starlight site, outside the <main> section. Thus the chat will be preserved by the ReplacementSwap component. (https://events-3bg.pages.dev/jotter/starlight/inner-workings/app-state/)
• But it becomes invisible, because it loses its stylesheet on navigation: Astro's view transitions alter the current DOM's head to resemble the target page's head after a navigation. (https://events-3bg.pages.dev/jotter/astro/loader-swap/#swap-1). Ans because the stylesheet is dynamically created, it is not part of the static HTML and Astro deletes it.
• The script above looks for that stylesheet in the current document and inserts a copy in the event.newDocument. This way it looks as if the stylesheet was part of the loaded static page and the swap will not remove it.

Hope that helps! Good luck!

[Arhell]

I tested it according to your recommendations.

Everything works perfectly.

Thanks for your work and wonderful plugin.

If possible, add to the documentation that this is possible. (adding chat scripts or another option at your discretion.) with an example, I suggest taking this case

Thanks again

And yes, sorry for the many questions. I just recently started working with this plugin and astro.

And you can correctly rename the name issue, I think I didn’t specify the name correctly.

[martrapp]

You are welcome! Happy if it works for you. Just added to my 'baglog' as you suggested: https://events-3bg.pages.dev/jotter/snippets/things-to-write-about/

[martrapp]

@Arhell, if you find the 👜 Bag of Tricks ✨ helpful, please spread the word and give the repository a star ;-)

[Arhell]

@Arhell, if you find the 👜 Bag of Tricks ✨ helpful, please spread the word and give the repository a star ;-)

Sure, done

[Arhell]

Hi, there is a problem, the chat won't open again( https://docs.testomat.io/ after " Get Started " not work

[Arhell]

@martrapp

[martrapp]

What have you changed?

[Arhell]

What have you changed?

https://github.com/testomatio/docs/blob/docs/src/components/Head.astro

Nothing, I just updated dependencies

[Arhell]

I rolled back the dependencies but it didn't help, I think something new was added in chat plugin

[martrapp]

I'll take a look, but might take a while 👍🏼

[martrapp]

Do i find the failing code in your repository? is it on the main branch or somewhere else?

[Arhell]

Yes, docs(main) branch

[martrapp]

Hi @Arhell, afaict the chat script now comes with two stylysheets that need to be copied over. The original solution above only can cope with one.

Would you please try the following version? It should be able to handle multiple stylesheets.

<script>
  document.addEventListener("astro:before-swap", (e) => {
    document
      .querySelectorAll('link[rel="stylesheet"][href*="client.crisp.chat"]')
      .forEach((el) => {
        e.newDocument.head.appendChild(el.cloneNode(true));
      });
  });
</script>

[Arhell]

Thank you, that's what I assumed when I was looking for the problem, I checked it locally, it works.

[Arhell]

work https://docs.testomat.io/