3rd party scripts in a SPA
Here is a problem I come across all the time. I'm really curious if I'm alone on this. I want to use this awesome 3rd party tool in my Vue/React application. Maybe it's a simple Typeform, or a Wistia Video, Analytic tracking etc.. etc... The installation instructions are always super simple "just copy and paste our JS snippet into your html".
If you have a SPA, copying and pasting their snippet will not work. Usually this problem is solved by using a specific Vue/React/Angular library, but often these libraries don't exist. When this happens, the simple 30 second integration can turn into an all day project.
I'm really curious how others are solving this problem?
I feel like there is an opportunity here.
Trending on Indie Hackers
I ran into this problem adding a ConvertKit form to a Vuejs SPA. In that case they provided an html blob as an option, so I was able to pull that apart into a component, but it certainly wasn't just a copy and paste.
I use Next.js, so in my document, I add a script tag with the snippet set using dangerouslySetInnerHtml. Seems to work pretty well.
I have ran into this issue several times when integrating ad scripts. I usually have to write a custom component unless it's a popular system like adsense and the community has an existing solution.
Have you tried dangerouslysetinnerhtml or wrapping in <script></script> tags? https://reactjs.org/docs/dom-elements.html
Usually, many third-party libraries have a version of the npm package. It easily connects to any component and used. If you have a library that you need to connect, I can prepare an example of integration, on it you can work with other libraries.
This comment was deleted 4 months ago.