Create Blocks App which embeds HTML code without using iframes

Ask the community
, , , ,
1

Question:

  1. Is Wix Blocks App the best way to let users embed HTML code (a JS script, a CSS file and a custom <div>) that generates a full width React app directly on a page, without using iframes?

  2. If so, then in Wix Blocks, what type of Extension should I use - Widget, Page or Self-Hosted Extension?

Context:
I’m the developer of a tour business software. Businesses embed HTML code on their site to generate the booking module, which is an app written in React. This is the HTML code they embed:

<noscript>You need to enable JavaScript to run this app.</noscript>
<div
id="tourtask-booking-root"
data-page="activities"
data-lang="en"
data-business-slug="at"
data-business-token="tFZzP0uG"
data-is-embedded="true"
></div>
<script src="https://tourtask-booking.pages.dev/static/js/main.js"></script>
<link rel="stylesheet" type="text/css" href="https://tourtask-booking.pages.dev/static/css/main.css">

I understand that when I embed HTML code on Wix straight onto the page, the content will end up in an iframe. This breaks my app, because my app uses static link rewrites for the different tour pages, the checkout page etc. As far as I understand, my best option is to develop a Wix Blocks App that people can install from the official repository, change the business slug, token etc from a settings page, and the booking module will be generated in full width on that page.

Product:
Wix Studio Editor

Additional information:
Here is a demo of this React app when embedded to a website:
https://tourtask.com/demo/

2

May be have a look at using a custom element in the block.
You can create a htmlcomponent and its elements using native js