Merge pull request #692 from novuhq/inbox-docs-update

Inbox docs update

Author: scopsy

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "topbar"
+    ]
+}

images/inbox/Elements.png

@@ -1,12 +1,10 @@
 ---
-title: 'Introduction'
-description: "Learn more about Novu's Inbox Component."
+title: 'Overview'
+description: "Learn more about Novu's Inbox component."
 ---
 
 The Inbox component enables a rich context-aware in-app notifications center directly in your application, and with minimal effort.
 
-In-App notifications are different from push notifications because the notifications are consumed directly by the user in your app itself, whereas push notifications are shown on the device level. Read more about [push channel and supported providers.](/channels-and-providers/push/overview)
-
 Novu provides a pre-built, ready-to-use, and customizable Inbox UI component. It's in React today, and soon will be available in other popular frameworks including Vue, React Native, and full headless.
 
 <Frame caption="Fully functional and customizable React Inbox component">

images/inbox/Variables Inbox.png

@@ -4,24 +4,6 @@ sidebarTitle: 'Advanced Configuration'
 description: 'Learn how to configure the Inbox component with advanced options'
 ---
 
-## Use your own backend and socket URL
-
-By default, Novu's hosted services for API and socket are used. If you want, you can override them and configure your own.
-
-```tsx
-import { Inbox } from '@novu/react';
-
-function Novu() {
-  return (
-    <Inbox
-      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
-      subscriberId="YOUR_SUBSCRIBER_ID"
-      backendUrl="YOUR_BACKEND_URL"
-      socketUrl="YOUR_SOCKET_URL"
-    />
-  );
-}
-```
 
 ## HMAC Encryption
 
@@ -67,3 +49,22 @@ const hmacHash = createHmac('sha256', process.env.NOVU_API_KEY)
 ## Backend SDK Methods
 
 [Backend sdk methods](/sdks/framework/typescript/overview)
+
+## Use your own backend and socket URL
+
+By default, Novu's hosted services for API and socket are used. If you want, you can override them and configure your own.
+
+```tsx
+import { Inbox } from '@novu/react';
+
+function Novu() {
+  return (
+    <Inbox
+      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
+      subscriberId="YOUR_SUBSCRIBER_ID"
+      backendUrl="YOUR_BACKEND_URL"
+      socketUrl="YOUR_SOCKET_URL"
+    />
+  );
+}
+```