Deploying Next js to a single file
Answered
Havana posted this in #help-forum
HavanaOP
Hi
I have created a chat widget using Nextjs 14. Now I want to build that project into as a single script file. When we paste that script to any website header, my chat widget should appear on there. Do you guys have any idea how to do that? I tried webpack and rollup, but those were not working.
I have created a chat widget using Nextjs 14. Now I want to build that project into as a single script file. When we paste that script to any website header, my chat widget should appear on there. Do you guys have any idea how to do that? I tried webpack and rollup, but those were not working.
Answered by B33fb0n3
you can deploy your project somewhere and then put inside your script the creation of the iframe and the positioning of the iframe to the correct location on the future page. Like that you chat widget is emebed in the page using a script tag to add and position it
Try it with these settings:
Try it with these settings:
IFrame.style.backgroundColor = "transparent";
// maybe even use background:none transparent;
IFrame.frameBorder = "0";
IFrame.allowTransparency="true";15 Replies
@Havana Hi
I have created a chat widget using Nextjs 14. Now I want to build that project into as a single script file. When we paste that script to any website header, my chat widget should appear on there. Do you guys have any idea how to do that? I tried webpack and rollup, but those were not working.
you can deploy your project somewhere and then put inside your script the creation of the iframe and the positioning of the iframe to the correct location on the future page. Like that you chat widget is emebed in the page using a script tag to add and position it
Try it with these settings:
Try it with these settings:
IFrame.style.backgroundColor = "transparent";
// maybe even use background:none transparent;
IFrame.frameBorder = "0";
IFrame.allowTransparency="true";Answer
HavanaOP
the problem is my widget is developing in a white background. If I embed that deployment url to any website, that backgroud is also coming.
@Havana the problem is my widget is developing in a white background. If I embed that deployment url to any website, that backgroud is also coming.
Try it with these settings:
IFrame.style.backgroundColor = "transparent";
// maybe even use background:none transparent;
IFrame.frameBorder = "0";
IFrame.allowTransparency="true";HavanaOP
This is my widget look like on the first stage. Do you think, if I embed the deployment url, I can get that chat bubble to the bottom right corner?
Do you think, I have to do more css work for that to achieve,
Do you think, I have to do more css work for that to achieve,
HavanaOP
Thanks, I will check that
@Havana Thanks, I will check that
when will you check that?
HavanaOP
I will check that now
HavanaOP
That's working bro. Thanks for the support
happy to help
HavanaOP
Yeah, but another problem . WHen I embed that to a website, that website buttons and items are not clickable because of that nextjs prject transparent window. @B33fb0n3
Any idea for that?
HavanaOP
@B33fb0n3 I need a solution for this please
@Havana <@301376057326567425> I need a solution for this please
when the page is there, the page should be clickable as well. That's because it's an iframe. If that's not the case, you might want to open a new thread and provide more information (maybe even an reproduction). That would help me and others can contribute to your issue as well
HavanaOP
Here, can you see, I can click the widget but I can't click the website buttons. This is my code.
When I make iframe.style.pointerEvents = 'auto'; is none, then website buttons are clickable, but the widget is not clickable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Website</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Create an iframe element
var iframe = document.createElement('iframe');
iframe.src = 'https://customer-service-bot-frontend.vercel.app/';
iframe.id="chat-frame";
iframe.style.position = 'fixed';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 'none';
iframe.style.zIndex = '9999'; // Ensure iframe is on top
iframe.style.pointerEvents = 'auto'; // Initially disable iframe interactions
// Append iframe to the body
document.body.appendChild(iframe);
});
</script>
</head>
<body style="background-color: black;">
<h1 style="color: white;">Test</h1>
<button onclick="alert('Button clicked!')">Test</button>
</body>
</html>
When I make iframe.style.pointerEvents = 'auto'; is none, then website buttons are clickable, but the widget is not clickable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Website</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Create an iframe element
var iframe = document.createElement('iframe');
iframe.src = 'https://customer-service-bot-frontend.vercel.app/';
iframe.id="chat-frame";
iframe.style.position = 'fixed';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 'none';
iframe.style.zIndex = '9999'; // Ensure iframe is on top
iframe.style.pointerEvents = 'auto'; // Initially disable iframe interactions
// Append iframe to the body
document.body.appendChild(iframe);
});
</script>
</head>
<body style="background-color: black;">
<h1 style="color: white;">Test</h1>
<button onclick="alert('Button clicked!')">Test</button>
</body>
</html>