diff --git a/README.md b/README.md
index 1b6c8be..c6be204 100644
--- a/README.md
+++ b/README.md
@@ -23,9 +23,9 @@ The widget can be initialized in one of two ways:
   * Add the following div to your website:
   `<div id="chatWidgetContainer"></div>`
   * Add the following script to your website:
-  `<script>initChatWidget()</script>`
+  `<script>ChatWidget()</script>`
 
-There is configuration associated with the widget. You can pass it to the `initChatWidget` function as an object or to the `div` element as attributes.
+There is configuration associated with the widget. You can pass it to the `ChatWidget` function as an object or to the `div` element as attributes.
 
 | Attribute           | Description             | Default value                 |
 | ------------------- | ----------------------- | -----------------------       |
@@ -55,7 +55,7 @@ Example usage:
     serverUrl: "http://127.0.0.1:5000",
     useFeedback: true,
     useLogin: true,
-  });
+  }, "customContainerId");
 </script>
 ```
 
diff --git a/public/index.html b/public/index.html
index 58a05c0..203a60e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -29,15 +29,18 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <h1>Chat</h1>
+    <div id="root" style="margin: 0 100px;">
+      <h1>Chat</h1>
     <p>Chat widget</p>
     <div 
       id="chatWidgetContainer"
       data-name="DevBot"
       data-server-url="http://127.0.0.1:5000"
+      data-show-explanation
       >
     </div>
     <p>Powered by <a href="">DevBot</a></p>
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/App.tsx b/src/App.tsx
index 6c2b70c..0c52234 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,30 @@
-import { Config } from "./types";
+import { useContext } from "react";
+import { ConfigContext } from "./contexts/ConfigContext";
+import { UserContext } from "./contexts/UserContext";
+import ChatBox from "./components/ChatBox/ChatBox";
+import LoginForm from "./components/LoginForm/LoginForm";
 import ChatWidget from "./components/Widget/ChatWidget";
 import ChatEmbedded from "./components/Embedded/ChatEmbedded";
+import ExplainableBox from "./components/Explainability/ExplainableBox";
 
-export default function App(props: Config) {
-  return props.useWidget ? (
-    <ChatWidget {...props} />
+export default function App() {
+  const { config } = useContext(ConfigContext);
+  const { user } = useContext(UserContext);
+
+  const showExplanation = config.showExplanation && user?.username;
+  const content = !user ? <LoginForm /> : <ChatBox />;
+  return config.useWidget ? (
+    <ChatWidget>{content}</ChatWidget>
   ) : (
-    <ChatEmbedded {...props} />
+    <ChatEmbedded>
+      {showExplanation && (
+        <div className="col md-6">
+          <ExplainableBox />
+        </div>
+      )}
+      <div className={showExplanation ? "col md-6" : "col md-12"}>
+        {content}
+      </div>
+    </ChatEmbedded>
   );
 }
diff --git a/src/components/ChatBox/ChatBox.css b/src/components/ChatBox/ChatBox.css
index f2b6018..621dceb 100644
--- a/src/components/ChatBox/ChatBox.css
+++ b/src/components/ChatBox/ChatBox.css
@@ -1,8 +1,8 @@
-#chatBox .form-control {
+.chat .form-control {
     border-color: transparent;
   }
   
-#chatBox .form-control:focus {
+.chat .form-control:focus {
   border-color: transparent;
   box-shadow: inset 0px 0px 0px 1px transparent;
 }
@@ -13,4 +13,10 @@
   flex: 1;
   height: 1px;
   background: #eee;
-}
\ No newline at end of file
+}
+
+.chat.card-body{
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column-reverse;
+ }
\ No newline at end of file
diff --git a/src/components/ChatBox/ChatBox.tsx b/src/components/ChatBox/ChatBox.tsx
index 2963974..70b34d9 100644
--- a/src/components/ChatBox/ChatBox.tsx
+++ b/src/components/ChatBox/ChatBox.tsx
@@ -1,36 +1,39 @@
 import "./ChatBox.css";
 
-import React, { useState, useEffect, useRef, useCallback } from "react";
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useContext,
+} from "react";
 import QuickReplyButton from "../QuickReply";
-
-import {
-  MDBCard,
-  MDBCardHeader,
-  MDBCardBody,
-  MDBIcon,
-  MDBCardFooter,
-} from "mdb-react-ui-kit";
+import { useSocket } from "../../contexts/SocketContext";
+import { MDBCardBody, MDBIcon, MDBCardFooter } from "mdb-react-ui-kit";
 import { AgentChatMessage, UserChatMessage } from "../ChatMessage";
 import { ChatMessage } from "../../types";
-import useSocketConnection from "../socket_connector";
+import { ConfigContext } from "../../contexts/ConfigContext";
+import Frame from "../Frame/Frame";
 
-export default function ChatBox({
-  name,
-  use_feedback,
-  serverUrl,
-  socketioPath,
-}: {
-  name: string;
-  use_feedback: boolean;
-  serverUrl: string | undefined;
-  socketioPath: string | undefined;
-}) {
+export default function ChatBox() {
+  const { config } = useContext(ConfigContext);
+  const {
+    startConversation,
+    sendMessage,
+    quickReply,
+    onMessage,
+    onRestart,
+    giveFeedback,
+  } = useSocket();
   const [chatMessages, setChatMessages] = useState<JSX.Element[]>([]);
   const [chatButtons, setChatButtons] = useState<JSX.Element[]>([]);
   const [inputValue, setInputValue] = useState<string>("");
   const chatMessagesRef = useRef(chatMessages);
   const inputRef = useRef<HTMLInputElement>(null);
-  const connector = useSocketConnection(serverUrl, socketioPath);
+
+  useEffect(() => {
+    startConversation();
+  }, [startConversation]);
 
   const updateMessages = (message: JSX.Element) => {
     chatMessagesRef.current = [...chatMessagesRef.current, message];
@@ -46,7 +49,7 @@ export default function ChatBox({
         message={inputValue}
       />
     );
-    connector.sendMessage({ message: inputValue });
+    sendMessage({ message: inputValue });
     setInputValue("");
     if (inputRef.current) {
       inputRef.current.value = "";
@@ -61,9 +64,9 @@ export default function ChatBox({
           message={message}
         />
       );
-      connector.quickReply({ message: message });
+      quickReply({ message: message });
     },
-    [connector, chatMessagesRef]
+    [chatMessagesRef, quickReply]
   );
 
   const handelMessage = useCallback(
@@ -75,14 +78,14 @@ export default function ChatBox({
         updateMessages(
           <AgentChatMessage
             key={chatMessagesRef.current.length}
-            feedback={use_feedback ? connector.giveFeedback : null}
+            feedback={config.useFeedback ? giveFeedback : null}
             message={message.text}
             image_url={image_url}
           />
         );
       }
     },
-    [connector, chatMessagesRef, use_feedback]
+    [giveFeedback, chatMessagesRef, config]
   );
 
   const handleButtons = useCallback(
@@ -111,37 +114,23 @@ export default function ChatBox({
   );
 
   useEffect(() => {
-    connector.onMessage((message: ChatMessage) => {
+    onMessage((message: ChatMessage) => {
       handelMessage(message);
       handleButtons(message);
     });
-  }, [connector, handleButtons, handelMessage]);
+  }, [onMessage, handleButtons, handelMessage]);
 
   useEffect(() => {
-    connector.onRestart(() => {
+    onRestart(() => {
       setChatMessages([]);
       setChatButtons([]);
     });
-  }, [connector]);
+  }, [onRestart]);
 
   return (
-    <div className="chat-widget-content">
-      <MDBCard
-        id="chatBox"
-        className="chat-widget-card"
-        style={{ borderRadius: "15px" }}
-      >
-        <MDBCardHeader
-          className="d-flex justify-content-between align-items-center p-3 bg-info text-white border-bottom-0"
-          style={{
-            borderTopLeftRadius: "15px",
-            borderTopRightRadius: "15px",
-          }}
-        >
-          <p className="mb-0 fw-bold">{name}</p>
-        </MDBCardHeader>
-
-        <MDBCardBody>
+    <Frame>
+      <>
+        <MDBCardBody className="chat">
           <div className="card-body-messages">
             {chatMessages}
             <div className="d-flex flex-wrap justify-content-between">
@@ -164,7 +153,7 @@ export default function ChatBox({
             </button>
           </form>
         </MDBCardFooter>
-      </MDBCard>
-    </div>
+      </>
+    </Frame>
   );
 }
diff --git a/src/components/Embedded/ChatEmbedded.css b/src/components/Embedded/ChatEmbedded.css
index 9ad2ab4..1ac70d0 100644
--- a/src/components/Embedded/ChatEmbedded.css
+++ b/src/components/Embedded/ChatEmbedded.css
@@ -1,6 +1,3 @@
-.chat-widget-content .card-body{
-    overflow-y: auto;
-    max-height: 500px;
-    display: flex;
-    flex-direction: column-reverse;
+.chat-widget-content .chat.card-body{
+    height: 501px;
    }
\ No newline at end of file
diff --git a/src/components/Embedded/ChatEmbedded.tsx b/src/components/Embedded/ChatEmbedded.tsx
index a1ba03c..be437bd 100644
--- a/src/components/Embedded/ChatEmbedded.tsx
+++ b/src/components/Embedded/ChatEmbedded.tsx
@@ -1,15 +1,6 @@
 import "./ChatEmbedded.css";
-import React from "react";
-import ChatBox from "../ChatBox/ChatBox";
-import { Config } from "../../types";
+import { ReactNode } from "react";
 
-export default function ChatEmbedded(props: Config) {
-  return (
-    <ChatBox
-      name={props.name || "Chatbot"}
-      use_feedback={props.useFeedback || false}
-      serverUrl={props.serverUrl}
-      socketioPath={props.socketioPath}
-    />
-  );
+export default function ChatEmbedded({ children }: { children: ReactNode }) {
+  return <div className="row">{children}</div>;
 }
diff --git a/src/components/Explainability/ExplainableBox.css b/src/components/Explainability/ExplainableBox.css
new file mode 100644
index 0000000..e1074a8
--- /dev/null
+++ b/src/components/Explainability/ExplainableBox.css
@@ -0,0 +1,3 @@
+.chat-widget-content .exp.card-body{
+    height: 252px;
+   }
\ No newline at end of file
diff --git a/src/components/Explainability/ExplainableBox.tsx b/src/components/Explainability/ExplainableBox.tsx
new file mode 100644
index 0000000..35c5825
--- /dev/null
+++ b/src/components/Explainability/ExplainableBox.tsx
@@ -0,0 +1,30 @@
+import "./ExplainableBox.css";
+import { useState } from "react";
+import { MDBCardBody } from "mdb-react-ui-kit";
+import Frame from "../Frame/Frame";
+
+export default function ExplainableBox() {
+  const [slotValueExplanation, setSlotValueExplanation] = useState<
+    JSX.Element[]
+  >([]);
+  const [neuralExplanation, setNeuralExplanation] = useState<JSX.Element[]>([]);
+
+  return (
+    <>
+      <div className="row">
+        <div className="col md-12">
+          <Frame title="Explainable AI - Slot-Value">
+            <MDBCardBody className="exp">{slotValueExplanation}</MDBCardBody>
+          </Frame>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col md-12">
+          <Frame title="Explainable AI - Neural Model">
+            <MDBCardBody className="exp">{neuralExplanation}</MDBCardBody>
+          </Frame>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/Frame/Frame.css b/src/components/Frame/Frame.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Frame/Frame.tsx b/src/components/Frame/Frame.tsx
new file mode 100644
index 0000000..8aee6e8
--- /dev/null
+++ b/src/components/Frame/Frame.tsx
@@ -0,0 +1,37 @@
+import "./Frame.css";
+
+import { useContext } from "react";
+import { MDBCard, MDBCardHeader } from "mdb-react-ui-kit";
+import { ConfigContext } from "../../contexts/ConfigContext";
+import { UserContext } from "../../contexts/UserContext";
+
+export default function Frame({
+  children,
+  title,
+}: {
+  children: JSX.Element;
+  title?: string;
+}) {
+  const { config } = useContext(ConfigContext);
+  const { user } = useContext(UserContext);
+
+  return (
+    <div className="chat-widget-content">
+      <MDBCard className="chat-widget-card" style={{ borderRadius: "15px" }}>
+        <MDBCardHeader
+          className="d-flex justify-content-between align-items-center p-3 bg-info text-white border-bottom-0"
+          style={{
+            borderTopLeftRadius: "15px",
+            borderTopRightRadius: "15px",
+          }}
+        >
+          <p className="mb-0 fw-bold">{title ? title : config.name}</p>
+          {user?.username && !title && (
+            <p className="mb-0 fw-bold">{user?.username}</p>
+          )}
+        </MDBCardHeader>
+        {children}
+      </MDBCard>
+    </div>
+  );
+}
diff --git a/src/components/LoginForm/LoginForm.css b/src/components/LoginForm/LoginForm.css
new file mode 100644
index 0000000..b9a8032
--- /dev/null
+++ b/src/components/LoginForm/LoginForm.css
@@ -0,0 +1,20 @@
+.login {
+  max-width: 400px;
+}
+
+.login .form-control {
+    border-color: transparent;
+  }
+  
+.login .form-control:focus {
+  border-color: transparent;
+  box-shadow: inset 0px 0px 0px 1px transparent;
+}
+
+.divider:after,
+.divider:before {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: #eee;
+}
\ No newline at end of file
diff --git a/src/components/LoginForm/LoginForm.tsx b/src/components/LoginForm/LoginForm.tsx
new file mode 100644
index 0000000..693a370
--- /dev/null
+++ b/src/components/LoginForm/LoginForm.tsx
@@ -0,0 +1,76 @@
+import { useContext, useEffect, useState } from "react";
+import { useSocket } from "../../contexts/SocketContext";
+import {
+  MDBInput,
+  MDBBtn,
+  MDBCardBody,
+  MDBCardTitle,
+  MDBCardText,
+} from "mdb-react-ui-kit";
+import "./LoginForm.css";
+import { UserContext } from "../../contexts/UserContext";
+import Frame from "../Frame/Frame";
+
+const LoginForm = () => {
+  const { setUser } = useContext(UserContext);
+  const { login, onLogin, register, onRegister } = useSocket();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const handleAnonymousLogin = () => {
+    setUser({ username: "Anonymous", isAnonymous: true });
+  };
+
+  const handleLogin = () => {
+    login(username, password);
+  };
+
+  const handleRegister = () => {
+    register(username, password);
+  };
+
+  useEffect(() => {
+    onLogin((success: boolean, error: string) => {
+      if (success) {
+        setUser({ username, isAnonymous: false });
+      } else {
+        setErrorMessage(error);
+      }
+    });
+    onRegister((success: boolean, error: string) => {
+      if (success) {
+        setUser({ username, isAnonymous: false });
+      } else {
+        setErrorMessage(error);
+      }
+    });
+  }, [onLogin, onRegister, setUser, setErrorMessage, username]);
+
+  return (
+    <Frame>
+      <MDBCardBody className="login">
+        <MDBCardTitle>Login</MDBCardTitle>
+        <MDBInput
+          label="Username"
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <MDBInput
+          type="password"
+          label="Password"
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        {errorMessage && (
+          <MDBCardText className="text-danger">{errorMessage}</MDBCardText>
+        )}
+        <div className="d-flex justify-content-between mt-3">
+          <MDBBtn onClick={handleRegister}>Register</MDBBtn>
+          <MDBBtn onClick={handleLogin}>Sign In</MDBBtn>
+          <MDBBtn onClick={handleAnonymousLogin}>Anonymous</MDBBtn>
+        </div>
+      </MDBCardBody>
+    </Frame>
+  );
+};
+
+export default LoginForm;
diff --git a/src/components/Widget/ChatWidget.css b/src/components/Widget/ChatWidget.css
index 2967ef7..055a063 100644
--- a/src/components/Widget/ChatWidget.css
+++ b/src/components/Widget/ChatWidget.css
@@ -19,11 +19,8 @@ min-height: 170px;
 transition: all 0.3s ease-in-out;
 }
 
-.chat-widget-content .card-body{
- overflow-y: auto;
+.chat-widget-container .chat-widget-content .card-body{
  max-height: 450px;
- display: flex;
- flex-direction: column-reverse;
 }
 
 .chat-widget-icon{
diff --git a/src/components/Widget/ChatWidget.tsx b/src/components/Widget/ChatWidget.tsx
index 55988b7..bc13be5 100644
--- a/src/components/Widget/ChatWidget.tsx
+++ b/src/components/Widget/ChatWidget.tsx
@@ -1,10 +1,8 @@
 import "./ChatWidget.css";
-import { useState, MouseEvent } from "react";
-import ChatBox from "../ChatBox/ChatBox";
+import { useState, MouseEvent, ReactNode } from "react";
 import { MDBIcon } from "mdb-react-ui-kit";
-import { Config } from "../../types";
 
-export default function ChatWidget(props: Config) {
+export default function ChatWidget({ children }: { children: ReactNode }) {
   const [isChatBoxOpen, setIsChatBoxOpen] = useState<boolean>(false);
 
   function handleClick(event: MouseEvent<HTMLAnchorElement>) {
@@ -18,16 +16,7 @@ export default function ChatWidget(props: Config) {
           <MDBIcon fas icon="robot" />
         </a>
       </div>
-      <div className="chat-widget-box">
-        {isChatBoxOpen && (
-          <ChatBox
-            name={props.name || "Chatbot"}
-            use_feedback={props.useFeedback || false}
-            serverUrl={props.serverUrl}
-            socketioPath={props.socketioPath}
-          />
-        )}
-      </div>
+      <div className="chat-widget-box">{isChatBoxOpen && children}</div>
     </div>
   );
 }
diff --git a/src/contexts/ConfigContext.tsx b/src/contexts/ConfigContext.tsx
new file mode 100644
index 0000000..df4026f
--- /dev/null
+++ b/src/contexts/ConfigContext.tsx
@@ -0,0 +1,43 @@
+import React, { useState, ReactNode } from "react";
+
+export type Config = {
+  name: string | undefined;
+  serverUrl: string | undefined;
+  socketioPath?: string | undefined;
+  useFeedback?: boolean | undefined;
+  useLogin?: boolean | undefined;
+  showExplanation?: boolean | undefined;
+  useWidget?: boolean | undefined;
+};
+
+type ConfigProviderProps = {
+  children: ReactNode;
+};
+
+const defaultConfig: Config = {
+  name: "Chatbot",
+  serverUrl: "http://127.0.0.1:5000/",
+  socketioPath: undefined,
+  useFeedback: false,
+  useLogin: false,
+  showExplanation: false,
+  useWidget: false,
+};
+
+export const ConfigContext = React.createContext<{
+  config: Config;
+  setConfig: React.Dispatch<React.SetStateAction<Config>>;
+}>({
+  config: defaultConfig,
+  setConfig: () => {},
+});
+
+export const ConfigProvider: React.FC<ConfigProviderProps> = ({ children }) => {
+  const [config, setConfig] = useState<Config>(defaultConfig);
+
+  return (
+    <ConfigContext.Provider value={{ config, setConfig }}>
+      {children}
+    </ConfigContext.Provider>
+  );
+};
diff --git a/src/contexts/SocketContext.tsx b/src/contexts/SocketContext.tsx
new file mode 100644
index 0000000..5029d3a
--- /dev/null
+++ b/src/contexts/SocketContext.tsx
@@ -0,0 +1,34 @@
+import React, { createContext, useContext, ReactNode } from "react";
+import useSocketConnection from "./socket_connector";
+
+interface SocketProviderProps {
+  children: ReactNode;
+  url?: string;
+  path?: string;
+}
+
+const SocketContext = createContext<ReturnType<
+  typeof useSocketConnection
+> | null>(null);
+
+export const useSocket = () => {
+  const context = useContext(SocketContext);
+  if (!context) {
+    throw new Error("useSocket must be used within a SocketProvider");
+  }
+  return context;
+};
+
+export const SocketProvider: React.FC<SocketProviderProps> = ({
+  children,
+  url,
+  path,
+}) => {
+  const socketMethods = useSocketConnection(url, path);
+
+  return (
+    <SocketContext.Provider value={socketMethods}>
+      {children}
+    </SocketContext.Provider>
+  );
+};
diff --git a/src/contexts/UserContext.tsx b/src/contexts/UserContext.tsx
new file mode 100644
index 0000000..e456d01
--- /dev/null
+++ b/src/contexts/UserContext.tsx
@@ -0,0 +1,32 @@
+import React, { ReactNode, useState } from "react";
+
+export type User = {
+  username: string;
+  isAnonymous: boolean;
+};
+
+type UserProviderProps = {
+  children: React.ReactNode;
+};
+
+export const UserContext = React.createContext<{
+  user: User | null;
+  setUser: React.Dispatch<React.SetStateAction<User | null>>;
+}>({
+  user: null, // no default user
+  setUser: () => {},
+});
+
+export const UserProvider: React.FC<UserProviderProps> = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [user, setUser] = useState<User | null>(null);
+
+  return (
+    <UserContext.Provider value={{ user, setUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
diff --git a/src/components/socket_connector.tsx b/src/contexts/socket_connector.tsx
similarity index 54%
rename from src/components/socket_connector.tsx
rename to src/contexts/socket_connector.tsx
index d30e570..b56a3e6 100644
--- a/src/components/socket_connector.tsx
+++ b/src/contexts/socket_connector.tsx
@@ -8,15 +8,29 @@ export default function useSocketConnection(
 ) {
   const [socket, setSocket] = useState<Socket | null>(null);
   const [isConnected, setIsConnected] = useState(false);
+  const [connectError, setConnectError] = useState<Error | null>(null);
   const onMessageRef = useRef<(message: ChatMessage) => void>();
   const onRestartRef = useRef<() => void>();
+  const onLoginRef = useRef<(success: boolean, error: string) => void>();
+  const onRegisterRef = useRef<(success: boolean, error: string) => void>();
 
   useEffect(() => {
     const newSocket = io(url, { path: path });
     setSocket(newSocket);
 
+    newSocket.on("connect_error", (error) => {
+      console.error("Connection error", error);
+      setConnectError(error); // Set connection error
+    });
+
+    newSocket.on("connect_timeout", () => {
+      console.error("Connection timeout");
+      setConnectError(new Error("Connection timeout")); // Set timeout as connection error
+    });
+
     newSocket.on("connect", () => {
       setIsConnected(true);
+      setConnectError(null);
     });
 
     newSocket.on("disconnect", () => {
@@ -36,11 +50,23 @@ export default function useSocketConnection(
       onRestartRef.current && onRestartRef.current();
     });
 
+    newSocket.on("login_response", ({ success, error }) => {
+      onLoginRef.current && onLoginRef.current(success, error);
+    });
+
+    newSocket.on("register_response", ({ success, error }) => {
+      onRegisterRef.current && onRegisterRef.current(success, error);
+    });
+
     return () => {
       newSocket.disconnect();
     };
   }, [url, path]);
 
+  const startConversation = () => {
+    socket?.emit("start_conversation", {});
+  };
+
   const sendMessage = (message: UserMessage) => {
     socket?.emit("message", message);
   };
@@ -61,12 +87,33 @@ export default function useSocketConnection(
     onRestartRef.current = callback;
   };
 
+  const login = (username: string, password: string) => {
+    socket?.emit("login", { username, password });
+  };
+
+  const onLogin = (callback: (success: boolean, error: string) => void) => {
+    onLoginRef.current = callback;
+  };
+
+  const register = (username: string, password: string) => {
+    socket?.emit("register", { username, password });
+  };
+
+  const onRegister = (callback: (success: boolean, error: string) => void) => {
+    onRegisterRef.current = callback;
+  };
+
   return {
     isConnected,
+    startConversation,
     sendMessage,
     giveFeedback,
     quickReply,
     onRestart,
     onMessage,
+    login,
+    onLogin,
+    register,
+    onRegister,
   };
 }
diff --git a/src/index.tsx b/src/index.tsx
index 76f8b9a..f2a9d31 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,66 +1,73 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
 import "mdb-react-ui-kit/dist/css/mdb.min.css";
 import "@fortawesome/fontawesome-free/css/all.min.css";
 import "./index.css";
+
+import React, { useContext, useEffect } from "react";
+import ReactDOM from "react-dom/client";
+import {
+  Config,
+  ConfigContext,
+  ConfigProvider,
+} from "./contexts/ConfigContext";
+import { UserProvider } from "./contexts/UserContext";
 import App from "./App";
+
 import reportWebVitals from "./reportWebVitals";
-import { Config } from "./types";
+import { SocketProvider } from "./contexts/SocketContext";
 
 let root: ReactDOM.Root;
 
-const initChatWidget = (
-  config: Config | undefined = undefined,
-  widgetContainerID: string | undefined = "chatWidgetContainer"
-) => {
-  let widgetContainer: HTMLElement | null =
-    document.getElementById(widgetContainerID);
-  if (!widgetContainer) {
-    widgetContainer = document.createElement("div");
-    widgetContainer.id = "chatWidgetContainer";
-    document.body.appendChild(widgetContainer);
+const ConfigLoader: React.FC<{ config: Partial<Config> }> = ({ config }) => {
+  const { setConfig } = useContext(ConfigContext);
+
+  useEffect(() => {
+    setConfig((prevConfig) => ({ ...prevConfig, ...config }));
+  }, [config, setConfig]);
+
+  return <App />;
+};
+
+declare global {
+  interface Window {
+    ChatWidget: (config: Partial<Config>, containerId: string) => void;
   }
+}
 
-  config = {
-    name:
-      config?.name || widgetContainer?.getAttribute("data-name") || "Chatbot",
-    serverUrl:
-      config?.serverUrl ||
-      widgetContainer?.getAttribute("data-server-url") ||
-      "http://127.0.0.1:5000/",
-    socketioPath:
-      config?.socketioPath ||
-      widgetContainer?.getAttribute("data-socketio-path") ||
-      undefined,
-    useFeedback:
-      config?.useFeedback ?? widgetContainer?.hasAttribute("data-use-feedback"),
-    useLogin:
-      config?.useLogin ?? widgetContainer?.hasAttribute("data-use-login"),
-    useWidget:
-      config?.useWidget ?? widgetContainer?.hasAttribute("data-use-widget"),
-  };
+window.ChatWidget = (config, containerId) => {
+  const container = document.getElementById(containerId);
+
+  if (Object.keys(config).length === 0 && container) {
+    // Read data properties from the container div and use them as the config
+    const dataset = container.dataset;
+    config = {
+      useFeedback: "useFeedback" in dataset,
+      useLogin: "useLogin" in dataset,
+      showExplanation: "showExplanation" in dataset,
+      useWidget: "useWidget" in dataset,
+    };
+    if (dataset.name) config.name = dataset.name;
+    if (dataset.serverUrl) config.serverUrl = dataset.serverUrl;
+    if (dataset.socketioPath) config.socketioPath = dataset.socketioPath;
+  }
 
   if (!root) {
-    root = ReactDOM.createRoot(widgetContainer as HTMLElement);
+    root = ReactDOM.createRoot(container as HTMLElement);
   }
 
   root.render(
-    <React.StrictMode>
-      <App {...config} />
-    </React.StrictMode>
+    <ConfigProvider>
+      <SocketProvider>
+        <UserProvider>
+          <ConfigLoader config={config} />
+        </UserProvider>
+      </SocketProvider>
+    </ConfigProvider>
   );
 };
 
-declare global {
-  interface Window {
-    ChatWidget: typeof initChatWidget;
-  }
-}
-
 if (document.getElementById("chatWidgetContainer")) {
-  initChatWidget();
+  window.ChatWidget({}, "chatWidgetContainer");
 }
-window.ChatWidget = initChatWidget;
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
diff --git a/src/tests/App.test.tsx b/src/tests/App.test.tsx
index 471bb42..ed8ee9e 100644
--- a/src/tests/App.test.tsx
+++ b/src/tests/App.test.tsx
@@ -1,26 +1,23 @@
-import React from "react";
+import React, { useContext, useEffect } from "react";
 import { render } from "@testing-library/react";
 import App from "../App";
-import { Config } from "../types";
+import { ConfigContext } from "../contexts/ConfigContext";
 
-test("Renders widget", () => {
-  const config: Config = {
-    name: "Chatbot",
-    serverUrl: "http://localhost:5000",
-    useFeedback: false,
-    useLogin: false,
-    useWidget: true,
-  };
-  render(<App {...config} />);
+test("Renders Embedded", () => {
+  render(<App />);
 });
 
-test("Renders embedded", () => {
-  const config: Config = {
-    name: "Chatbot",
-    serverUrl: "http://localhost:5000",
-    useFeedback: false,
-    useLogin: false,
-    useWidget: false,
-  };
-  render(<App {...config} />);
+test("Renders Widget", () => {
+  const { setConfig } = useContext(ConfigContext);
+
+  // Set the config when the component mounts
+  useEffect(() => {
+    const config = {
+      useWidget: true,
+    };
+
+    setConfig((prevConfig) => ({ ...prevConfig, ...config }));
+  }, [setConfig]);
+
+  render(<App />);
 });
diff --git a/src/types.tsx b/src/types.tsx
index 820b9d9..7fa91e1 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -1,12 +1,3 @@
-export type Config = {
-  name: string | undefined;
-  serverUrl: string | undefined;
-  useFeedback: boolean | undefined;
-  useLogin: boolean | undefined;
-  useWidget?: boolean | undefined;
-  socketioPath?: string | undefined;
-};
-
 export type ChatMessageButton = {
   title: string;
   payload: string;
