如何设置Gupshup Web Widget全屏显示并默认打开

Hey there! I’ve tinkered with Gupshup’s web widgets before, so let’s walk through how to get both of these effects working smoothly for your bot.

1. Make the Chat Window Full-Screen #

Gupshup’s default widget comes with fixed dimensions, so we’ll need to override its default CSS to make it fill the entire viewport. Here’s how to do it:

• First, identify the main container class of your Gupshup widget. You can find this by right-clicking the widget in your browser and selecting "Inspect"—it’s usually something like gupshup-widget-container.
• Add custom CSS to your website’s stylesheet (or inline in a <style> tag) to force the container to take full screen:

/* Override Gupshup widget container styles */
.gupshup-widget-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important; /* Remove default rounded corners if needed */
  z-index: 99999 !important; /* Ensure it stays above all other page content */
}

/* Adjust the inner chat area to fill the container */
.gupshup-widget-chat-box {
  height: 100% !important;
  width: 100% !important;
}

Note: The !important flag ensures our styles override Gupshup’s inline styles. If you can load your custom CSS after the widget’s stylesheet, you might not need it—but it’s safer to include for consistency.

2. Set the Widget to Auto-Open on Page Load #

There are two reliable ways to achieve this, depending on how you’ve embedded the widget:

Option 1: Use the Initialization Config #

If you’re using the standard embed script from Gupshup, look for the window.gupshupSettings object. Add the autoOpen: true parameter to it:

window.gupshupSettings = {
  botId: "YOUR_UNIQUE_BOT_ID",
  autoOpen: true, // This triggers the widget to open automatically on page load
  // Keep your existing config parameters here...
};

Option 2: Trigger the Open Method Manually #

If the auto-open config doesn’t work (or you need more control), call Gupshup’s widget open method once the page and widget are fully loaded. Add this script after your widget’s embed code:

// Wait for the page to finish loading
document.addEventListener("DOMContentLoaded", function() {
  // Check if the Gupshup widget API is available
  if (window.gupshup && window.gupshup.openWidget) {
    window.gupshup.openWidget();
  } else {
    // For async-loaded widgets, use a small timeout or listen for the ready event
    setTimeout(function() {
      if (window.gupshup && window.gupshup.openWidget) {
        window.gupshup.openWidget();
      }
    }, 1000); // Adjust the timeout duration if needed
  }
});

Pro Tip: Some Gupshup widgets emit a gupshupWidgetReady event when fully initialized. For more reliability, listen for that instead of a timeout:

window.addEventListener("gupshupWidgetReady", function() {
  window.gupshup.openWidget();
});

Quick Final Checks #

• Test the full-screen layout on different screen sizes to ensure it’s responsive.
• Confirm the auto-open behavior doesn’t disrupt other page elements (Gupshup’s widget usually includes a close button by default, but you can customize it if needed).

内容的提问来源于stack exchange，提问作者James Idowu