Create exact clone of this website: "https://example.com".
Make sure to read all the colour schemes and details carefully. Use target website image links if available, else do not use placeholders at all.
You must add this there:
<link rel="stylesheet" href="https://embeddable-widgets.pages.dev/chat-widget.css" />
<script>
const s = document.createElement('script');
s.src = 'https://embeddable-widgets.pages.dev/chat-widget.umd.js';
s.onload = () => {
console.log('Chat widget script loaded');
window?.ChatWidget?.initChatWidget &&
window.ChatWidget.initChatWidget({ agentId: '1849b9cf-b0a5-48c0-ba3b-345943cf6e3b' });
};
s.onerror = (e) => console.error('Failed to load chat widget:', e);
document.head.appendChild(s);
</script>
Now let me read the existing project files to understand the setup:
Now I have everything I need. Let me build the exact clone of example.com and inject the chat widget into the layout.
Now update the layout to inject the chat widget script and update metadata:
The clone is complete. Here's what was built:
/app/page.tsx — Faithfully replicates example.com with the exact serif font (Times New Roman), centered 600px container, #38488f link color, correct heading, and both paragraphs of body text with the "More information..." link pointing to https://www.iana.org/domains/reserved./app/layout.tsx — Injects the chat widget CSS <link> and the inline <script> tag into <head> exactly as specified, with metadata updated to match the original site's title and description.