Rep AI’s chat widget can be embedded on a standalone page, allowing you to provide your customers with direct support through its own URL. This solution offers a full-screen chat experience instead of the traditional chat widget on your website. Follow the steps below to set it up.
Prerequisites
- This method requires you to page HTML and JavaScript directly into your page's code (without using Google Tag Manager).
- Note: Your existing chat customization settings (such as colors, branding, and appearance) will be automatically applied to the full-screen widget, so no additional styling is needed.
Step-by-Step Guide
Create a Container for the Chat Widget
Create a container on your page where the Rep AI chat widget will appear. Use the following HTML code:
html
Copy code
<div id="repWebClientContainer"></div>
-
Add the JavaScript to Initialize the Chat
Add the following JavaScript to initialize the chat widget and make it open automatically in a full-screen view:
html
Copy code
<script>
(function () {
window["repContainer"] = {
selector: "#repWebClientContainer", // Targeting the container ID
config: {
width: "100%", // Full width
height: "100%", // Full height
defaultOpen: true, // Automatically opens the chat
hideControls: true, // Hides unnecessary controls
},
};
})();
</script>
-
Insert the Code into Your Webpage
Insert the container HTML and JavaScript into the page where you want the chat to appear. Place the code before the </body> tag in the HTML of your page.
Notes
- Automatic Styling: The chat widget will inherit any custom styling you've already set in your Rep AI console. No further styling is required.
- Customization: The container is designed to be fully responsive, so it should adjust to different screen sizes automatically. However, if you want to make any changes to the layout or appearance, you can tweak the dimensions in the JavaScript config.
Need More Help?
If you need assistance or have any questions, feel free to reach out to our support team at support@hellorep.ai. We’re here to help!