How do I create an embeddable component that will be used by 3rd party websites?
Unanswered
English Angora posted this in #help-forum
English AngoraOP
My goal is to create a <script> code that users can copy and add to their head or body tags.
I looked at the following resources but had no luck. Really hoping someone would be helpful here
I looked at the following resources but had no luck. Really hoping someone would be helpful here
5 Replies
Blue horntail woodwasp
I'm in the same boat. The ideal output for me would be to be able to request a url from the Next.js server and then either: a) be able to utilise ONLY the output in the <body> of the response, allowing that markup and relevant <script> tags etc to be inserted into a third-party page, or b) not have to specify <html> and <head> tags in the root layout file of the project. That way, what is returned is always embeddable.
The main issue with approaches I've tried is that the <html> and <head> tags are required in the layout so cannot be stripped, and if you put a server in front of Next.js that gets the output and moves anything from <head> into <body> and then strips <html> and <head>, the router complains in the console about not being mounted.
I'm gonna delve into the Next.js source to see why <html> and <head> are required in the root layout because to me, it should work to allow a different target element if those are not present. I realise there are likely some issues with things like the page title, some SEO based stuff might be more problematic etc, but for an embeddable app this isn't such an issue anyway.
The ultimate goal here should be to allow embeddable apps that can take advantage of SSR and static vs dynamic rendering as Next.js already does nicely, but without the extra tags being required in the root layout.
If anyone has knowledge of how this might be achieved, please ping on here!! 🙂