add namespace to avoid css collistions

src/components/_chat.scss

@@ -99,6 +99,7 @@
   width: 400px;
   max-width: calc(100vw - 10px);
   border-bottom: none;
+  margin: 0;
   animation-duration: 0.2s;
   animation-fill-mode: forwards;
 

src/components/chatbox.jsx

@@ -599,6 +599,7 @@ class ChatBox extends React.Component {
     const inputLabel = 'Send a message...'
 
     return (
+      <div id="safesupport">
         <div className="docked-widget" role="complementary">
           <Transition in={opened} timeout={250} onExited={this.handleWidgetExit} onEntered={this.handleWidgetEnter}>
             {(status) => {
@@ -697,6 +698,7 @@ class ChatBox extends React.Component {
           {showDock && !roomId && <Dock handleToggleOpen={this.handleToggleOpen} />}
           {showDock && roomId && <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />}
         </div>
+      </div>
     );
   }
 };

src/components/styles.scss

@@ -1,4 +1,6 @@
-@import "variables";
-@import "loader";
-@import "chat";
-@import "dark_mode";
+#safesupport {
+  @import "variables";
+  @import "loader";
+  @import "chat";
+  @import "dark_mode";
+}