Skip to main content

Embed Rep on a page as full screen

Updated

The Rep AI chat widget can be embedded on a standalone page, allowing you to provide your customers with direct support through its own dedicated URL. This solution offers a full-screen chat experience instead of the traditional chat widget overlay on your website.

Prerequisites

  • This method requires you to add 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

1. 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:

<div id="repWebClientContainer"></div>

 

2. 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:

<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>

3. 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.

Additional Notes

  • Automatic Styling: The chat widget will inherit any custom styling you've already configured in your Rep AI console. No further styling is required.
  • Responsive Design: The container is designed to be fully responsive, so it will automatically adjust to different screen sizes. However, if you want to make any changes to the layout or appearance, you can modify the dimensions in the JavaScript config.

 

Need help or advice? Reach out to us at: support@hellorep.ai

Powered by Zendesk