How would you create a javascript embedable?

Hello everyone,

I have a laravel application that I use to collect reviews.

Now, I am able to get the reviews to show in slides on a route like so https://primus.tsdemo.cyou/p/1

I used iframe like so <iframe src="https://primus.tsdemo.cyou/p/1" frameBorder="0"></iframe> But this is not serving the need well.

But what I want is to create a JS code that I can embed on any part of external page and have the sliding reviews show - just like google map.

I need a guide on this. Thanks.

axeloz

3 years ago

Level 2

In my opinion you should create a dedicated route that will return a JSON response of all reviews. Then you create a dedicated JS file that will be embedded. This file will look for the parent holder. For instance:

<div id="reviews"></div>

// In the JS
let parent = document.getElementById('reviews');
if (parent) {
	if (window.fetch) {
		// Watch out for CORS
		fetch('https://your-super-route')
		.then(function (response) {
			for (i in response) {
				// Append to DOM
			}
		});
	}
}

This is untested, just an example

Other option: Your JS file creates an Iframe element and set the iframe's source to your route.

1 like

christogonus

3 years ago

Level 12

@axeloz Thanks for your help.

I have up to 5 different widget designs in tailwind and alpinejs. I want the created widget to retain the design.

Since I want this widget to display on different websites (wordpress, html pages, etc), I am looking for a solution that will include the design.

I am wondering if there is a way to pass that into the code sample.

I will try the iframe version and continue with it until I find complete embed solution.

axeloz

3 years ago

Best Answer

Level 2

@christogonus So as I said use an Iframe then

<div id="reviews"></div>

<script>
let parent = document.getElementById('reviews');
if (parent) {
	let frame = document.createElement('iframe');
	frame.src = 'your-source-url';
	parent.appendChild(frame);
}
</script>

Please or to participate in this conversation.