+
+
+
+ Explore the docs »
+
+
+ Join Our Discord + · + Roadmap + · + X + · + Notifications Directory +
+ ++ Available in: Node.js + · PHP + · Laravel + · Go + · Ruby + · Kotlin + · Python + · Java + · .NET + · Elixir + · Rust +
+ +### 👩💻 Docs Contribution + +[Checkout this video on how to contribute in Novu's documentation](https://www.loom.com/share/1667ee280c2448c7a40838b72b1399af) + +First, install the [Mintlify CLI](https://www.npmjs.com/package/mintlify) locally. To install, use the following command ``` npm i -g mintlify ``` -Run the following command at the root of your documentation (where mint.json is) +**Note**: Please install Node.js (version 18 or higher) before proceeding. + +Run the following command at the root of the documentation (where mint.json is) to preview the documentation changes ``` mintlify dev @@ -24,9 +65,9 @@ mintlify dev ### 😎 Publishing Changes -Changes will be deployed to production automatically after pushing to the default branch. +All changes to the docs should be submitted against the `staging` branch. [Preview the documentation changes](https://novu-preview.mintlify.app/introduction). -You can also preview changes using PRs, which generates a preview link of the docs. +PRs from `staging` to `main` will be deployed to production automatically after merge. #### Troubleshooting diff --git a/_snippets/snippet-example.mdx b/_snippets/snippet-example.mdx deleted file mode 100644 index 089334c5..00000000 --- a/_snippets/snippet-example.mdx +++ /dev/null @@ -1,3 +0,0 @@ -## My Snippet - -
+
+
+### How to access past invoices?
+Past invoices can be accessed from the billing settings in the Novu dashboard. Click on the avatar icon in the top right corner of the dashboard, then click on **Billing Plans** on the side menu to access the billing settings. From there, click on the **Manage Subscription** option in your subscribed tier to view past invoices.
+
+
+ 
+
\ No newline at end of file
diff --git a/account/sso.mdx b/account/sso.mdx
new file mode 100644
index 00000000..66805fa2
--- /dev/null
+++ b/account/sso.mdx
@@ -0,0 +1,19 @@
+---
+title: "Single Sign-On (SSO) for your account"
+sidebarTitle: "SAML SSO"
+description: "Learn how to enable Single Sign-On (SSO) for your account."
+---
+
+
{" "}
+
+## Providers
+
+Providers are responsible for handling message delivery across various channels. Novu currently supports multiple notification channels, each with its own set of providers.
+
+- Chat: This channel offers these providers:
+ - Discord
+ - MS Teams
+ - Slack
+ - Zulip
+- Email: The Email channel features these providers:
+ - Sendgrid
+ - Amazon SES
+ - Brevo
+ - Resend
+ - SparkPost
+ - Postmark
+ - Mailjet
+ - Mailtrap
+ - Plunk
+ - Braze
+ - Mailersend
+ - Outlook 365 (based on a custom SMTP server)
+ - Mailgun
+ - Mandrill
+ - Netcore
+ - Infobip, and
+ - Custom SMTP
+- SMS: The SMS channel features these providers:
+ - Twilio SMS
+ - SMS77
+ - Africa’s Talking
+ - Infobip
+ - Nexmo
+ - Plivo
+ - Sendchamp
+ - AWS SNS
+ - Telnyx
+ - Termii
+ - Firetext
+ - Gupshup
+ - Clickatell
+ - Azure SMS
+ - BulkSMS
+ - SimpleTexting
+ - MessageBird
+- Push Notification Providers: This channel includes these providers:
+ - Firebase Cloud Messaging (FCM)
+ - Expo Push
+ - Apple Push Notification Service (APNS)
+ - One Signal
+ - Pushpad
+ - Pusher Beams
+ - Push Webhook
+- Inbox: Novu provides you with a set of APIs and components to create rich customized inbox experiences:
+ - React component
+ - Angular component
+ - Vue component
+ - Web component
+ - iFrame embed
+ - Custom styling
+ - Headless Inbox
+
+## Subscribers
+
+Subscribers are entities designated to receive the notifications you send. Each subscriber in Novu is uniquely identified by their `subscriberId`.
+
+## Actor
+
+An `actor` refers to a user or subscriber who initiates actions that trigger events within the system. Each actor is uniquely identified by an "actorId," also known as "subscriberId," which distinguishes them from others.
+
+Actors hold user-related variables, such as subscriber properties and data payload, containing information like names, emails, and custom data.
+
+Additionally, actors can enhance notifications by allowing their avatars to be displayed, improving the context and identification of notifications.
+
+Including actors in event data enables precise tracking and personalization of actions and events in the Novu platform.
+
+## Workflow
+
+Workflow templates define the flow of messages sent to subscribers.
+
+## Topics
+
+Topics facilitate bulk notifications to multiple subscribers simultaneously, streamlining communication.
+
+## Digest Engine
+
+The digest engine aggregates multiple trigger events into a single message, ensuring efficient communication.
+
+## Delay Actions
+
+Delay actions introduce time intervals between workflow steps, optimizing message delivery timing.
+
+## Step Filter
+
+Step filters customize workflow by specifying notification criteria, enhancing communication efficiency.
+
+## Organizations
+
+Organizations allow separation of notifications across multiple products, managed through the Novu web dashboard.
+
+
+ 
{" "}
+
+
+## Environments
+
+Novu runs all your requests in the context of an environment. By default, Novu creates two environments when your account was created, `development` and `production`. 1. `Development environment`: The development environment is used for testing purposes and validating notification changes prior to committing them to the production environment. 2. `Production environment`: It will be your live/production environment, you cannot make changes to this environment directly. You will first have to make the changes in the `development` environment and then promote it to `production`. This is a read-only environment.
+
+## Data associated with an environment
+
+ - Subscribers (can’t be promoted to production)
+ - Workflows (can be promoted to production)
+ - Messages
+ - Execution logs
+ - Connected integrations (can’t be promoted to production)
+ - Notification feeds (can be promoted to production)
+ - Brand-related assets and settings
+
+## Team members
+
+Members of a team have access to the Novu web dashboard. This allows you to have individuals work on and manage templates and notifications.
+
+## Layouts
+
+Layouts are HTML designs or structures to wrap the content of email notifications. Layouts can be manipulated and assigned to new or existing workflows within the Novu platform, allowing users to create, manage, and assign these layouts to workflows, so they can be reused to structure the appearance of notifications sent through the platform.
diff --git a/additional-resources/idempotency.mdx b/additional-resources/idempotency.mdx
new file mode 100644
index 00000000..5177b007
--- /dev/null
+++ b/additional-resources/idempotency.mdx
@@ -0,0 +1,115 @@
+---
+title: "Idempotent Requests"
+description: "Retry API requests fearlessly, ensuring the operation performs just once!"
+icon: "repeat-1"
+---
+
+Our platform has a seamless integration of optional [idempotent](https://en.wikipedia.org/wiki/Idempotence) requests for `POST` and `PATCH` operations.
+This integration closely adheres to the [Idempotency-key ietf draft](https://datatracker.ietf.org/doc/draft-ietf-httpapi-idempotency-key-header/).
+These idempotent operations deliver the same result regardless of the number of requests made, using an idempotent key.
+
+Leveraging this feature guarantees the safety and reliability of your requests, especially in cases where network or communication issues might inject uncertainty into request outcomes.
+Idempotent requests are critical for workflows that require the insurance of only one successful delivery request.
+
+
{" "}
+
+
+- `IS_MULTI_TENANCY_ENABLED` adds ability to manage tenants from dashboard.
+
+
+ 
{" "}
+
+
+- `IS_TEMPLATE_STORE_ENABLED` enables template store which contains pre-made workflows for common use cases (like **Password Reset** workflow etc).
+
+ 
{" "}
+
diff --git a/community/get-involved.mdx b/community/get-involved.mdx
new file mode 100644
index 00000000..d849169b
--- /dev/null
+++ b/community/get-involved.mdx
@@ -0,0 +1,126 @@
+---
+title: 'Get involved with the Novu Community'
+sidebarTitle: 'Get Involved'
+description: 'Your guide for engaging with the Novu Community'
+---
+
+## Our Community
+
+At Novu, we're a vibrant, open-source community driven by passion, collaboration, and a shared love for pushing boundaries. We believe in the power of community-driven development, where every voice matters and every contribution counts. As such, contributions are at the heart of how we evolve and progress forward.
+
+## Join the conversation
+
+- Read our [code of conduct](/community/code-of-conduct)
+- Say “Hi!” in our [Discord Server](https://discord.gg/novu?ref=docs-community-introduction)
+- Explore our [open issues](https://github.com/novuhq/novu/issues)
+- Subscribe to our newsletter [to stay in the know](https://novu.co/novu-community-2-0/?utm_campaign=docs-comm2-get-involved)
+
+## Getting help
+
+Our fellow community members are always ready to help you get past a blocker. However, you can take a few things into consideration to help them help you:
+
+- Share as many details as you can share. It will help us in debugging the issue.
+- If there is any bug, please share steps to reproduce that bug.
+- If there is any issue in running Novu on a local machine, please share system details like operating system, RAM size, npm version and node version.
+- If there is any issue in our backend SDKs, please mention the SDK version and relevant details.
+- If looking for self-hosting support, please share `Novu Version` and remote server details. Our latest version is `0.24.0`. Please be patient with self-hosting help. We are a small team and we will try our best to help you.
+
+
+
+
+If needed, see:
+
+[Resolve "Unable to locate credentials" error in Amazon S3](https://aws.amazon.com/premiumsupport/knowledge-center/s3-locate-credentials-error/)
+
+### Run LocalStack
+
+This is needed only when you upload files (for example - an image) in the admin panel from your local environment.
+
+LocalStack emulates cloud service that runs in a single container on your computer. So you can run your AWS applications on your local machine without connecting to the remote cloud provider.
+
+1. Build a container and run it:
+
+```shell
+docker run --rm -it -p 4566:4566 -p 4571:4571 localstack/localstack
+```
+
+2. Create local S3 buckets needed for the app:
+
+ In **local** environment:
+
+ ```shell
+ aws --endpoint-url=http://localhost:4566 s3 mb s3://novu-local
+ ```
+
+ In **test** environment:
+
+ ```shell
+ aws --endpoint-url=http://localhost:4566 s3 mb s3://novu-test
+ ```
+
+3. Update cors:
+
+ ```json
+ aws --endpoint-url=http://localhost:4566 s3api put-bucket-cors --bucket novu-local --cors-configuration file://cors.json
+ ```
+
+ ```json cors.json
+ {
+ "CORSRules": [
+ {
+ "AllowedOrigins": ["*"],
+ "AllowedHeaders": ["*"],
+ "AllowedMethods": ["GET", "PUT", "POST", "DELETE"],
+ "MaxAgeSeconds": 3000,
+ "ExposeHeaders": ["x-amz-server-side-encryption"]
+ }
+ ]
+ }
+ ```
+
+### MongoDB
+
+After installing brew you can easily install the MongoDB community edition.
+
+1. Tap the [MongoDB Homebrew Tap](https://github.com/mongodb/homebrew-brew) to download the official Homebrew formula for MongoDB and the Database Tools, by running the following command in your macOS Terminal:
+
+```shell
+brew tap mongodb/brew
+```
+
+2. To install MongoDB, run the following command in your macOS Terminal application
+
+ 1. You might need to update the Command Line Tools to be compatible with Xcode - see
+
+ [Sign in with your Apple ID](https://developer.apple.com/download/all/?q=Xcode)
+
+```shell
+brew install mongodb-community@5.0
+```
+
+3. Run the service in the background and start automatically after restart.
+
+```shell
+brew services start mongodb/brew/mongodb-community@5.0
+```
+
+### Redis
+
+After installing homebrew run the redis installation
+
+```shell
+brew install redis
+```
+
+After installation run the service to start on system start as well.
+
+```shell
+brew services restart redis
+```
+
+### Local dev domain (Optional)
+
+This will allow you to use [local.novu.co](http://local.novu.co) instead of [localhost](http://localhost) when accessing the service on your machine.
+
+Open the `/etc/hosts` file:
+
+```shell
+sudo nano /etc/hosts
+```
+
+And add the [local.novu.co](http://local.novu.co) domain
+
+```shell
+127.0.0.1 local.novu.co
+```
+
+### Code Editor
+
+Feel free to install your favorite code editor. We supply licenses for [WebStorm](https://www.notion.so/WebStorm-7570ab1037bf494d88d0f9b544ae3b79?pvs=21), or you can [Visual Studio Code](https://code.visualstudio.com/download) if you prefer it.
+
+### Productivity tools
+
+- GitHub Desktop (Optional)
+
+GitHub Desktop simplifies the development workflow and interaction with Git. [Download](https://desktop.github.com/) the client from their website.
+
+- Clean your Dock bar (Optional)
+
+For better productivity and wellness, we suggest removing the not-used apps from LaunchBar. Don’t worry if you will remove most apps from there. You can always use the spotlight to open the apps you need. Clean workspace === Happy life :)
+Right Click on the app icon > Options > Remove from Dock
+
+
+ 
+
diff --git a/community/monorepo-structure.mdx b/community/monorepo-structure.mdx
new file mode 100644
index 00000000..3e1d4e77
--- /dev/null
+++ b/community/monorepo-structure.mdx
@@ -0,0 +1,132 @@
+---
+title: 'Monorepo Structure'
+description: "Learn the components of Novu's monorepo"
+---
+
+In this guide, we will explore the Novu mono-repo structure and high-level structure of the different libraries and services we use.
+
+## Setting up the monorepo
+
+Novu uses [PNPM](https://pnpm.js.org/) as its package manager, and [NX](https://nx.dev/) as its build CLI tool. PNPM reduces the installation time and generates symlinks for all the internal packages we use.
+
+To initialize the monorepo, run the following command from the root of the project:
+
+```bash
+npm run setup:project
+```
+
+This will:
+
+- run `pnpm install`, which will download all the needed dependencies and create symlinks for packages.
+- copy the `.env.example` file to the `.env` file for the API service.
+- execute the `npm run build` command to build all the dependency trees locally.
+
+For additional information on running Novu locally, visit the [run locally](/community/run-in-local-machine) guide.
+
+## Apps
+
+The `apps` folder contains high-level applications and APIs. The app's outputs usually contain deployable units that a user can interact with either as an API or as a web/cli application.
+
+
+
+
+### Build phase
+
+When [building new workflows](/workflow/overview), you will be using the [Novu Framework SDK](/framework/typescript/overview) to define the workflows and their steps directly in your IDE. The local workflows can be previewed and tested using our [Local Studio](/framework/studio) companion app.
+
+### Sync phase
+
+A sync is needed once a notification workflow code is created or updated. We offer multiple sync methods including CI/CD integrations and a custom CLI tool.
+
+During a sync, the workflows defined using the Novu Framework SDK will be pushed to our cloud service and will be persisted in our database.
+Once synced, you will be able to view the workflows in the workflows Page on the Dashboard. All the controls created using JSON Schema or Zod will be transformed into UI elements that can be modified without changing the source code. Read more about controls [here](/framework/controls).
+
+### Execution phase
+
+Once a workflow is synced, the workflow engine will make API requests to the bridge endpoint to execute individual workflow steps.
+After the fan-out is complete, the bridge endpoint will be triggered with the relevant execution context and will respond with the compiled content and metadata needed to deliver the notification.
+
+## Get Started
+
+To get started with the framework endpoint, visit the Getting Started page relevant to your tech-stack:
+
+
+
+
+## Subscriber channel preferences per workflow
+
+`
+
+
+
+
+
+## Critical workflows
+
+In some cases, you don't want the subscriber to be able to unsubscribe from mandatory notifications such as Account Verification, Password Reset, etc...
+
+In those cases you can mark a workflow as `critical` in the Dashboard. Critical workflow are not displayed in the subscriber preferences page.
+
+## API
+
+
{" "}
+
diff --git a/concepts/workflows.mdx b/concepts/workflows.mdx
new file mode 100644
index 00000000..de18d8e6
--- /dev/null
+++ b/concepts/workflows.mdx
@@ -0,0 +1,147 @@
+---
+title: "Workflows"
+description: "Learn what workflows are and how they work in Novu"
+---
+
+A workflow holds the entire flow of steps (nodes) that are sent to the subscriber. This is where all the different channels are tied together under a single entity.
+
+## Structure
+
+A workflow acts as the blueprint for the notifications that will be sent. This is where all the different channels, filters, rules and actions are tied together under a single entity.
+
+The **Workflow Editor** simplifies building automated, personalized workflows without coding while also allowing developers to refine code-based workflows.
+
+## How it works
+
+Workflow Editor builds on the principle of steps. Instead of defining a single, complex piece of business logic, workflows contain multiple individual steps.
+
+In case of an error, a failed step is retried individually without needing to re-run any previous steps. Instead of the entire business logic, each step can take up your serverless function execution duration, and many more benefits.
+
+
+
+Here is how a workflow looks like in the UI Workflow Editor:
+
+
+
+## Workflow building blocks
+
+Every Novu workflow is built using these four key elements:
+
+- **Workflow identifier**: A unique ID used to link triggers to the correct workflow
+- **Trigger**: The event or action that starts the workflow
+- **Channel steps**: These send notifications through your configured channels
+- **Action steps**: Functions that manage the workflow’s logic and control its flow
+
+### Workflow identifier
+
+Give your Workflow a clear, descriptive name that your team can easily identify.
+Workflow identifiers should be unique to your application and descriptive of the workflow's purpose.
+
+For example:
+
+- Abandoned cart recovery
+- Password reset flow
+- New user welcome series
+- Re-engagement campaign
+
+### Trigger
+
+A trigger starts every workflow. It’s an action or event that tells the workflow to begin. To do this, you call the Novu API with a unique workflow trigger identifier (`workflow_id`), which links the trigger to the correct workflow.
+
+When the trigger happens, it sends the data the workflow needs to notify subscribers. [Learn more about subscribers](/concepts/subscribers).
+
+Triggers are the only way to start workflows and send notifications, making sure everything runs as expected.
+
+**Example of a trigger**
+Here's an example of an API call to trigger an event:
+
+```bash
+curl -X POST https://api.novu.co/v1/events/trigger \
+ -H "Authorization: ApiKey 
diff --git a/content-creation-design/handlebars-helpers.mdx b/content-creation-design/handlebars-helpers.mdx
new file mode 100644
index 00000000..7de6e528
--- /dev/null
+++ b/content-creation-design/handlebars-helpers.mdx
@@ -0,0 +1,239 @@
+---
+title: "Handlebars & Helpers"
+description: "Learn how to use Handlebars templating and built-in helper functions to create dynamic, personalized notification content in Novu."
+icon: "brackets-curly"
+---
+
+# Handlebars
+
+The Novu notification content editor relies on Handlebars.js to establish the logic and control flow of our workflows.
+For a deeper comprehension of Handlebars.js, you can refer to its [documentation](https://handlebarsjs.com/guide/#what-is-handlebars).
+
+This resource offers comprehensive insights into the utilization of Handlebars.js in crafting dynamic and adaptable notification content within the Novu platform.
+
+| Helper | Description | Example | Output |
+| --------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------- |
+| if | Conditionally renders a block. Falsy values won't be rendered. | `{{#if author}}
+
+#### Create and Edit Layouts
+
+You can create new or edit existing layouts through the layout editor.
+
+- You can create any html code to structure your layout.
+- Set a layout as default for your organization. Notice there could only be one default layout at a time.
+- Manage layout variables - set default values or required variables.
+
+
+
+
+
+#### Override layout on trigger
+
+To override your assigned layout during a trigger event, use the `layoutIdentifier` property.
+
+The layout specified will be used for all emails in the context of that trigger event.
+
+```ts
+import { Novu } from "@novu/node";
+
+const novu = new Novu("
+
+**Output:**
+
+```html
+Hello John Doe! We are excited to welcome you to our basic plan. Look forward to
+receiving daily updates from us on your phone number: +98712345677. Why not
+consider renting a car to visit us? Should you require any assistance, don't
+hesitate to reach out. Best regards, Your friends at Novu.
+```
+
+
+
+### Custom Code Editor
+
+**Input:**
+
+Best regards,
Your friends at Novu
+
+**Output:**
+
+
+
+
+
+You can:
+
+- Transform notifications into clickable links, redirecting to your specified URLs
+- Enjoy unlimited character freedom
+- Utilize all variables to craft dynamic and personalized messages
+- Infuse your brand's essence with customizable elements
+- Drive engagement with action buttons
+- Embed avatar images
+- Preview the expected output
+
+## SMS
+
+When crafting your SMS notification, you can tap into all the available variables and even add dynamic ones.
+
+
+
+## Chat
+
+We make it effortless to send notifications to chat providers like Slack, Microsoft Teams, and Discord. Meet your users in the tools they use daily.
+You have the ability to utilize all variables to craft dynamic and personalized messages.
+
+
+
+## Push
+
+Push channel has two fields `Push Message Title` and `Push Message Content` where user can write hard coded text content or use system, dynamic variables or handlebar helpers to customize notification content.
+
+
diff --git a/content-creation-design/translations.mdx b/content-creation-design/translations.mdx
new file mode 100644
index 00000000..bb9e9e62
--- /dev/null
+++ b/content-creation-design/translations.mdx
@@ -0,0 +1,696 @@
+---
+title: "Translations"
+description: "Translate notification content to different languages using i18n."
+icon: "language"
+---
+
+
+
+Before creating your first Translation Group you'll be prompted to specify the default locale for organization. This locale serves as a fallback option for localized messages in cases where the recipient hasn't defined a specific locale.
+
+
+
+After selecting the default language, you can provide the essential details: the group name, group identifier, and select your target languages.
+
+The group identifier is an important value that you will later use in the editor to localize your messages. This is a similar concept that we use across the app to identify the main parts.
+
+
+
+After the group is created, you will land on the group details page on which you can see the list with the empty translations for the languages you choose.
+
+
+
+## Translations
+
+Translations are JSON files that contain the content of your messages in a specific language. For example, if you created a Marketing translation group with two target languages English and German, then your translation JSON files might look like this:
+
+**English (en.json):**
+
+```json
+{
+ "welcome_message": "Welcome to our Marketing Campaign!",
+ "learn_more": "Learn More",
+ "special_offer": "Special Offer",
+ "contact_us": "Contact Us"
+}
+```
+
+**German (de.json):**
+
+```json
+{
+ "welcome_message": "Willkommen bei unserer Marketingkampagne!",
+ "learn_more": "Mehr erfahren",
+ "special_offer": "Sonderangebot",
+ "contact_us": "Kontaktieren Sie uns"
+}
+```
+
+To upload your translations click on the “Upload files” button located at the top of the Translation Group details page.
+
+
+
+Select the translation files and click “Open” button.
+
+
+
+With each uploaded translation file, you must indicate the language it references. Additionally, you can verify the correctness of the uploaded file by previewing its contents.
+
+
+
+Click on “Upload files” button. Congratulations you just uploaded the translation files and created the translation group! 🎉
+
+### Localized Message Content
+
+To localize your message content, you need to use the translation variables in the editor. The variables allow you to reference the values from the translation files. It consists of the `i18n` [handlebar](https://docs.novu.co/content-creation-design/handlebars-helpers) helper and path to the translated value.
+
+Let’s take a look at the example: `{{i18n "marketing.welcome_message"}}`.
+
+- `i18n` is the handlebar helper that tells Novu that you would like to use the Translations
+- `"marketing.welcome_message"` is the path that is composed of the Translation Group identifier `marketing` and translation JSON file key `welcome_message`
+
+
+
+
-
-
-## Troubleshooting
-
-Here's how to solve some common problems when working with the CLI.
-
-
-
-## Image
-
-### Using Markdown
-
-The [markdown syntax](https://www.markdownguide.org/basic-syntax/#images) lets you add images using the following code
-
-```md
-
-```
-
-Note that the image file size must be less than 5MB. Otherwise, we recommend hosting on a service like [Cloudinary](https://cloudinary.com/) or [S3](https://aws.amazon.com/s3/). You can then use that URL and embed.
-
-### Using Embeds
-
-To get more customizability with images, you can also use [embeds](/writing-content/embed) to add images
-
-```html
-
-```
-
-## Embeds and HTML elements
-
-
-
-
+ 
+
+
+### Variable Options
+- **Subscriber Attributes**: Access all [subscriber attributes](/concepts/subscribers#subscriber-attributes). Example: `{{subscriber.firstName}}`
+- **Payload Variables**: Use all payload variables defined in the `payloadSchema`. Example: `{{payload.userId}}`
+- **Liquid Filters**: Apply [liquid filters](https://liquidjs.com/filters/overview.html) to format or manipulate variable values. Examples: `{{subscriber.firstName | append: ': ' | append: payload.status | capitalize}}` or
+`{{payload.invoiceDate | date: '%a, %b %d, %y'}}` will format the date as `Thu, Jan 01, 24`
+
+
+
diff --git a/framework/custom.mdx b/framework/custom.mdx
new file mode 100644
index 00000000..13a846fd
--- /dev/null
+++ b/framework/custom.mdx
@@ -0,0 +1,94 @@
+---
+title: "Custom Action"
+sidebarTitle: "Custom Action"
+description: "Used to execute any custom code as a step in the workflow."
+---
+
+A custom steps allows to execute any custom logic and persist in the durable execution context. The result of this step can be used in subsequent steps.
+
+## Common usecases
+
+- Making an API call to 3rd party service
+- Fetch data from a database to be used in subsequent steps
+- Execute a custom logic to transform data
+- Custom provider implementation
+
+## Custom Step Interface
+
+```tsx
+const stepResult = await step.custom(
+ "custom-step",
+ async () => {
+ return {
+ item_name: "A product name",
+ item_price: 100,
+ };
+ },
+ {
+ outputSchema: {
+ type: "object",
+ properties: {
+ item_name: { type: "string" },
+ item_price: { type: "number" },
+ },
+ required: ["item_name", "item_price"],
+ },
+ }
+);
+```
+
+### Output Schema Definition
+
+This JSON Schema definition is used to validate the output of the custom step. If the output does not match the schema, the workflow will fail.
+Novu Framework will infer the Typescript interface from the JSON Schema definition.
+
+### Return Value
+
+The Custom Step function should return a valid serializable object. The return value will be persisted in the durable execution context.
+
+## Using the Custom Step Result
+
+The result can only be used in the `resolver` of the step/providers/skip functions of subsequent steps.
+
+```typescript
+workflow("hello-world-workflow", async ({ payload }) => {
+ const task = await step.custom(
+ "fetch-db-data",
+ async () => {
+ const taskData = db.fetchTask(payload.task_id);
+ return {
+ task_id: taskData.id,
+ task_title: taskData.title,
+ complete: taskData.complete,
+ };
+ },
+ {
+ outputSchema: {
+ type: "object",
+ properties: {
+ task_title: { type: "string" },
+ task_id: { type: "string" },
+ complete: { type: "boolean" },
+ },
+ required: ["task_id", "complete"],
+ },
+ }
+ );
+
+ await step.email(
+ "send-email",
+ () => {
+ return {
+ subject: `Task reminder for ${task.task_title}`,
+ body: "Task is not yet complete. Please complete the task.",
+ };
+ },
+ {
+ // Only send the reminder E-mail if the task is not complete
+ skip: () => !task.complete,
+ }
+ );
+});
+```
+
+To read more about the full list of parameters, check out the [full SDK reference](/framework/typescript/steps/custom).
\ No newline at end of file
diff --git a/framework/delay.mdx b/framework/delay.mdx
new file mode 100644
index 00000000..ad88134b
--- /dev/null
+++ b/framework/delay.mdx
@@ -0,0 +1,78 @@
+---
+title: "Framework Delay Implementation"
+sidebarTitle: "Delay Action"
+description: "Implementation guide for delay steps in Novu Framework with code examples and best practices."
+---
+
+The delay action awaits a specified amount of time before moving on to trigger the following steps of the workflow.
+
+Learn more about the [Delay](/workflow/delay).
+
+## Common usecases
+
+- Waiting for X amount of time before sending the message
+- Wait for a short period of time before sending a push message in case the user seen the notification in the Inbox Component
+- Allow the user some time to cancel an action that generated a notification
+
+## Adding a delay step
+Delay steps can be inserted at any stage of your workflow execution, they can happen after or before any action. The workflow execution will be halted for the given amount of time and then resumed to the next step in the flow.
+
+The action can also be skipped using the skip parameter conditionally to allow more complex usecases of when to wait and when to send an email immediately.
+
+
+
+
+ In the editor, you can customize your workflow with various steps, including **Action steps** (e.g., [Digest](/workflow/digest) and [Delay](/workflow/delay)) and **[delivery channels](/workflow/channel-steps)**. Select a delivery channel to begin crafting your workflow.
+
+ Workflows can include multiple steps, with each step sending a notification to the user. Steps execute in the order they are added.
+
+ 
+
+
+ Each channel has its own template editor, allowing you to customize the notification content for each channel based on the channel's capabilities.
+
+ In this example, we're using the **In-App** channel step, so we're using the **In-App** template editor.
+
+
+
+
+
+
+ 
+
+
+
+
+ Based on the workflow we created, the sample payload will look like this:
+
+ ```json
+ {
+ "task_id": {
+ "title": "{{payload.task_id.title}}",
+ "dueDate": "{{payload.task_id.dueDate}}",
+ "url": "{{payload.task_id.url}}"
+ }
+ }
+ ```
+
+ 
+
+
+ Now we're ready to trigger our workflow via the Novu API.
+
+ [Learn more about how to build workflows](/workflow/how-to/build-a-workflow)
+
+
+
+ You should see a success message and the workflow will be synced to production.
+
+ 
+
+ 
+
+
+ Once you have switched to the Production environment, you should see the workflows you have synced to production.
+
+ 
+
+ 
+
diff --git a/help/user-management.mdx b/help/user-management.mdx
new file mode 100644
index 00000000..101177c4
--- /dev/null
+++ b/help/user-management.mdx
@@ -0,0 +1,45 @@
+---
+title: "User Management"
+sidebarTitle: "User Management"
+icon: "users"
+---
+
+## Subscribers
+
+### What is a Subscriber?
+
+A subscriber is an entity to which notifications are sent. It is a Novu term similar to a user in your system. As in your system, a user is identified by a unique id, similarly in Novu, a subscriber is identified by a unique id called `subscriberId`. We recommend that the existing value you use in your system as a `userId` to be used as `subscriberId` in Novu. Read more about subscribers on [subscribers documentation page](/concepts/subscribers).
+
+### Is it necessary to use subscriberId as same as userId?
+
+No, it is not necessary to use subscriberId as same as userId. You can use any unique id as subscriberId. We recommend using userId as subscriberId to avoid any confusion. Some of our customers use a pattern like `auth0|userId` as a value for `subscriberId`.
+
+### Can notification be sent without adding a Subscriber?
+
+No, a notification cannot be sent without adding a subscriber. A subscriber is an entity to which notifications are sent. You need to add a subscriber to Novu before triggering the workflow or inline of trigger. Read more about subscribers on [subscribers documentation page](/concepts/subscribers).
+
+### What is the right approach to add Subscribers?
+
+Subscribers can be added either [ahead of trigger](/concepts/subscribers#1-ahead-of-trigger) or [inline of trigger](/concepts/subscribers#2-inline-of-trigger). One way to add a subscriber using inline of trigger is to create a new subscriber in Novu as soon as they sign up or register in your system.
+
+You can add your existing users as subscribers in Novu using [bulk create subscriber creation method](/concepts/subscribers#bulk-subscriber-creation).
+
+### Can Subscriber credentials be added while creating a new Subscriber?
+
+Subscriber credentials for Push and Chat channel providers cannot be added while creating a new subscriber. Subscriber credentials for Push and Chat channel providers can be added using the [update subscriber credentials api](/api-reference/subscribers/update-subscriber-credentials) or corresponding sdk methods.
+
+SMS and Email channels are a bit different because all providers can work with the same value, so `email` and `phone` [attributes](/concepts/subscribers#subscriber-attributes) can be added while creating a new Subscriber.
+
+### Can Subscriber preferences be updated while adding a new Subscriber?
+
+Subscriber preference cannot be updated while adding a new subscriber. Novu sets all channels as true by default for new subscribers. You can modify preferences at any time. Read more about [subscriber preferences](/concepts/preferences#subscriber-global-preferences).
+
+### Can two subscribers with different `subscriberId`s have the same email address?
+
+Yes, it is possible for two subscribers to have the same email address in our system. This is because the `subscriberId` is the unique identifier that distinguishes one subscriber from another. Even if two subscribers share the same email address, they will have different `subscriberId`s, which allows our system to identify and manage them separately.
+
+## Topics
+
+### Can a Subscriber be added to multiple topics at once?
+
+Currently, Novu supports adding a subscriber to only one topic at a time. You can add a subscriber to multiple topics by calling the [add subscriber to topic api](/api-reference/topics/subscribers-addition) multiple times with a particular topic key
diff --git a/hubspot.js b/hubspot.js
new file mode 100644
index 00000000..9f64dd07
--- /dev/null
+++ b/hubspot.js
@@ -0,0 +1,5 @@
+!function(e,t){if(!document.getElementById(e)){var c=document.createElement("script");c.src="https://js.hs-analytics.net/analytics/1705938600000/44416662.js",c.type="text/javascript",c.id=e;var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(c,n)}}("hs-analytics");
+!function(t,e,r){if(!document.getElementById(t)){var n=document.createElement("script");for(var a in n.src="https://js.hscollectedforms.net/collectedforms.js",n.type="text/javascript",n.id=t,r)r.hasOwnProperty(a)&&n.setAttribute(a,r[a]);var i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(n,i)}}("CollectedForms-44416662",0,{"crossorigin":"anonymous","data-leadin-portal-id":44416662,"data-leadin-env":"prod","data-loader":"hs-scriptloader","data-hsjs-portal":44416662,"data-hsjs-env":"prod","data-hsjs-hublet":"na1"});
+var _hsp = window._hsp = window._hsp || [];
+ _hsp.push(['addEnabledFeatureGates', []]);
+!function(t,e,r){if(!document.getElementById(t)){var n=document.createElement("script");for(var a in n.src="https://js.hs-banner.com/v2/44416662/banner.js",n.type="text/javascript",n.id=t,r)r.hasOwnProperty(a)&&n.setAttribute(a,r[a]);var i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(n,i)}}("cookieBanner-44416662",0,{"data-cookieconsent":"ignore","data-hs-ignore":true,"data-loader":"hs-scriptloader","data-hsjs-portal":44416662,"data-hsjs-env":"prod","data-hsjs-hublet":"na1"});
\ No newline at end of file
diff --git a/images/Add-filter.png b/images/Add-filter.png
new file mode 100644
index 00000000..1f17bdfd
Binary files /dev/null and b/images/Add-filter.png differ
diff --git a/images/Create-new-orgnization.png b/images/Create-new-orgnization.png
new file mode 100644
index 00000000..2d52323a
Binary files /dev/null and b/images/Create-new-orgnization.png differ
diff --git a/images/Dashboead-sidebar.png b/images/Dashboead-sidebar.png
new file mode 100644
index 00000000..2d67d0d6
Binary files /dev/null and b/images/Dashboead-sidebar.png differ
diff --git a/images/Deley-action-properties.png b/images/Deley-action-properties.png
new file mode 100644
index 00000000..214de2fd
Binary files /dev/null and b/images/Deley-action-properties.png differ
diff --git a/images/Novu-mental-model.png b/images/Novu-mental-model.png
new file mode 100644
index 00000000..d2debaac
Binary files /dev/null and b/images/Novu-mental-model.png differ
diff --git a/images/Novu_Architecture_v2.png b/images/Novu_Architecture_v2.png
new file mode 100644
index 00000000..87bf06c9
Binary files /dev/null and b/images/Novu_Architecture_v2.png differ
diff --git a/images/Or-And-filters.png b/images/Or-And-filters.png
new file mode 100644
index 00000000..cc848aa0
Binary files /dev/null and b/images/Or-And-filters.png differ
diff --git a/images/SCR-20230825-pigg.png b/images/SCR-20230825-pigg.png
new file mode 100644
index 00000000..390111ac
Binary files /dev/null and b/images/SCR-20230825-pigg.png differ
diff --git a/images/SCR-20230825-pkxt.png b/images/SCR-20230825-pkxt.png
new file mode 100644
index 00000000..baca26df
Binary files /dev/null and b/images/SCR-20230825-pkxt.png differ
diff --git a/images/SCR-20230825-pmtt.png b/images/SCR-20230825-pmtt.png
new file mode 100644
index 00000000..995b1378
Binary files /dev/null and b/images/SCR-20230825-pmtt.png differ
diff --git a/images/Template Store.gif b/images/Template Store.gif
new file mode 100644
index 00000000..69c32ce3
Binary files /dev/null and b/images/Template Store.gif differ
diff --git a/images/abandoned-cart-recovery-workflow.png b/images/abandoned-cart-recovery-workflow.png
new file mode 100644
index 00000000..c1fd16aa
Binary files /dev/null and b/images/abandoned-cart-recovery-workflow.png differ
diff --git a/images/account/billing/manage-invoices.gif b/images/account/billing/manage-invoices.gif
new file mode 100644
index 00000000..9da4c27f
Binary files /dev/null and b/images/account/billing/manage-invoices.gif differ
diff --git a/images/account/billing/purchase-business-tier.gif b/images/account/billing/purchase-business-tier.gif
new file mode 100644
index 00000000..9e33d973
Binary files /dev/null and b/images/account/billing/purchase-business-tier.gif differ
diff --git a/images/activity-feed-usecase.png b/images/activity-feed-usecase.png
new file mode 100644
index 00000000..ad43f980
Binary files /dev/null and b/images/activity-feed-usecase.png differ
diff --git a/images/activity-feed.png b/images/activity-feed.png
new file mode 100644
index 00000000..1d5cdfcc
Binary files /dev/null and b/images/activity-feed.png differ
diff --git a/images/activity-feed/job-statuses.png b/images/activity-feed/job-statuses.png
new file mode 100644
index 00000000..500de746
Binary files /dev/null and b/images/activity-feed/job-statuses.png differ
diff --git a/images/add-fields-kotlin.png b/images/add-fields-kotlin.png
new file mode 100644
index 00000000..25887516
Binary files /dev/null and b/images/add-fields-kotlin.png differ
diff --git a/images/add-new-provider.png b/images/add-new-provider.png
new file mode 100644
index 00000000..bff4b733
Binary files /dev/null and b/images/add-new-provider.png differ
diff --git a/images/add-variables-kotlin.png b/images/add-variables-kotlin.png
new file mode 100644
index 00000000..ba19dc3f
Binary files /dev/null and b/images/add-variables-kotlin.png differ
diff --git a/images/add-variant.png b/images/add-variant.png
new file mode 100644
index 00000000..c6f1bea9
Binary files /dev/null and b/images/add-variant.png differ
diff --git a/images/adding-digest.png b/images/adding-digest.png
new file mode 100644
index 00000000..90ea2d81
Binary files /dev/null and b/images/adding-digest.png differ
diff --git a/images/angular.png b/images/angular.png
new file mode 100644
index 00000000..cc22876d
Binary files /dev/null and b/images/angular.png differ
diff --git a/images/api-nextjs.png b/images/api-nextjs.png
new file mode 100644
index 00000000..d418ac1d
Binary files /dev/null and b/images/api-nextjs.png differ
diff --git a/images/assign-layout.png b/images/assign-layout.png
new file mode 100644
index 00000000..65b329e8
Binary files /dev/null and b/images/assign-layout.png differ
diff --git a/images/auto-sub-react.png b/images/auto-sub-react.png
new file mode 100644
index 00000000..2b9efa0d
Binary files /dev/null and b/images/auto-sub-react.png differ
diff --git a/images/bell-angular.png b/images/bell-angular.png
new file mode 100644
index 00000000..1bf2f809
Binary files /dev/null and b/images/bell-angular.png differ
diff --git a/images/bell-ui-angular.png b/images/bell-ui-angular.png
new file mode 100644
index 00000000..b57362fe
Binary files /dev/null and b/images/bell-ui-angular.png differ
diff --git a/images/blank-workflow.png b/images/blank-workflow.png
new file mode 100644
index 00000000..82c60837
Binary files /dev/null and b/images/blank-workflow.png differ
diff --git a/images/branding-section.png b/images/branding-section.png
new file mode 100644
index 00000000..6d39c33f
Binary files /dev/null and b/images/branding-section.png differ
diff --git a/images/change-update-notification-group.gif b/images/change-update-notification-group.gif
new file mode 100644
index 00000000..14559efd
Binary files /dev/null and b/images/change-update-notification-group.gif differ
diff --git a/images/channels-and-providers/chat/msteams/create-incoming-webhook.gif b/images/channels-and-providers/chat/msteams/create-incoming-webhook.gif
new file mode 100644
index 00000000..0b1f7efb
Binary files /dev/null and b/images/channels-and-providers/chat/msteams/create-incoming-webhook.gif differ
diff --git a/images/channels-and-providers/chat/zulip/step_01.png b/images/channels-and-providers/chat/zulip/step_01.png
new file mode 100644
index 00000000..e6c32023
Binary files /dev/null and b/images/channels-and-providers/chat/zulip/step_01.png differ
diff --git a/images/channels-and-providers/chat/zulip/step_02.png b/images/channels-and-providers/chat/zulip/step_02.png
new file mode 100644
index 00000000..4877d8f1
Binary files /dev/null and b/images/channels-and-providers/chat/zulip/step_02.png differ
diff --git a/images/channels-and-providers/chat/zulip/step_03.png b/images/channels-and-providers/chat/zulip/step_03.png
new file mode 100644
index 00000000..7fa22ef3
Binary files /dev/null and b/images/channels-and-providers/chat/zulip/step_03.png differ
diff --git a/images/channels-and-providers/chat/zulip/step_04.png b/images/channels-and-providers/chat/zulip/step_04.png
new file mode 100644
index 00000000..09d9eb2a
Binary files /dev/null and b/images/channels-and-providers/chat/zulip/step_04.png differ
diff --git a/images/channels-and-providers/email/writing-email-template/email-blocks.gif b/images/channels-and-providers/email/writing-email-template/email-blocks.gif
new file mode 100644
index 00000000..0414e6e3
Binary files /dev/null and b/images/channels-and-providers/email/writing-email-template/email-blocks.gif differ
diff --git a/images/channels-and-providers/email/writing-email-template/email-editor.png b/images/channels-and-providers/email/writing-email-template/email-editor.png
new file mode 100644
index 00000000..ca5240d1
Binary files /dev/null and b/images/channels-and-providers/email/writing-email-template/email-editor.png differ
diff --git a/images/channels-and-providers/email/writing-email-template/show-block.gif b/images/channels-and-providers/email/writing-email-template/show-block.gif
new file mode 100644
index 00000000..8a9d775c
Binary files /dev/null and b/images/channels-and-providers/email/writing-email-template/show-block.gif differ
diff --git a/images/channels-and-providers/notifications-to-channel.png b/images/channels-and-providers/notifications-to-channel.png
new file mode 100644
index 00000000..80d23813
Binary files /dev/null and b/images/channels-and-providers/notifications-to-channel.png differ
diff --git a/images/channels-and-providers/permission-to-access.png b/images/channels-and-providers/permission-to-access.png
new file mode 100644
index 00000000..33e730a6
Binary files /dev/null and b/images/channels-and-providers/permission-to-access.png differ
diff --git a/images/channels-and-providers/push/onesignal/select-external-id-option.gif b/images/channels-and-providers/push/onesignal/select-external-id-option.gif
new file mode 100644
index 00000000..93b5e2f4
Binary files /dev/null and b/images/channels-and-providers/push/onesignal/select-external-id-option.gif differ
diff --git a/images/channels-and-providers/redirect-url.png b/images/channels-and-providers/redirect-url.png
new file mode 100644
index 00000000..9c2fea98
Binary files /dev/null and b/images/channels-and-providers/redirect-url.png differ
diff --git a/images/channels-and-providers/shreable-url.png b/images/channels-and-providers/shreable-url.png
new file mode 100644
index 00000000..23149070
Binary files /dev/null and b/images/channels-and-providers/shreable-url.png differ
diff --git a/images/channels-and-providers/sms/africas-talking/api-key-africa.png b/images/channels-and-providers/sms/africas-talking/api-key-africa.png
new file mode 100644
index 00000000..61ec5349
Binary files /dev/null and b/images/channels-and-providers/sms/africas-talking/api-key-africa.png differ
diff --git a/images/channels-and-providers/sms/africas-talking/image-57.png b/images/channels-and-providers/sms/africas-talking/image-57.png
new file mode 100644
index 00000000..3d98f88b
Binary files /dev/null and b/images/channels-and-providers/sms/africas-talking/image-57.png differ
diff --git a/images/channels-and-providers/sms/africas-talking/image-58.png b/images/channels-and-providers/sms/africas-talking/image-58.png
new file mode 100644
index 00000000..6abd75a6
Binary files /dev/null and b/images/channels-and-providers/sms/africas-talking/image-58.png differ
diff --git a/images/channels-and-providers/sms/africas-talking/image-59.png b/images/channels-and-providers/sms/africas-talking/image-59.png
new file mode 100644
index 00000000..b51f4d16
Binary files /dev/null and b/images/channels-and-providers/sms/africas-talking/image-59.png differ
diff --git a/images/channels-and-providers/sms/africas-talking/image-60.png b/images/channels-and-providers/sms/africas-talking/image-60.png
new file mode 100644
index 00000000..dfa27100
Binary files /dev/null and b/images/channels-and-providers/sms/africas-talking/image-60.png differ
diff --git a/images/channels-and-providers/sms/africas-talking/image-61.png b/images/channels-and-providers/sms/africas-talking/image-61.png
new file mode 100644
index 00000000..585f053a
Binary files /dev/null and b/images/channels-and-providers/sms/africas-talking/image-61.png differ
diff --git a/images/channels-and-providers/sms/africas-talking/new app-africa-talking.png b/images/channels-and-providers/sms/africas-talking/new app-africa-talking.png
new file mode 100644
index 00000000..1f74b9df
Binary files /dev/null and b/images/channels-and-providers/sms/africas-talking/new app-africa-talking.png differ
diff --git a/images/channels-and-providers/sms/africas-talking/new-created-app-africa.png b/images/channels-and-providers/sms/africas-talking/new-created-app-africa.png
new file mode 100644
index 00000000..426eaea5
Binary files /dev/null and b/images/channels-and-providers/sms/africas-talking/new-created-app-africa.png differ
diff --git a/images/channels-and-providers/sms/africas-talking/new-team.png b/images/channels-and-providers/sms/africas-talking/new-team.png
new file mode 100644
index 00000000..bfe8fbe9
Binary files /dev/null and b/images/channels-and-providers/sms/africas-talking/new-team.png differ
diff --git a/images/channels-and-providers/sms/africas-talking/team-africa.png b/images/channels-and-providers/sms/africas-talking/team-africa.png
new file mode 100644
index 00000000..f8666657
Binary files /dev/null and b/images/channels-and-providers/sms/africas-talking/team-africa.png differ
diff --git a/images/channels-and-providers/sms/clickatell/step_01.png b/images/channels-and-providers/sms/clickatell/step_01.png
new file mode 100644
index 00000000..118a9680
Binary files /dev/null and b/images/channels-and-providers/sms/clickatell/step_01.png differ
diff --git a/images/channels-and-providers/sms/clickatell/step_02.png b/images/channels-and-providers/sms/clickatell/step_02.png
new file mode 100644
index 00000000..2dd08c99
Binary files /dev/null and b/images/channels-and-providers/sms/clickatell/step_02.png differ
diff --git a/images/channels-and-providers/sms/clickatell/step_03.png b/images/channels-and-providers/sms/clickatell/step_03.png
new file mode 100644
index 00000000..c7f684da
Binary files /dev/null and b/images/channels-and-providers/sms/clickatell/step_03.png differ
diff --git a/images/channels-and-providers/sms/clickatell/step_04.png b/images/channels-and-providers/sms/clickatell/step_04.png
new file mode 100644
index 00000000..eb2b044c
Binary files /dev/null and b/images/channels-and-providers/sms/clickatell/step_04.png differ
diff --git a/images/channels-and-providers/sms/clickatell/step_05.png b/images/channels-and-providers/sms/clickatell/step_05.png
new file mode 100644
index 00000000..8f99e64e
Binary files /dev/null and b/images/channels-and-providers/sms/clickatell/step_05.png differ
diff --git a/images/channels-and-providers/sms/clickatell/step_06.png b/images/channels-and-providers/sms/clickatell/step_06.png
new file mode 100644
index 00000000..388db83e
Binary files /dev/null and b/images/channels-and-providers/sms/clickatell/step_06.png differ
diff --git a/images/channels-and-providers/sms/firetext/step_01.png b/images/channels-and-providers/sms/firetext/step_01.png
new file mode 100644
index 00000000..bb680614
Binary files /dev/null and b/images/channels-and-providers/sms/firetext/step_01.png differ
diff --git a/images/channels-and-providers/sms/firetext/step_02.png b/images/channels-and-providers/sms/firetext/step_02.png
new file mode 100644
index 00000000..2edb1406
Binary files /dev/null and b/images/channels-and-providers/sms/firetext/step_02.png differ
diff --git a/images/channels-and-providers/sms/firetext/step_03.png b/images/channels-and-providers/sms/firetext/step_03.png
new file mode 100644
index 00000000..6684c6c4
Binary files /dev/null and b/images/channels-and-providers/sms/firetext/step_03.png differ
diff --git a/images/channels-and-providers/sms/infobip/image-63.png b/images/channels-and-providers/sms/infobip/image-63.png
new file mode 100644
index 00000000..3c3dbbcf
Binary files /dev/null and b/images/channels-and-providers/sms/infobip/image-63.png differ
diff --git a/images/channels-and-providers/sms/infobip/image-64.png b/images/channels-and-providers/sms/infobip/image-64.png
new file mode 100644
index 00000000..9819de8f
Binary files /dev/null and b/images/channels-and-providers/sms/infobip/image-64.png differ
diff --git a/images/channels-and-providers/sms/infobip/image-65.png b/images/channels-and-providers/sms/infobip/image-65.png
new file mode 100644
index 00000000..3da2c516
Binary files /dev/null and b/images/channels-and-providers/sms/infobip/image-65.png differ
diff --git a/images/channels-and-providers/sms/infobip/image-66.png b/images/channels-and-providers/sms/infobip/image-66.png
new file mode 100644
index 00000000..97555e34
Binary files /dev/null and b/images/channels-and-providers/sms/infobip/image-66.png differ
diff --git a/images/channels-and-providers/sms/sendchamp/image-67.png b/images/channels-and-providers/sms/sendchamp/image-67.png
new file mode 100644
index 00000000..d6e2e26b
Binary files /dev/null and b/images/channels-and-providers/sms/sendchamp/image-67.png differ
diff --git a/images/channels-and-providers/sms/sendchamp/image-68.png b/images/channels-and-providers/sms/sendchamp/image-68.png
new file mode 100644
index 00000000..c5d48482
Binary files /dev/null and b/images/channels-and-providers/sms/sendchamp/image-68.png differ
diff --git a/images/channels-and-providers/sms/sendchamp/image-69.png b/images/channels-and-providers/sms/sendchamp/image-69.png
new file mode 100644
index 00000000..fa608f85
Binary files /dev/null and b/images/channels-and-providers/sms/sendchamp/image-69.png differ
diff --git a/images/channels-and-providers/sms/sendchamp/image-70.png b/images/channels-and-providers/sms/sendchamp/image-70.png
new file mode 100644
index 00000000..7527d3f5
Binary files /dev/null and b/images/channels-and-providers/sms/sendchamp/image-70.png differ
diff --git a/images/channels-and-providers/sms/sendchamp/image-71.png b/images/channels-and-providers/sms/sendchamp/image-71.png
new file mode 100644
index 00000000..8afd3518
Binary files /dev/null and b/images/channels-and-providers/sms/sendchamp/image-71.png differ
diff --git a/images/channels-and-providers/sms/termii/image-72.png b/images/channels-and-providers/sms/termii/image-72.png
new file mode 100644
index 00000000..7dffc897
Binary files /dev/null and b/images/channels-and-providers/sms/termii/image-72.png differ
diff --git a/images/channels-and-providers/sms/termii/image-73.png b/images/channels-and-providers/sms/termii/image-73.png
new file mode 100644
index 00000000..49dcdf21
Binary files /dev/null and b/images/channels-and-providers/sms/termii/image-73.png differ
diff --git a/images/channels-and-providers/sms/termii/image-74.png b/images/channels-and-providers/sms/termii/image-74.png
new file mode 100644
index 00000000..b422d650
Binary files /dev/null and b/images/channels-and-providers/sms/termii/image-74.png differ
diff --git a/images/channels-and-providers/sms/termii/image-75.png b/images/channels-and-providers/sms/termii/image-75.png
new file mode 100644
index 00000000..dd76cd07
Binary files /dev/null and b/images/channels-and-providers/sms/termii/image-75.png differ
diff --git a/images/channels.gif b/images/channels.gif
new file mode 100644
index 00000000..24030b09
Binary files /dev/null and b/images/channels.gif differ
diff --git a/images/community/feature-flags/multi-provider-feature.png b/images/community/feature-flags/multi-provider-feature.png
new file mode 100644
index 00000000..1fb01a07
Binary files /dev/null and b/images/community/feature-flags/multi-provider-feature.png differ
diff --git a/images/community/feature-flags/template-store-feature.png b/images/community/feature-flags/template-store-feature.png
new file mode 100644
index 00000000..d1f81886
Binary files /dev/null and b/images/community/feature-flags/template-store-feature.png differ
diff --git a/images/community/feature-flags/tenants-feature.png b/images/community/feature-flags/tenants-feature.png
new file mode 100644
index 00000000..f402516c
Binary files /dev/null and b/images/community/feature-flags/tenants-feature.png differ
diff --git a/images/community/machine-setup/aws-cli.png b/images/community/machine-setup/aws-cli.png
new file mode 100644
index 00000000..cbe36ed6
Binary files /dev/null and b/images/community/machine-setup/aws-cli.png differ
diff --git a/images/community/machine-setup/dock.png b/images/community/machine-setup/dock.png
new file mode 100644
index 00000000..9548063b
Binary files /dev/null and b/images/community/machine-setup/dock.png differ
diff --git a/images/configure-in-app-react.png b/images/configure-in-app-react.png
new file mode 100644
index 00000000..17e362f3
Binary files /dev/null and b/images/configure-in-app-react.png differ
diff --git a/images/content-creation-design/chat-editor.png b/images/content-creation-design/chat-editor.png
new file mode 100644
index 00000000..a322cde4
Binary files /dev/null and b/images/content-creation-design/chat-editor.png differ
diff --git a/images/content-creation-design/push-editor.png b/images/content-creation-design/push-editor.png
new file mode 100644
index 00000000..6ca53f26
Binary files /dev/null and b/images/content-creation-design/push-editor.png differ
diff --git a/images/content-of-an-special-offer-email.png b/images/content-of-an-special-offer-email.png
new file mode 100644
index 00000000..df67deee
Binary files /dev/null and b/images/content-of-an-special-offer-email.png differ
diff --git a/images/controls-autocomplete.gif b/images/controls-autocomplete.gif
new file mode 100644
index 00000000..4f66feab
Binary files /dev/null and b/images/controls-autocomplete.gif differ
diff --git a/images/create&edit-layouts.png b/images/create&edit-layouts.png
new file mode 100644
index 00000000..320883c3
Binary files /dev/null and b/images/create&edit-layouts.png differ
diff --git a/images/create-workflow-nextjs.png b/images/create-workflow-nextjs.png
new file mode 100644
index 00000000..2038483c
Binary files /dev/null and b/images/create-workflow-nextjs.png differ
diff --git a/images/create-workflow.png b/images/create-workflow.png
new file mode 100644
index 00000000..2038483c
Binary files /dev/null and b/images/create-workflow.png differ
diff --git a/images/custom-code-input.png b/images/custom-code-input.png
new file mode 100644
index 00000000..0d65eac8
Binary files /dev/null and b/images/custom-code-input.png differ
diff --git a/images/custom-code-output.png b/images/custom-code-output.png
new file mode 100644
index 00000000..5af040eb
Binary files /dev/null and b/images/custom-code-output.png differ
diff --git a/images/custom-style.png b/images/custom-style.png
new file mode 100644
index 00000000..91c56e8c
Binary files /dev/null and b/images/custom-style.png differ
diff --git a/images/custom-var-react.png b/images/custom-var-react.png
new file mode 100644
index 00000000..8661a754
Binary files /dev/null and b/images/custom-var-react.png differ
diff --git a/images/custom-vars.png b/images/custom-vars.png
new file mode 100644
index 00000000..2c732d15
Binary files /dev/null and b/images/custom-vars.png differ
diff --git a/images/dark-is-defined-filter.png b/images/dark-is-defined-filter.png
new file mode 100644
index 00000000..b8c0d7f8
Binary files /dev/null and b/images/dark-is-defined-filter.png differ
diff --git a/images/dark-webhook-rule-example.png b/images/dark-webhook-rule-example.png
new file mode 100644
index 00000000..cb6e650b
Binary files /dev/null and b/images/dark-webhook-rule-example.png differ
diff --git a/images/default-providers/SCR-20230829-uosu.png b/images/default-providers/SCR-20230829-uosu.png
new file mode 100644
index 00000000..51ce3aac
Binary files /dev/null and b/images/default-providers/SCR-20230829-uosu.png differ
diff --git a/images/default-providers/SCR-20230829-uppz.png b/images/default-providers/SCR-20230829-uppz.png
new file mode 100644
index 00000000..6cdfead4
Binary files /dev/null and b/images/default-providers/SCR-20230829-uppz.png differ
diff --git a/images/default-providers/SCR-20230829-uqld.png b/images/default-providers/SCR-20230829-uqld.png
new file mode 100644
index 00000000..8e319f27
Binary files /dev/null and b/images/default-providers/SCR-20230829-uqld.png differ
diff --git a/images/default-sub-kotlin.png b/images/default-sub-kotlin.png
new file mode 100644
index 00000000..6a699b67
Binary files /dev/null and b/images/default-sub-kotlin.png differ
diff --git a/images/default-ui.png b/images/default-ui.png
new file mode 100644
index 00000000..aa240d8a
Binary files /dev/null and b/images/default-ui.png differ
diff --git a/images/digest-app.gif b/images/digest-app.gif
new file mode 100644
index 00000000..14d8d383
Binary files /dev/null and b/images/digest-app.gif differ
diff --git a/images/digest-email.png b/images/digest-email.png
new file mode 100644
index 00000000..511fac92
Binary files /dev/null and b/images/digest-email.png differ
diff --git a/images/digest-flow.png b/images/digest-flow.png
new file mode 100644
index 00000000..2945978d
Binary files /dev/null and b/images/digest-flow.png differ
diff --git a/images/digest-info.png b/images/digest-info.png
new file mode 100644
index 00000000..b7eff060
Binary files /dev/null and b/images/digest-info.png differ
diff --git a/images/digest-node.png b/images/digest-node.png
new file mode 100644
index 00000000..5d1eb02a
Binary files /dev/null and b/images/digest-node.png differ
diff --git a/images/digest-settings.png b/images/digest-settings.png
new file mode 100644
index 00000000..a2eeac71
Binary files /dev/null and b/images/digest-settings.png differ
diff --git a/images/digest.gif b/images/digest.gif
new file mode 100644
index 00000000..507a2c85
Binary files /dev/null and b/images/digest.gif differ
diff --git a/images/digest.png b/images/digest.png
new file mode 100644
index 00000000..a4a4d0f6
Binary files /dev/null and b/images/digest.png differ
diff --git a/images/discord-guide/active.png b/images/discord-guide/active.png
new file mode 100644
index 00000000..30d8de18
Binary files /dev/null and b/images/discord-guide/active.png differ
diff --git a/images/discord-guide/channel.png b/images/discord-guide/channel.png
new file mode 100644
index 00000000..7989d4a0
Binary files /dev/null and b/images/discord-guide/channel.png differ
diff --git a/images/discord-guide/chat.png b/images/discord-guide/chat.png
new file mode 100644
index 00000000..476a74f5
Binary files /dev/null and b/images/discord-guide/chat.png differ
diff --git a/images/discord-guide/edit.png b/images/discord-guide/edit.png
new file mode 100644
index 00000000..3df599d9
Binary files /dev/null and b/images/discord-guide/edit.png differ
diff --git a/images/discord-guide/integrations.png b/images/discord-guide/integrations.png
new file mode 100644
index 00000000..a1f943bf
Binary files /dev/null and b/images/discord-guide/integrations.png differ
diff --git a/images/discord-guide/outputt.gif b/images/discord-guide/outputt.gif
new file mode 100644
index 00000000..3b197df8
Binary files /dev/null and b/images/discord-guide/outputt.gif differ
diff --git a/images/discord-guide/snippet.png b/images/discord-guide/snippet.png
new file mode 100644
index 00000000..768e3777
Binary files /dev/null and b/images/discord-guide/snippet.png differ
diff --git a/images/discord-guide/webhook.png b/images/discord-guide/webhook.png
new file mode 100644
index 00000000..cfffd46d
Binary files /dev/null and b/images/discord-guide/webhook.png differ
diff --git a/images/edit-nextjs.png b/images/edit-nextjs.png
new file mode 100644
index 00000000..25887516
Binary files /dev/null and b/images/edit-nextjs.png differ
diff --git a/images/email-digest-engine-demo.png b/images/email-digest-engine-demo.png
new file mode 100644
index 00000000..d9783610
Binary files /dev/null and b/images/email-digest-engine-demo.png differ
diff --git a/images/email-digest.gif b/images/email-digest.gif
new file mode 100644
index 00000000..20612ab2
Binary files /dev/null and b/images/email-digest.gif differ
diff --git a/images/email-node.png b/images/email-node.png
new file mode 100644
index 00000000..4115076f
Binary files /dev/null and b/images/email-node.png differ
diff --git a/images/email-nodejs.png b/images/email-nodejs.png
new file mode 100644
index 00000000..6a3aa4f2
Binary files /dev/null and b/images/email-nodejs.png differ
diff --git a/images/email2-nodejs.png b/images/email2-nodejs.png
new file mode 100644
index 00000000..26e89e84
Binary files /dev/null and b/images/email2-nodejs.png differ
diff --git a/images/email3-nodejs.png b/images/email3-nodejs.png
new file mode 100644
index 00000000..0108941f
Binary files /dev/null and b/images/email3-nodejs.png differ
diff --git a/images/execution-details-for-digest.png b/images/execution-details-for-digest.png
new file mode 100644
index 00000000..6c6f4f25
Binary files /dev/null and b/images/execution-details-for-digest.png differ
diff --git a/images/execution-details-for-sms.png b/images/execution-details-for-sms.png
new file mode 100644
index 00000000..2c71d338
Binary files /dev/null and b/images/execution-details-for-sms.png differ
diff --git a/images/execution-details.png b/images/execution-details.png
new file mode 100644
index 00000000..15567dda
Binary files /dev/null and b/images/execution-details.png differ
diff --git a/images/execution-details2.png b/images/execution-details2.png
new file mode 100644
index 00000000..4ae1995e
Binary files /dev/null and b/images/execution-details2.png differ
diff --git a/images/fcm-novu-rna/android.png b/images/fcm-novu-rna/android.png
new file mode 100644
index 00000000..5e660487
Binary files /dev/null and b/images/fcm-novu-rna/android.png differ
diff --git a/images/fcm-novu-rna/cd.png b/images/fcm-novu-rna/cd.png
new file mode 100644
index 00000000..082aa7f8
Binary files /dev/null and b/images/fcm-novu-rna/cd.png differ
diff --git a/images/fcm-novu-rna/console.png b/images/fcm-novu-rna/console.png
new file mode 100644
index 00000000..b6d8619a
Binary files /dev/null and b/images/fcm-novu-rna/console.png differ
diff --git a/images/fcm-novu-rna/custom.png b/images/fcm-novu-rna/custom.png
new file mode 100644
index 00000000..d2299436
Binary files /dev/null and b/images/fcm-novu-rna/custom.png differ
diff --git a/images/fcm-novu-rna/dynamic.png b/images/fcm-novu-rna/dynamic.png
new file mode 100644
index 00000000..d8af0294
Binary files /dev/null and b/images/fcm-novu-rna/dynamic.png differ
diff --git a/images/fcm-novu-rna/fp.png b/images/fcm-novu-rna/fp.png
new file mode 100644
index 00000000..5ee4f2d2
Binary files /dev/null and b/images/fcm-novu-rna/fp.png differ
diff --git a/images/fcm-novu-rna/greet.png b/images/fcm-novu-rna/greet.png
new file mode 100644
index 00000000..ec066e21
Binary files /dev/null and b/images/fcm-novu-rna/greet.png differ
diff --git a/images/fcm-novu-rna/hardcoded.png b/images/fcm-novu-rna/hardcoded.png
new file mode 100644
index 00000000..11af7e7d
Binary files /dev/null and b/images/fcm-novu-rna/hardcoded.png differ
diff --git a/images/fcm-novu-rna/image.png b/images/fcm-novu-rna/image.png
new file mode 100644
index 00000000..c277a216
Binary files /dev/null and b/images/fcm-novu-rna/image.png differ
diff --git a/images/fcm-novu-rna/json.png b/images/fcm-novu-rna/json.png
new file mode 100644
index 00000000..f049a8f0
Binary files /dev/null and b/images/fcm-novu-rna/json.png differ
diff --git a/images/fcm-novu-rna/key.png b/images/fcm-novu-rna/key.png
new file mode 100644
index 00000000..bd64d94c
Binary files /dev/null and b/images/fcm-novu-rna/key.png differ
diff --git a/images/fcm-novu-rna/keys.png b/images/fcm-novu-rna/keys.png
new file mode 100644
index 00000000..b4a892bf
Binary files /dev/null and b/images/fcm-novu-rna/keys.png differ
diff --git a/images/fcm-novu-rna/location.png b/images/fcm-novu-rna/location.png
new file mode 100644
index 00000000..77301ad6
Binary files /dev/null and b/images/fcm-novu-rna/location.png differ
diff --git a/images/fcm-novu-rna/package.png b/images/fcm-novu-rna/package.png
new file mode 100644
index 00000000..0b225f9b
Binary files /dev/null and b/images/fcm-novu-rna/package.png differ
diff --git a/images/fcm-novu-rna/priority.png b/images/fcm-novu-rna/priority.png
new file mode 100644
index 00000000..9d257195
Binary files /dev/null and b/images/fcm-novu-rna/priority.png differ
diff --git a/images/fcm-novu-rna/qr.png b/images/fcm-novu-rna/qr.png
new file mode 100644
index 00000000..3da0ea2e
Binary files /dev/null and b/images/fcm-novu-rna/qr.png differ
diff --git a/images/fcm-novu-rna/serv.png b/images/fcm-novu-rna/serv.png
new file mode 100644
index 00000000..9a67d0f4
Binary files /dev/null and b/images/fcm-novu-rna/serv.png differ
diff --git a/images/fcm-novu-rna/server.png b/images/fcm-novu-rna/server.png
new file mode 100644
index 00000000..80bed324
Binary files /dev/null and b/images/fcm-novu-rna/server.png differ
diff --git a/images/fcm-novu-rna/settings.png b/images/fcm-novu-rna/settings.png
new file mode 100644
index 00000000..0f858608
Binary files /dev/null and b/images/fcm-novu-rna/settings.png differ
diff --git a/images/fcm-novu-rna/snippet.png b/images/fcm-novu-rna/snippet.png
new file mode 100644
index 00000000..66cf00eb
Binary files /dev/null and b/images/fcm-novu-rna/snippet.png differ
diff --git a/images/fcm-novu-rna/title.png b/images/fcm-novu-rna/title.png
new file mode 100644
index 00000000..816b902c
Binary files /dev/null and b/images/fcm-novu-rna/title.png differ
diff --git a/images/fcm-web-push/add.png b/images/fcm-web-push/add.png
new file mode 100644
index 00000000..c8acf9a6
Binary files /dev/null and b/images/fcm-web-push/add.png differ
diff --git a/images/fcm-web-push/blank.png b/images/fcm-web-push/blank.png
new file mode 100644
index 00000000..f79b04e5
Binary files /dev/null and b/images/fcm-web-push/blank.png differ
diff --git a/images/fcm-web-push/drag.png b/images/fcm-web-push/drag.png
new file mode 100644
index 00000000..563e957d
Binary files /dev/null and b/images/fcm-web-push/drag.png differ
diff --git a/images/fcm-web-push/error.png b/images/fcm-web-push/error.png
new file mode 100644
index 00000000..0f3fd857
Binary files /dev/null and b/images/fcm-web-push/error.png differ
diff --git a/images/fcm-web-push/identifiers.png b/images/fcm-web-push/identifiers.png
new file mode 100644
index 00000000..411637f7
Binary files /dev/null and b/images/fcm-web-push/identifiers.png differ
diff --git a/images/fcm-web-push/novu-dashboard.png b/images/fcm-web-push/novu-dashboard.png
new file mode 100644
index 00000000..f4062e66
Binary files /dev/null and b/images/fcm-web-push/novu-dashboard.png differ
diff --git a/images/fcm-web-push/project.png b/images/fcm-web-push/project.png
new file mode 100644
index 00000000..89c66287
Binary files /dev/null and b/images/fcm-web-push/project.png differ
diff --git a/images/fcm-web-push/register.png b/images/fcm-web-push/register.png
new file mode 100644
index 00000000..b4fa8f99
Binary files /dev/null and b/images/fcm-web-push/register.png differ
diff --git a/images/fcm-web-push/trigger.png b/images/fcm-web-push/trigger.png
new file mode 100644
index 00000000..292e3549
Binary files /dev/null and b/images/fcm-web-push/trigger.png differ
diff --git a/images/fcm-web-push/vapid.png b/images/fcm-web-push/vapid.png
new file mode 100644
index 00000000..f01e5e21
Binary files /dev/null and b/images/fcm-web-push/vapid.png differ
diff --git a/images/fcm-web-push/web.png b/images/fcm-web-push/web.png
new file mode 100644
index 00000000..a00f3ce9
Binary files /dev/null and b/images/fcm-web-push/web.png differ
diff --git a/images/fcm-web-push/workflows.png b/images/fcm-web-push/workflows.png
new file mode 100644
index 00000000..1533253f
Binary files /dev/null and b/images/fcm-web-push/workflows.png differ
diff --git a/images/filtering-by-channel.png b/images/filtering-by-channel.png
new file mode 100644
index 00000000..c85de1c0
Binary files /dev/null and b/images/filtering-by-channel.png differ
diff --git a/images/filtering-by-workflow.png b/images/filtering-by-workflow.png
new file mode 100644
index 00000000..d68313ac
Binary files /dev/null and b/images/filtering-by-workflow.png differ
diff --git a/images/framework-mjml/1.png b/images/framework-mjml/1.png
new file mode 100644
index 00000000..b993d6b1
Binary files /dev/null and b/images/framework-mjml/1.png differ
diff --git a/images/framework-mjml/2.png b/images/framework-mjml/2.png
new file mode 100644
index 00000000..1f431ee9
Binary files /dev/null and b/images/framework-mjml/2.png differ
diff --git a/images/framework-mjml/3.png b/images/framework-mjml/3.png
new file mode 100644
index 00000000..ea0ce72a
Binary files /dev/null and b/images/framework-mjml/3.png differ
diff --git a/images/framework-mjml/4.png b/images/framework-mjml/4.png
new file mode 100644
index 00000000..e31bc759
Binary files /dev/null and b/images/framework-mjml/4.png differ
diff --git a/images/framework-mjml/5.png b/images/framework-mjml/5.png
new file mode 100644
index 00000000..a100b3b3
Binary files /dev/null and b/images/framework-mjml/5.png differ
diff --git a/images/framework-mjml/6.png b/images/framework-mjml/6.png
new file mode 100644
index 00000000..fea7eb4b
Binary files /dev/null and b/images/framework-mjml/6.png differ
diff --git a/images/framework-mjml/7.png b/images/framework-mjml/7.png
new file mode 100644
index 00000000..53268b18
Binary files /dev/null and b/images/framework-mjml/7.png differ
diff --git a/images/framework-mjml/8.png b/images/framework-mjml/8.png
new file mode 100644
index 00000000..cf5aeebf
Binary files /dev/null and b/images/framework-mjml/8.png differ
diff --git a/images/framework-nuxt-vuemail/eight.png b/images/framework-nuxt-vuemail/eight.png
new file mode 100644
index 00000000..2ebc9b0d
Binary files /dev/null and b/images/framework-nuxt-vuemail/eight.png differ
diff --git a/images/framework-nuxt-vuemail/eleven.png b/images/framework-nuxt-vuemail/eleven.png
new file mode 100644
index 00000000..00c04458
Binary files /dev/null and b/images/framework-nuxt-vuemail/eleven.png differ
diff --git a/images/framework-nuxt-vuemail/five.png b/images/framework-nuxt-vuemail/five.png
new file mode 100644
index 00000000..67d062c7
Binary files /dev/null and b/images/framework-nuxt-vuemail/five.png differ
diff --git a/images/framework-nuxt-vuemail/four.png b/images/framework-nuxt-vuemail/four.png
new file mode 100644
index 00000000..36be08fe
Binary files /dev/null and b/images/framework-nuxt-vuemail/four.png differ
diff --git a/images/framework-nuxt-vuemail/nine.png b/images/framework-nuxt-vuemail/nine.png
new file mode 100644
index 00000000..9bcf7af0
Binary files /dev/null and b/images/framework-nuxt-vuemail/nine.png differ
diff --git a/images/framework-nuxt-vuemail/one.png b/images/framework-nuxt-vuemail/one.png
new file mode 100644
index 00000000..57d42d34
Binary files /dev/null and b/images/framework-nuxt-vuemail/one.png differ
diff --git a/images/framework-nuxt-vuemail/seven.png b/images/framework-nuxt-vuemail/seven.png
new file mode 100644
index 00000000..de2002bd
Binary files /dev/null and b/images/framework-nuxt-vuemail/seven.png differ
diff --git a/images/framework-nuxt-vuemail/six.png b/images/framework-nuxt-vuemail/six.png
new file mode 100644
index 00000000..61dbdb41
Binary files /dev/null and b/images/framework-nuxt-vuemail/six.png differ
diff --git a/images/framework-nuxt-vuemail/ten.png b/images/framework-nuxt-vuemail/ten.png
new file mode 100644
index 00000000..ce13e599
Binary files /dev/null and b/images/framework-nuxt-vuemail/ten.png differ
diff --git a/images/framework-nuxt-vuemail/three.png b/images/framework-nuxt-vuemail/three.png
new file mode 100644
index 00000000..9d13c68f
Binary files /dev/null and b/images/framework-nuxt-vuemail/three.png differ
diff --git a/images/framework-nuxt-vuemail/two.png b/images/framework-nuxt-vuemail/two.png
new file mode 100644
index 00000000..4b062512
Binary files /dev/null and b/images/framework-nuxt-vuemail/two.png differ
diff --git a/images/framework-react-email/1.png b/images/framework-react-email/1.png
new file mode 100644
index 00000000..94d43d3f
Binary files /dev/null and b/images/framework-react-email/1.png differ
diff --git a/images/framework-react-email/10.png b/images/framework-react-email/10.png
new file mode 100644
index 00000000..e987c4fb
Binary files /dev/null and b/images/framework-react-email/10.png differ
diff --git a/images/framework-react-email/11.png b/images/framework-react-email/11.png
new file mode 100644
index 00000000..787c2c3a
Binary files /dev/null and b/images/framework-react-email/11.png differ
diff --git a/images/framework-react-email/12.png b/images/framework-react-email/12.png
new file mode 100644
index 00000000..a7a5615e
Binary files /dev/null and b/images/framework-react-email/12.png differ
diff --git a/images/framework-react-email/13.png b/images/framework-react-email/13.png
new file mode 100644
index 00000000..53268b18
Binary files /dev/null and b/images/framework-react-email/13.png differ
diff --git a/images/framework-react-email/14.png b/images/framework-react-email/14.png
new file mode 100644
index 00000000..43e35082
Binary files /dev/null and b/images/framework-react-email/14.png differ
diff --git a/images/framework-react-email/15.png b/images/framework-react-email/15.png
new file mode 100644
index 00000000..d5adf3ea
Binary files /dev/null and b/images/framework-react-email/15.png differ
diff --git a/images/framework-react-email/16.png b/images/framework-react-email/16.png
new file mode 100644
index 00000000..ec397d9b
Binary files /dev/null and b/images/framework-react-email/16.png differ
diff --git a/images/framework-react-email/2.png b/images/framework-react-email/2.png
new file mode 100644
index 00000000..33ad5f38
Binary files /dev/null and b/images/framework-react-email/2.png differ
diff --git a/images/framework-react-email/3.png b/images/framework-react-email/3.png
new file mode 100644
index 00000000..0be786aa
Binary files /dev/null and b/images/framework-react-email/3.png differ
diff --git a/images/framework-react-email/4.png b/images/framework-react-email/4.png
new file mode 100644
index 00000000..8c6d4939
Binary files /dev/null and b/images/framework-react-email/4.png differ
diff --git a/images/framework-react-email/5.png b/images/framework-react-email/5.png
new file mode 100644
index 00000000..d54923ab
Binary files /dev/null and b/images/framework-react-email/5.png differ
diff --git a/images/framework-react-email/6.png b/images/framework-react-email/6.png
new file mode 100644
index 00000000..b683e99d
Binary files /dev/null and b/images/framework-react-email/6.png differ
diff --git a/images/framework-react-email/7.png b/images/framework-react-email/7.png
new file mode 100644
index 00000000..198e1f8f
Binary files /dev/null and b/images/framework-react-email/7.png differ
diff --git a/images/framework-react-email/8.png b/images/framework-react-email/8.png
new file mode 100644
index 00000000..cfa96791
Binary files /dev/null and b/images/framework-react-email/8.png differ
diff --git a/images/framework-react-email/9.png b/images/framework-react-email/9.png
new file mode 100644
index 00000000..389252c3
Binary files /dev/null and b/images/framework-react-email/9.png differ
diff --git a/images/framework-remix/novu-dev-studio-first-run.png b/images/framework-remix/novu-dev-studio-first-run.png
new file mode 100644
index 00000000..68c2a98d
Binary files /dev/null and b/images/framework-remix/novu-dev-studio-first-run.png differ
diff --git a/images/framework-remix/signup-email-workflow-preview.png b/images/framework-remix/signup-email-workflow-preview.png
new file mode 100644
index 00000000..ee8fc4d2
Binary files /dev/null and b/images/framework-remix/signup-email-workflow-preview.png differ
diff --git a/images/framework-svelte-email/dev-studio-first-run.png b/images/framework-svelte-email/dev-studio-first-run.png
new file mode 100644
index 00000000..78c25123
Binary files /dev/null and b/images/framework-svelte-email/dev-studio-first-run.png differ
diff --git a/images/framework-svelte-email/email-workflow-preview.png b/images/framework-svelte-email/email-workflow-preview.png
new file mode 100644
index 00000000..8de52fd2
Binary files /dev/null and b/images/framework-svelte-email/email-workflow-preview.png differ
diff --git a/images/framework/diagram.png b/images/framework/diagram.png
new file mode 100644
index 00000000..62a6efe2
Binary files /dev/null and b/images/framework/diagram.png differ
diff --git a/images/get-started.png b/images/get-started.png
new file mode 100644
index 00000000..3d350934
Binary files /dev/null and b/images/get-started.png differ
diff --git a/images/getting-snippet.png b/images/getting-snippet.png
new file mode 100644
index 00000000..5e7376c7
Binary files /dev/null and b/images/getting-snippet.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230830-qyst.png b/images/getting-started/send-your-first-notification/SCR-20230830-qyst.png
new file mode 100644
index 00000000..981fa32b
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230830-qyst.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230830-qywy.png b/images/getting-started/send-your-first-notification/SCR-20230830-qywy.png
new file mode 100644
index 00000000..b5e4565f
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230830-qywy.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230831-jzdl.png b/images/getting-started/send-your-first-notification/SCR-20230831-jzdl.png
new file mode 100644
index 00000000..7be8d7b4
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230831-jzdl.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230831-kaqq.png b/images/getting-started/send-your-first-notification/SCR-20230831-kaqq.png
new file mode 100644
index 00000000..5e92d0e9
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230831-kaqq.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230831-kcqe.png b/images/getting-started/send-your-first-notification/SCR-20230831-kcqe.png
new file mode 100644
index 00000000..25d1e4c3
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230831-kcqe.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230831-kgka.png b/images/getting-started/send-your-first-notification/SCR-20230831-kgka.png
new file mode 100644
index 00000000..724687af
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230831-kgka.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230831-khui.png b/images/getting-started/send-your-first-notification/SCR-20230831-khui.png
new file mode 100644
index 00000000..f452039b
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230831-khui.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230831-kjhb.png b/images/getting-started/send-your-first-notification/SCR-20230831-kjhb.png
new file mode 100644
index 00000000..3a5f47a2
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230831-kjhb.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230831-klfw.png b/images/getting-started/send-your-first-notification/SCR-20230831-klfw.png
new file mode 100644
index 00000000..5af04fb8
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230831-klfw.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230831-pkxe.png b/images/getting-started/send-your-first-notification/SCR-20230831-pkxe.png
new file mode 100644
index 00000000..e4cdf79a
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230831-pkxe.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230831-plrx.png b/images/getting-started/send-your-first-notification/SCR-20230831-plrx.png
new file mode 100644
index 00000000..d5f30022
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230831-plrx.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230831-pmvs.png b/images/getting-started/send-your-first-notification/SCR-20230831-pmvs.png
new file mode 100644
index 00000000..a16c49e5
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230831-pmvs.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230901-pung.png b/images/getting-started/send-your-first-notification/SCR-20230901-pung.png
new file mode 100644
index 00000000..f283e027
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230901-pung.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230901-puwn.png b/images/getting-started/send-your-first-notification/SCR-20230901-puwn.png
new file mode 100644
index 00000000..92671c86
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230901-puwn.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230901-pxbj.png b/images/getting-started/send-your-first-notification/SCR-20230901-pxbj.png
new file mode 100644
index 00000000..a7f4d8c1
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230901-pxbj.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230901-pxtd.png b/images/getting-started/send-your-first-notification/SCR-20230901-pxtd.png
new file mode 100644
index 00000000..2a2e3ec5
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230901-pxtd.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230901-qaok.png b/images/getting-started/send-your-first-notification/SCR-20230901-qaok.png
new file mode 100644
index 00000000..66fd346a
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230901-qaok.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230901-qcqx.png b/images/getting-started/send-your-first-notification/SCR-20230901-qcqx.png
new file mode 100644
index 00000000..3f10d03f
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230901-qcqx.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230901-qcwk.png b/images/getting-started/send-your-first-notification/SCR-20230901-qcwk.png
new file mode 100644
index 00000000..9b414ab0
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230901-qcwk.png differ
diff --git a/images/getting-started/send-your-first-notification/SCR-20230901-qdih.png b/images/getting-started/send-your-first-notification/SCR-20230901-qdih.png
new file mode 100644
index 00000000..9260b357
Binary files /dev/null and b/images/getting-started/send-your-first-notification/SCR-20230901-qdih.png differ
diff --git a/images/getting-started/send-your-first-notification/blank-workflow1.png b/images/getting-started/send-your-first-notification/blank-workflow1.png
new file mode 100644
index 00000000..23f88da8
Binary files /dev/null and b/images/getting-started/send-your-first-notification/blank-workflow1.png differ
diff --git a/images/getting-started/send-your-first-notification/email-node1.png b/images/getting-started/send-your-first-notification/email-node1.png
new file mode 100644
index 00000000..b6c4c59d
Binary files /dev/null and b/images/getting-started/send-your-first-notification/email-node1.png differ
diff --git a/images/getting-started/send-your-first-notification/execute.png b/images/getting-started/send-your-first-notification/execute.png
new file mode 100644
index 00000000..16c8cecc
Binary files /dev/null and b/images/getting-started/send-your-first-notification/execute.png differ
diff --git a/images/getting-started/send-your-first-notification/inbox.png b/images/getting-started/send-your-first-notification/inbox.png
new file mode 100644
index 00000000..44458f2e
Binary files /dev/null and b/images/getting-started/send-your-first-notification/inbox.png differ
diff --git a/images/getting-started/send-your-first-notification/run-a-test.png b/images/getting-started/send-your-first-notification/run-a-test.png
new file mode 100644
index 00000000..e5dfce57
Binary files /dev/null and b/images/getting-started/send-your-first-notification/run-a-test.png differ
diff --git a/images/getting-started/send-your-first-notification/saving-workflow.png b/images/getting-started/send-your-first-notification/saving-workflow.png
new file mode 100644
index 00000000..63c3ea84
Binary files /dev/null and b/images/getting-started/send-your-first-notification/saving-workflow.png differ
diff --git a/images/getting-started/send-your-first-notification/triggering.gif b/images/getting-started/send-your-first-notification/triggering.gif
new file mode 100644
index 00000000..4be35334
Binary files /dev/null and b/images/getting-started/send-your-first-notification/triggering.gif differ
diff --git a/images/getting-started/send-your-first-notification/workflow-editor1.png b/images/getting-started/send-your-first-notification/workflow-editor1.png
new file mode 100644
index 00000000..b002f184
Binary files /dev/null and b/images/getting-started/send-your-first-notification/workflow-editor1.png differ
diff --git a/images/getting-started/send-your-first-notification/workflows.png b/images/getting-started/send-your-first-notification/workflows.png
new file mode 100644
index 00000000..e0041034
Binary files /dev/null and b/images/getting-started/send-your-first-notification/workflows.png differ
diff --git a/images/github-or-email.png b/images/github-or-email.png
new file mode 100644
index 00000000..5b96787b
Binary files /dev/null and b/images/github-or-email.png differ
diff --git a/images/guides/segment-novu-integration/activity-feed.gif b/images/guides/segment-novu-integration/activity-feed.gif
new file mode 100644
index 00000000..5e34bb10
Binary files /dev/null and b/images/guides/segment-novu-integration/activity-feed.gif differ
diff --git a/images/guides/segment-novu-integration/add-setting-dialog.png b/images/guides/segment-novu-integration/add-setting-dialog.png
new file mode 100644
index 00000000..dd0ca6b7
Binary files /dev/null and b/images/guides/segment-novu-integration/add-setting-dialog.png differ
diff --git a/images/guides/segment-novu-integration/autofill-events.gif b/images/guides/segment-novu-integration/autofill-events.gif
new file mode 100644
index 00000000..6d9f9f43
Binary files /dev/null and b/images/guides/segment-novu-integration/autofill-events.gif differ
diff --git a/images/guides/segment-novu-integration/custom-segment-event.gif b/images/guides/segment-novu-integration/custom-segment-event.gif
new file mode 100644
index 00000000..83f8f15a
Binary files /dev/null and b/images/guides/segment-novu-integration/custom-segment-event.gif differ
diff --git a/images/guides/segment-novu-integration/editor-test.gif b/images/guides/segment-novu-integration/editor-test.gif
new file mode 100644
index 00000000..02570430
Binary files /dev/null and b/images/guides/segment-novu-integration/editor-test.gif differ
diff --git a/images/guides/segment-novu-integration/novu-segment-settings-variables.png b/images/guides/segment-novu-integration/novu-segment-settings-variables.png
new file mode 100644
index 00000000..bcfc9cfa
Binary files /dev/null and b/images/guides/segment-novu-integration/novu-segment-settings-variables.png differ
diff --git a/images/guides/segment-novu-integration/running-segment-func-for-novu-destination.gif b/images/guides/segment-novu-integration/running-segment-func-for-novu-destination.gif
new file mode 100644
index 00000000..4abc4c10
Binary files /dev/null and b/images/guides/segment-novu-integration/running-segment-func-for-novu-destination.gif differ
diff --git a/images/guides/segment-novu-integration/settings-tab-empty.png b/images/guides/segment-novu-integration/settings-tab-empty.png
new file mode 100644
index 00000000..1c35829a
Binary files /dev/null and b/images/guides/segment-novu-integration/settings-tab-empty.png differ
diff --git a/images/guides/slack-guide/add.png b/images/guides/slack-guide/add.png
new file mode 100644
index 00000000..b1164805
Binary files /dev/null and b/images/guides/slack-guide/add.png differ
diff --git a/images/guides/slack-guide/client-id-Novu.png b/images/guides/slack-guide/client-id-Novu.png
new file mode 100644
index 00000000..37b43cf0
Binary files /dev/null and b/images/guides/slack-guide/client-id-Novu.png differ
diff --git a/images/guides/slack-guide/client-id-Slack.png b/images/guides/slack-guide/client-id-Slack.png
new file mode 100644
index 00000000..3c9fd088
Binary files /dev/null and b/images/guides/slack-guide/client-id-Slack.png differ
diff --git a/images/guides/slack-guide/create-app.png b/images/guides/slack-guide/create-app.png
new file mode 100644
index 00000000..27d212ad
Binary files /dev/null and b/images/guides/slack-guide/create-app.png differ
diff --git a/images/guides/slack-guide/create.png b/images/guides/slack-guide/create.png
new file mode 100644
index 00000000..fa60c9ef
Binary files /dev/null and b/images/guides/slack-guide/create.png differ
diff --git a/images/guides/slack-guide/drag.png b/images/guides/slack-guide/drag.png
new file mode 100644
index 00000000..d5e9d948
Binary files /dev/null and b/images/guides/slack-guide/drag.png differ
diff --git a/images/guides/slack-guide/hook.png b/images/guides/slack-guide/hook.png
new file mode 100644
index 00000000..8a2d0c30
Binary files /dev/null and b/images/guides/slack-guide/hook.png differ
diff --git a/images/guides/slack-guide/install.png b/images/guides/slack-guide/install.png
new file mode 100644
index 00000000..acfd9753
Binary files /dev/null and b/images/guides/slack-guide/install.png differ
diff --git a/images/guides/slack-guide/integration.png b/images/guides/slack-guide/integration.png
new file mode 100644
index 00000000..17d60bb1
Binary files /dev/null and b/images/guides/slack-guide/integration.png differ
diff --git a/images/guides/slack-guide/name.png b/images/guides/slack-guide/name.png
new file mode 100644
index 00000000..128e2cfa
Binary files /dev/null and b/images/guides/slack-guide/name.png differ
diff --git a/images/guides/slack-guide/on.png b/images/guides/slack-guide/on.png
new file mode 100644
index 00000000..33bd2d1d
Binary files /dev/null and b/images/guides/slack-guide/on.png differ
diff --git a/images/guides/slack-guide/output.gif b/images/guides/slack-guide/output.gif
new file mode 100644
index 00000000..76e99591
Binary files /dev/null and b/images/guides/slack-guide/output.gif differ
diff --git a/images/guides/slack-guide/redirect.png b/images/guides/slack-guide/redirect.png
new file mode 100644
index 00000000..57ee0c51
Binary files /dev/null and b/images/guides/slack-guide/redirect.png differ
diff --git a/images/guides/slack-guide/scratch.png b/images/guides/slack-guide/scratch.png
new file mode 100644
index 00000000..c79b994b
Binary files /dev/null and b/images/guides/slack-guide/scratch.png differ
diff --git a/images/guides/slack-guide/trigger-code.png b/images/guides/slack-guide/trigger-code.png
new file mode 100644
index 00000000..7006b304
Binary files /dev/null and b/images/guides/slack-guide/trigger-code.png differ
diff --git a/images/guides/slack-guide/trigger.png b/images/guides/slack-guide/trigger.png
new file mode 100644
index 00000000..5dfd558d
Binary files /dev/null and b/images/guides/slack-guide/trigger.png differ
diff --git a/images/guides/slack-guide/variable.png b/images/guides/slack-guide/variable.png
new file mode 100644
index 00000000..b6871efb
Binary files /dev/null and b/images/guides/slack-guide/variable.png differ
diff --git a/images/guides/slack-guide/welcome.png b/images/guides/slack-guide/welcome.png
new file mode 100644
index 00000000..d413a6e5
Binary files /dev/null and b/images/guides/slack-guide/welcome.png differ
diff --git a/images/guides/slack-guide/workflow.png b/images/guides/slack-guide/workflow.png
new file mode 100644
index 00000000..557ba6e6
Binary files /dev/null and b/images/guides/slack-guide/workflow.png differ
diff --git a/images/headless-notification-center-demo.png b/images/headless-notification-center-demo.png
new file mode 100644
index 00000000..17a8010c
Binary files /dev/null and b/images/headless-notification-center-demo.png differ
diff --git a/images/headless.gif b/images/headless.gif
new file mode 100644
index 00000000..491cf5e5
Binary files /dev/null and b/images/headless.gif differ
diff --git a/images/help/overview/product-architecture.jpg b/images/help/overview/product-architecture.jpg
new file mode 100644
index 00000000..c1f65403
Binary files /dev/null and b/images/help/overview/product-architecture.jpg differ
diff --git a/images/hero-dark.svg b/images/hero-dark.svg
index e274f2fe..3ae94f0d 100644
--- a/images/hero-dark.svg
+++ b/images/hero-dark.svg
@@ -18,8 +18,8 @@
+
+
+## Why use the Novu Inbox?
+
+- You want to notify users directly within your application.
+- Pre-built UI components make the Inbox easy to include.
+- Highly customizable and can be made to exactly match your existing branding and design.
+- Users can access powerful subscriber preferences management direct from the Inbox.
+- Provide a multi-tab notification experience.
+- Synchronize notifications across devices in real-time, powered by web sockets.
+- Secure your connection using HMAC encryption.
+
+## Concepts
+
+1. `Subscriber` - is your product user who will receive the notifications through the In-App channel.
+2. `Notification` - is a message sent to the subscriber using an In-App channel (step) in the workflow.
+3. `Notifications list` - the list of all notifications sent to a particular subscriber.
+4. `Tabs` - allows to switch between notifications lists where the notifications can be grouped by particular workflow tags.
+5. `Notification actions` - are the buttons below notification content that can be clicked to perform any action or external API call.
+6. `Redirect URL` - when a single notification item from the list is clicked then it can be configured to perform an action or redirect to any URL.
+
+## Getting started
+
+- Pre built UI component in [React](/inbox/react/get-started).
+- Learn how to use [headless library](/inbox/headless/get-started) to build custom UI for other frameworks like Vue, Angular etc.
+- [React Native](/inbox/react-native/quickstart) - Add a notification feed to your React Native app.
+
+## Design files
+
+To aide your design process, we provide a free [Figma file](https://www.figma.com/community/file/1425407348374863860) that contains all of the design assets. Make a copy of the file into your own account to get started with customizing your graphical Inbox elements.
\ No newline at end of file
diff --git a/inbox/react-native/hooks/novu-provider.mdx b/inbox/react-native/hooks/novu-provider.mdx
new file mode 100644
index 00000000..fffe2d62
--- /dev/null
+++ b/inbox/react-native/hooks/novu-provider.mdx
@@ -0,0 +1,17 @@
+---
+title: 'NovuProvider'
+---
+
+import NovuProviderExample from '/snippets/inbox/react/novu-provider-example.mdx';
+import NovuParams from '/snippets/inbox/headless/api-reference/novu-params.mdx';
+
+The `NovuProvider` is the top-level component that provides the [Novu instance](/inbox/headless/api-reference#novu) to the rest of the hooks through the context.
+Usually, it's placed somewhere in the root of your application, which makes the hooks accessible throughout the application.
+
+## `NovuProvider` props
+
+{notification.body}
+{notification.data.text}
+{notification.body}
+{notification.data.text}
+{notification.body}
+{notification.data.text}
+
+
+
+## Layouts
+
+The composition of the indivudal components can generate multiple different popular inbox layouts.
+
+### Inbox with Bell (Default)
+
+A trigger button usually located at the top right corner of the screen, which triggers the popover component when clicked.
+
+
+
+
+
+### Preferences Component
+
+The `Preferences` component is used to display the subscriber preferences, use it when you want to render preference in another part of your application or a custom layout for the Inbox.
+
+```tsx
+import { Inbox, Preferences } from '@novu/react';
+
+function Novu() {
+ return (
+ 
+
+ {notification.body}
+ + +
+
diff --git a/inbox/react/migration-guide.mdx b/inbox/react/migration-guide.mdx
new file mode 100644
index 00000000..b3c75cab
--- /dev/null
+++ b/inbox/react/migration-guide.mdx
@@ -0,0 +1,881 @@
+---
+title: "Migration Guide"
+sidebarTitle: "Migration Guide"
+description: "This guide outlines the key differences between the `@novu/notification-center` package and the new `@novu/react` package. Follow the steps below to migrate your application to the latest version."
+---
+
+{notification.body}
+
+
+
+
+
+### Hide global preferences
+Global preferences can be hidden by using following css style in root css file.
+```css
+.nv-workflowContainer:first-child {
+ display: none;
+}
+```
diff --git a/inbox/react/production.mdx b/inbox/react/production.mdx
new file mode 100644
index 00000000..817b9043
--- /dev/null
+++ b/inbox/react/production.mdx
@@ -0,0 +1,47 @@
+---
+title: 'Production Setup for React'
+sidebarTitle: 'Going to production'
+description: 'Learn how to prepare your React notification inbox for production deployment including HMAC encryption and security best practices.'
+---
+
+
+## HMAC Encryption
+
+When Novu's user adds the Inbox to their application they are required to pass a `subscriberId` which identifies the user's end-customer, and the application Identifier which is acted as a public key to communicate with the notification feed API.
+
+A malicious actor can access the user feed by accessing the API and passing another `subscriberId` using the public application identifier.
+
+HMAC encryption will make sure that a `subscriberId` is encrypted using the secret API key, and those will prevent malicious actors from impersonating users.
+
+### Enabling HMAC Encryption
+
+In order to enable Hash-Based Message Authentication Codes, you need to visit the admin panel In-App settings page and enable HMAC encryption for your environment.
+
+
+ 
+
+
+1. Next step would be to generate an HMAC encrypted subscriberId on your backend:
+
+```tsx
+import { createHmac } from 'crypto';
+
+const hmacHash = createHmac('sha256', process.env.NOVU_SECRET_KEY)
+ .update(subscriberId)
+ .digest('hex');
+```
+
+2. Then pass the created HMAC to your client side application forward it to the component:
+
+```tsx
+
+
+
+#### Styling Variables
+
+You can override the default elements by passing your own styles or CSS classes to the `elements` object.
+
+```tsx
+const appearance = {
+ variables: {
+ colorBackground: "yellow",
+ },
+};
+
+
+
+
+
{" "}
+
+
+## Storing webhook url on subscriber entity
+
+The URL generated above will be the target channel of a subscriber that you want to integrate with. To make this connection, you have to:
+
+1. Copy the URL that you generated above
+2. Update the subscriber credentials with this URL using the MS Teams provider id. You can do this step by using the `@novu/node` library, as shown below:
+
+
{" "}
+
+2. Click on the 'Add New Webhook to Workspace':
+
+ 
{" "}
+
+3. Now, go ahead and select the channel in which you want to send notifications and click 'allow'.
+
+ 
{" "}
+
+4. Then, copy the 'webhookUrl' from Slack.
+
+ 
{" "}
+
+5. Now, you need to save the `webhookUrl` on the relevant subscriber entity in Novu. Here's an example to do the same using our Node SDK:
+
+## Writing Slack content (Blocks API)
+
+Novu Framework supports using [blocks](https://api.slack.com/block-kit) as part of the delivered messages using the provider overrides of the `chat` channel:
+
+You can use the [Blocks Playground](https://app.slack.com/block-kit-builder/T02QYEPHZMM#%7B%22blocks%22:%5B%7B%22type%22:%22section%22,%22text%22:%7B%22type%22:%22mrkdwn%22,%22text%22:%22Hello,%20Assistant%20to%20the%20Regional%20Manager%20Dwight!%20*Michael%20Scott*%20wants%20to%20know%20where%20you'd%20like%20to%20take%20the%20Paper%20Company%20investors%20to%20dinner%20tonight.%5Cn%5Cn%20*Please%20select%20a%20restaurant:*%22%7D%7D,%7B%22type%22:%22divider%22%7D,%7B%22type%22:%22section%22,%22text%22:%7B%22type%22:%22mrkdwn%22,%22text%22:%22*Farmhouse%20Thai%20Cuisine*%5Cn:star::star::star::star:%201528%20reviews%5Cn%20They%20do%20have%20some%20vegan%20options,%20like%20the%20roti%20and%20curry,%20plus%20they%20have%20a%20ton%20of%20salad%20stuff%20and%20noodles%20can%20be%20ordered%20without%20meat!!%20They%20have%20something%20for%20everyone%20here%22%7D,%22accessory%22:%7B%22type%22:%22image%22,%22image_url%22:%22https://s3-media3.fl.yelpcdn.com/bphoto/c7ed05m9lC2EmA3Aruue7A/o.jpg%22,%22alt_text%22:%22alt%20text%20for%20image%22%7D%7D,%7B%22type%22:%22section%22,%22text%22:%7B%22type%22:%22mrkdwn%22,%22text%22:%22*Kin%20Khao*%5Cn:star::star::star::star:%201638%20reviews%5Cn%20The%20sticky%20rice%20also%20goes%20wonderfully%20with%20the%20caramelized%20pork%20belly,%20which%20is%20absolutely%20melt-in-your-mouth%20and%20so%20soft.%22%7D,%22accessory%22:%7B%22type%22:%22image%22,%22image_url%22:%22https://s3-media2.fl.yelpcdn.com/bphoto/korel-1YjNtFtJlMTaC26A/o.jpg%22,%22alt_text%22:%22alt%20text%20for%20image%22%7D%7D,%7B%22type%22:%22section%22,%22text%22:%7B%22type%22:%22mrkdwn%22,%22text%22:%22*Ler%20Ros*%5Cn:star::star::star::star:%202082%20reviews%5Cn%20I%20would%20really%20recommend%20the%20%20Yum%20Koh%20Moo%20Yang%20-%20Spicy%20lime%20dressing%20and%20roasted%20quick%20marinated%20pork%20shoulder,%20basil%20leaves,%20chili%20&%20rice%20powder.%22%7D,%22accessory%22:%7B%22type%22:%22image%22,%22image_url%22:%22https://s3-media2.fl.yelpcdn.com/bphoto/DawwNigKJ2ckPeDeDM7jAg/o.jpg%22,%22alt_text%22:%22alt%20text%20for%20image%22%7D%7D,%7B%22type%22:%22divider%22%7D,%7B%22type%22:%22actions%22,%22elements%22:%5B%7B%22type%22:%22button%22,%22text%22:%7B%22type%22:%22plain_text%22,%22text%22:%22Farmhouse%22,%22emoji%22:true%7D,%22value%22:%22click_me_123%22%7D,%7B%22type%22:%22button%22,%22text%22:%7B%22type%22:%22plain_text%22,%22text%22:%22Kin%20Khao%22,%22emoji%22:true%7D,%22value%22:%22click_me_123%22,%22url%22:%22https://google.com%22%7D,%7B%22type%22:%22button%22,%22text%22:%7B%22type%22:%22plain_text%22,%22text%22:%22Ler%20Ros%22,%22emoji%22:true%7D,%22value%22:%22click_me_123%22,%22url%22:%22https://google.com%22%7D%5D%7D%5D%7D) from Slack to learn more about the diffrent blocks available.
+
+```typescript
+await step.chat('send-chat', async () => {
+ return {
+ // This will be used as a fallback for the chat provider if other than Slack provider is used
+ body: 'A new post has been created',
+ };
+}, {
+ providers: {
+ slack: async ({ inputs }) => ({
+ text: 'A new post has been created',
+ blocks: [
+ {
+ type: 'section',
+ text: {
+ type: 'mrkdwn',
+ text: 'A new post has been created',
+ },
+ },
+ ],
+ }),
+ }
+});
+```
+
+
+## Update credential webhookUrl
+
+
+
+
+- Click "Add a new bot" button in "Bots" tab.
+
+
+ 
{" "}
+
+
+- Set bot type as "Incoming webhook".
+
+
+ 
{" "}
+
+
+- Click the small link icon to generate webhook URL for provider. Set Integration as `Slack compatible webhook`, choose your channel and copy webhook URL.
+
+
+ 
{" "}
+
+
+## Connecting our subscribers to Zulip
+
+The URL generated above will be the target channel of a subscriber that you want to integrate with. To make this connection, you have to:
+
+1. Copy the URL that you generated above
+
+2. Update the subscriber credentials with this URL using the Zulip provider id. You can do this step by using the `@novu/node` library, as shown below:
+
+## Update credential webhookUrl
+
+
{" "}
+
+
+## Novu SMS Provider
+
+And this is what the default Novu SMS provider looks like:
+
+
+ 
{" "}
+
+
+
{" "}
+
+
+It is the only provider for the in-app channel and it _can be used in production apps_. Unlike sms and email, it is not active by default and needs to be turned on separately. It can be scaled as per your need and it is a 'pay as you go' offering. You can check [this](https://novu.co/pricing/?utm_campaign=docs-default-providers) for more details.
+
+## Limits of the Novu Providers
+
+Following are the limits for our email and sms providers:
+
+1. Email: 300 emails per organization per month
+2. SMS: 20 messages per organization per month
+
+To send more than these limits, you can configure a different provider for a specific channel.
diff --git a/integrations/providers/email/adding-email.mdx b/integrations/providers/email/adding-email.mdx
new file mode 100644
index 00000000..322d00cf
--- /dev/null
+++ b/integrations/providers/email/adding-email.mdx
@@ -0,0 +1,55 @@
+---
+title: "Adding Email Channel"
+sidebarTitle: "Adding Email Channel"
+description: "Learn how to add the Email channel to your application"
+icon: "circle-plus"
+---
+
+The Email channel enables you to send email notifications to users for events like password resets, onboarding, or system alerts.
+
+
+
+
+- **Subject** - Title of the email. It supports variables and can be customized based on the subscriber properties and payload variables.
+- **Body** - Main content of the email. It is made of blocks.
+
+## Email Editor Blocks
+
+Email editor body is made of blocks. A block can be added by clicking on the plus icon on the top left corner of the editor or by adding a forward slash `/`. In both the cases, a popover will appear with the list of supported blocks. Click on the desired block to add it to the editor. Menu option besides plus (+) icon can be used to **duplicate** or **delete** the block.
+
+
+ 
+
+
+The Email Editor supports the following blocks:
+
+- **Text** - Regular text
+- **Heading 1** - Large heading (H1)
+- **Heading 2** - Medium heading (H2)
+- **Heading 3** - Small heading (H3)
+- **Bullet List** - Bullet list (bullet points like •)
+- **Numbered List** - Numbered list (numeric digits like 1,2,3)
+- **Image** - Full widh image with absolute url, image position can be customized
+- **Section** - Create a section to group content together
+- **Column** - Creates columns to group content together, useful for responsive design
+- **Divider** - Separates the content, adds a line to highlight the separation
+- **Spacer** - Spacer to add space between two blocks (available in sm, lg and xl sizes)
+- **Button** - Call to action button to link to a page or url (can be customised with text, url, color and size and background color)
+- **Hard Break** - Adds a line break
+- **Blockquote** - Adds a blockquote
+- **Repeat** - Can be used for interation on array of data
+- **Show** - Can be used to conditionally show content based on a condition, use eye icon to toggle the visibility of the content
+
+### Repeat Block
+
+`Repeat` block is synonym with the javascript language `for` loop. It can be used to iterate over an array of data and render a block for each item in the array. Use + icon or / to add a `Repeat` block. Checkout the below video on how to use `Repeat` block
+
+
+
+In above video:
+- `{{payload.order.items}}` is array of items in the order and can be used to iterate over the items
+
+then each item in the iteration has following properties:
+- `{{payload.order.items.name}}` is the name of the item
+- `{{payload.order.items.price}}` is the price of the item
+
+
+### Show Block
+
+Show block can be used to conditionally show content based on a condition. Use the eye icon to toggle the visibility of the content. Few components supports eye icon. Conditions could be based on subscribr properties, payload variables.
+
+
+ 
+
+
+In above example, if subscriber has `showTracking` field set to `true` in custom `data` attribute, then the `Track your order` button will be shown in the email sent to the subscriber. Similarly, paylaod variables can be used to conditionally show the content.
+
+
diff --git a/integrations/providers/in-app/adding-in-app.mdx b/integrations/providers/in-app/adding-in-app.mdx
new file mode 100644
index 00000000..900a3ba1
--- /dev/null
+++ b/integrations/providers/in-app/adding-in-app.mdx
@@ -0,0 +1,45 @@
+---
+title: "Adding In-App Channel"
+sidebarTitle: "Adding In-App Channel"
+description: "Learn how to add the In-App channel to your application"
+icon: "circle-plus"
+---
+
+The In-App channel allows you to display notifications, messages, and other content directly within your application's interface.
+
+
+
\ No newline at end of file
diff --git a/integrations/providers/push/overview.mdx b/integrations/providers/push/overview.mdx
new file mode 100644
index 00000000..3ff6f434
--- /dev/null
+++ b/integrations/providers/push/overview.mdx
@@ -0,0 +1,133 @@
+---
+title: "Push Providers Integration"
+sidebarTitle: "Overview"
+description: "Learn how to configure the Push channel"
+icon: "circle-info"
+---
+import { MissingProvider } from "/snippets/missing-provider.mdx";
+
+Push notifications are a powerful way to deliver real-time updates, reminders, and personalized messages to your users across mobile and web platforms.
+Whether it's a promotional alert, a system notification, or a critical update, push notifications are key to enhancing engagement and retention.
+
+Novu simplifies the process by offering a unified API that supports multiple push notification providers, enabling reliable and efficient message delivery.
+
+## Key Features
+
+- **Multi-Provider Support**: Integrate with providers like Firebase Cloud Messaging (FCM), OneSignal, or Apple Push Notification Service (APNS)
+- **Unified Delivery**: Streamline your push notifications with a single API for mobile and web platforms
+- **Dynamic Content**: Customize notifications with variables for personalized user experiences
+- **Device Management**: Keep subscriber device tokens in sync using just-in-time or manual updates
+
+## Common Use Cases
+- **Transactional Notifications**: Payment updates, delivery alerts, appointment reminders
+- **Engagement Notifications**: Promotions, re-engagement campaigns, social media interactions
+- **System Alerts**: Security warnings, downtime alerts, account activity updates
+
+
+## How to send push notifications
+To send a push notification to subscribers (users) using Novu:
+
+- Add a push channel provider in integration store
+- Add push channel as a step in existing or new workflow.
+- Add static or dynamic content using variables in push step fields
+- Store provider specific device tokens/identifiers in subscriber profile. Read provider specific documentation on how to obtain and store device tokens.
+- Make sure all provider specific steps are configured properly before triggering workflow. Read provider related documentation for all required steps.
+- Trigger the workflow.
+
+## Supported providers
+
+- [Firebase Cloud Messaging (FCM)](/channels-and-providers/push/fcm)
+- [Expo Push](/channels-and-providers/push/expo-push)
+- [Apple Push Notification Service](/channels-and-providers/push/apns)
+- [OneSignal](/channels-and-providers/push/onesignal)
+- [Pushpad](/channels-and-providers/push/pushpad)
+- [Push Webhook](/channels-and-providers/push/push-webhook)
+
+
{" "}
+
+- If you're a new user and don't have a team yet, you'll have to do so by clicking on New Team and entering your team name. Click on Save when you're done.
+
+ 
{" "}
+
+- On the page that appears, click on the Create App button.
+- On the pop-up that appears, enter your application name, username and select a country. Then click Save. The `username` is what you will use on the Novu platform.
+
+ 
{" "}
+
+
+## Generating an API key
+
+To generate a new API key, you can follow these steps:
+
+
{" "}
+
+- On the page that appears, click on Settings(on the menu on your left). This will
+display a dropdown. Click on API Key from the dropdown options.
+
+ 
{" "}
+
+- On the page that appears, enter your password and click Generate.
+
+ 
{" "}
+
+- Copy the API Key generated and paste it into the Novu platform or record it somewhere
+safe for later use because you will not see it from the dashboard on subsequent visits.
+
+
{" "}
+
+- If you have not created one yet, on the `Shortcodes` dropdown option, click on `Request`.
+ On the page that appears, fill in the form and submit.
+
+ 
{" "}
+
+
+## To create an Alphanumeric:
+
+- On your app dashboard, click on SMS (on the menu on your left). This will display a dropdown. Click on `Alphanumerics` from the dropdown options. This will also display a dropdown from which you can then click on `My Alphanumerics` to view your codes.
+
+
+ 
{" "}
+
+
+- If you have not created one yet, on the `Alphanumerics` dropdown option, click on `Request`.
+ On the page that appears, fill in the form and submit
+
+ 
{" "}
+
+- Once you're done, add either your short code or alphanumeric to the `from` field on the Novu platform.
+
+## Creating an Africa's Talking integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-africastalking) page on Novu.
+- Click the "Add a provider" button.
+- Locate **Africa's Talking** under the SMS section and click on the **Connect** button.
+- Enter the `API key`.
+- Fill in the `username` field.
+- Fill in the `from` field. This is your registered `short code` or `alphanumeric` value.
+- Click on the `Disabled` button and mark it as `Active`.
+- Click on the **Connect** button.
+
+Now it is possible to send SMS notifications using Africa's Talking in Novu.
diff --git a/integrations/providers/sms/aws-sns.mdx b/integrations/providers/sms/aws-sns.mdx
new file mode 100644
index 00000000..ad977382
--- /dev/null
+++ b/integrations/providers/sms/aws-sns.mdx
@@ -0,0 +1,30 @@
+---
+title: "AWS SNS"
+description: "Learn how to use the AWS SNS provider to send sms notifications using Novu"
+---
+
+You can use the [AWS SNS](https://aws.amazon.com/sns/) provider to send transactional emails to your customers using the Novu Platform with a single API to create multi-channel experiences.
+
+# Getting Started
+
+To integrate AWS SNS on the Novu platform, you will need to have in AWS, an IAM user who has the `sns:Publish` permission.
+
+# Create User
+
+To create a user, log in to AWS Console and follow these steps:
+
+- Go to the `IAM` service page.
+- Create a new user with `sns:Publish` permission, or add `sns:Publish` permission to an existing user.
+- Add the `Access Key` credential to the user and copy the `Access key ID` and the `Secret access key`.
+
+For security reasons, it is suggested that you create a new User to use with Novu.
+
+# Create an AWS SNS integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-sns) page on Novu.
+- Click the "Add a provider" button.
+- Locate **Amazon SNS** and click on the **Connect** button.
+- Enter your `Access Key ID`, `Secret Access key`, and `AWS region`.
+- Click on the `Disabled` button and mark it as `Active`.
+- Click on the **Save** button.
+- You should now be able to send SMS notifications using **Amazon SNS** in Novu.
diff --git a/integrations/providers/sms/azure.mdx b/integrations/providers/sms/azure.mdx
new file mode 100644
index 00000000..2dc0e7df
--- /dev/null
+++ b/integrations/providers/sms/azure.mdx
@@ -0,0 +1,24 @@
+---
+title: "Azure SMS"
+description: "Learn how to use the Azure SMS provider to send sms notifications using Novu"
+---
+
+You can use the [Azure SMS](https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/sms/send?tabs=windows&pivots=platform-azcli) SMS provider to send SMS messages to the customers using the Novu Platform with a single API to create multi-channel experiences.
+
+# Getting Started
+
+To use Azure SMS provider in the SMS channel, the first step is to create an Azure account and grab the communication services connection string from your account dashboard.
+
+# Creating a Azure SMS integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-azure) page on Novu.
+- Click the "Add a provider" button.
+- Locate **Azure Sms** under the SMS section and click on the **Next** button.
+- Select Your Environment add condition (Optional).
+- Click on the `Create` button.
+- Click on the `Disabled` button and mark it as `Active`.
+- Enter the `Connection string`.
+- Enter the `From` value.
+- Click on the **Update** button.
+
+Now it is possible to send SMS notifications using **Azure Sms** in Novu.
diff --git a/integrations/providers/sms/bulk-sms.mdx b/integrations/providers/sms/bulk-sms.mdx
new file mode 100644
index 00000000..d4a490ac
--- /dev/null
+++ b/integrations/providers/sms/bulk-sms.mdx
@@ -0,0 +1,23 @@
+---
+title: "BulkSMS"
+description: "Learn how to use the BulkSMS provider to send sms notifications using Novu"
+---
+
+You can use the [BurstSMS](https://bulksms.com/) provider to send SMS messages to the customers using the Novu Platform with a single API to create multi-channel experiences.
+
+# Getting Started
+
+To use BulkSMS provider in the SMS channel, the first step is to create a BulkSMS account and create an [API token](https://www.bulksms.com/account/#!/advanced-settings/api-tokens).
+
+# Creating a BulkSMS integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co.co/integrations?utm_campaign=docs-sms-bulksms) page on Novu.
+- Click the "Add a provider" button.
+- Locate **BulkSMS** under the SMS section and click on the **Next** button.
+- Select Your Environment add condition (Optional).
+- Click on the `Create` button.
+- Click on the `Disabled` button and mark it as `Active`.
+- Enter the `API Token`.
+- Click on the **Update** button.
+
+Now it is possible to send SMS notifications using **BulkSMS** in Novu.
diff --git a/integrations/providers/sms/burst-sms.mdx b/integrations/providers/sms/burst-sms.mdx
new file mode 100644
index 00000000..ec659199
--- /dev/null
+++ b/integrations/providers/sms/burst-sms.mdx
@@ -0,0 +1,25 @@
+---
+title: "BurstSMS"
+description: "Learn how to use the BurstSMS provider to send sms notifications using Novu"
+---
+
+You can use the [BurstSMS](https://burstsms.com/) provider to send SMS messages to the customers using the Novu Platform with a single API to create multi-channel experiences.
+
+# Getting Started
+
+To use BurstSMS provider in the SMS channel, the first step is to create an BurstSMS account and add the personal BurstSMS API key and your BurstSMS API Secret to the BurstSMS integration on the Novu platform.
+
+# Find the API and Secret key
+
+To find the BurstSMS API and Secret key, log into the personal BurstSMS account and navigate to the API Keys section tab present at the end of the Navbar. It is suggested to create a new API and Secret key for use with Novu. Copy the newly created API and Secret key.
+
+# Creating a BurstSMS integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-burstsms) page on Novu.
+- Click the "Add a provider" button.
+- Locate **BurstSMS** under the SMS section and click on the **Next** button.
+- Select Your Environment add condition (Optional)
+- Click on the `Disabled` button and mark it as `Active`.
+- Enter the `API key` and `API Secret`.
+- Click on the **Upload** button.
+- Now it is possible to send SMS notifications using **BurstSMS** in Novu.
diff --git a/integrations/providers/sms/clickatell.mdx b/integrations/providers/sms/clickatell.mdx
new file mode 100644
index 00000000..fa21da39
--- /dev/null
+++ b/integrations/providers/sms/clickatell.mdx
@@ -0,0 +1,62 @@
+---
+title: "Clickatell"
+description: "Learn how to use the Clickatell provider to send sms notifications using Novu"
+---
+
+You can use the [Clickatell](https://www.clickatell.com/) provider to send SMS messages to your customers using the Novu Platform.
+Let's see how to do it:
+
+## Getting Started
+
+To use the [Clickatell](https://www.clickatell.com/) provider in the SMS channel, the first step is to [create a Clickatell account](https://www.clickatell.com/sign-up/) and add your API key to the Clickatell integration on the [Novu web dashboard](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-clickatell).
+
+## Retrieving your API Key
+
+To find your Clickatell API key:
+
+- [Sign up](https://www.clickatell.com/sign-up/) or [Login](https://app.clickatell.com/signin) to your Clickatell account.
+- Click on the `My Workspace`, and then click `SMS` in Channels Section.
+
+
+ 
{" "}
+
+
+- Click on the `New SMS Setup`.
+
+
+ 
{" "}
+
+
+- Select `API` then `Messaging Type` and click Next.
+
+
+ 
{" "}
+
+
+- Select `Basic HTTP API` then `create a new HTTP API` and click Next.
+
+
+ 
{" "}
+
+
+- Now fill in all details and Click Next.
+
+
+ 
{" "}
+
+
+- Copy the API key and click complete.
+
+ 
{" "}
+
+
+## Create a Clickatell integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-clickatell) page on Novu.
+- Click the "Add a provider" button.
+- Locate **Clickatell** under the SMS section and click on the **Connect** button.
+- Enter your Clickatell API Key.
+- Click on the `Disabled` button and mark it as `Active`.
+- Click on the **Connect** button.
+
+Now it is possible to send SMS notifications using **Clickatell** in Novu.
diff --git a/integrations/providers/sms/clicksend.mdx b/integrations/providers/sms/clicksend.mdx
new file mode 100644
index 00000000..bd7659fe
--- /dev/null
+++ b/integrations/providers/sms/clicksend.mdx
@@ -0,0 +1,31 @@
+---
+title: "Clicksend"
+description: "Learn how to use the Clicsend provider to send sms notifications using Novu"
+---
+
+You can use the [Clicksend](https://www.clicksend.com/in/) provider to send SMS messages to your customers using the Novu Platform.
+Let's see how to do it:
+
+# Getting Started
+
+To use the [Clicksend](https://www.clicksend.com/in/) provider in the SMS channel, the first step is to [create a Clicksend account](https://dashboard.clicksend.com/signup/step1) and add your API key to the Clicksend integration on the [Novu web dashboard](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-clicksend).
+
+# Retrieving your API Key
+
+- **Generate an API Key**: After logging into your ClickSend account, navigate to the API Keys section. This is usually located in your account settings or developer dashboard.
+- **Create a New API Key**: It's recommended to create a new API key specifically for your integration with Novu. Click on the option to create a new API key, and it will be generated for you.
+- **Copy the API Key**: Once your API key is created, make sure to copy it to your clipboard. You will need this key to connect ClickSend with Novu.
+
+# Create a Clicksend integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-clicksend) page on Novu.
+- Click on Add a Provider.
+- Select Clicksend service.
+- Choose your preferred deployment environment: `Development` or `Production`. Then Click the `Create` button.
+- Enter your Clicksend Username.
+- Enter your Clicksend API Key.
+- Fill in the `From` field.
+- Click on the `Disabled` button and mark it as `Active`.
+- Click on the **Update** button.
+
+Now it is possible to send SMS notifications using **Clicksend** in Novu.
diff --git a/integrations/providers/sms/firetext.mdx b/integrations/providers/sms/firetext.mdx
new file mode 100644
index 00000000..a54f6d2a
--- /dev/null
+++ b/integrations/providers/sms/firetext.mdx
@@ -0,0 +1,46 @@
+---
+title: "Firetext"
+description: "Learn how to use the firetext provider to send sms notifications using Novu"
+---
+
+You can use the [firetext](https://www.firetext.co.uk) provider to send SMS messages to your customers using the Novu Platform with a single API to create multi-channel experiences.
+
+## Getting Started
+
+To use the firetext provider in the SMS channel, the first step is to create a firetext account and add your API key and Sender ID to the firetext integration on the Novu platform.
+
+- Note : Firetext is only available in uk region. Others may require additional verification.
+
+## Retrieving your API Key
+
+To find your firetext API key:
+
+- [Sign up](https://app.firetext.co.uk/signup) or [Login](https://app.firetext.co.uk/) to your firetext account.
+- Click on the `Settings` icon in the top right corner of the screen.
+
+
+ 
{" "}
+
+
+- Now Click on the `API` in `My Settings` Section.
+
+
+ 
{" "}
+
+
+- On the API Keys page, copy the `API key`.
+
+ 
{" "}
+
+
+## Create a firetext integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-firetxt) page on Novu.
+- Click the "Add a provider" button.
+- Locate **firetext** under the SMS section and click on the **Connect** button.
+- Enter your `firetext` API Key.
+- Fill in the `From` field.
+- Click on the `Disabled` button and mark it as `Active`.
+- Click on the **Connect** button.
+
+Now it is possible to send SMS notifications using **firetext** in Novu.
diff --git a/integrations/providers/sms/gupshup.mdx b/integrations/providers/sms/gupshup.mdx
new file mode 100644
index 00000000..14d82b33
--- /dev/null
+++ b/integrations/providers/sms/gupshup.mdx
@@ -0,0 +1,27 @@
+---
+title: "gupshup"
+description: "Learn how to use the gupshup provider to send sms notifications using Novu"
+---
+
+You can use the [gupshup](https://www.gupshup.io/) provider to send SMS messages to your customers using the Novu Platform with a single API to create multi-channel experiences.
+
+# Getting Started
+
+To use the gupshup provider in the SMS channel, the first step is to create a gupshup account and add the Account Username and Password to the gupshup integration on the Novu platform.
+
+# What is User id and Password?
+
+- `userid` : The account number provided by the Enterprise SMS GupShup.
+- `Password` : Password is provided by Gupshup for authentication of user id. The password must be the same as used to log on to the Enterprise SMS GupShup website.
+
+# Creating a gupshup integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-gupshup) page on Novu.
+- Click the "Add a provider" button.
+- Locate **gupshup** under the SMS section and click on the **Connect** button.
+- Enter the `User id`.
+- Enter the `Password`.
+- Click on the `Disabled` button and mark it as `Active`.
+- Click on the **Connect** button.
+
+Now it is possible to send SMS notifications using **gupshup** in Novu.
diff --git a/integrations/providers/sms/infobip.mdx b/integrations/providers/sms/infobip.mdx
new file mode 100644
index 00000000..d168b13f
--- /dev/null
+++ b/integrations/providers/sms/infobip.mdx
@@ -0,0 +1,59 @@
+---
+title: "Infobip - SMS"
+description: "Learn how to use the Infobip provider to send sms notifications using Novu"
+---
+
+You can use the [Infobip](https://www.infobip.com/developers/) provider to send SMS messages to your customers using the Novu Platform with a single API to create multi-channel experiences.
+
+## Getting Started
+
+To use the Infobip provider in the SMS channel, you will need to create an Infobip account and add your API key and Base URL to the Infobip integration on the Novu platform.
+
+## Retrieving your API Key
+
+To Find a new API key in Infobip, you can follow these steps:
+
+- [Sign up](https://www.infobip.com/signup) or [Log in](https://portal.infobip.com/login/) to your Infobip account.
+- On the [Homepage](https://portal.infobip.com/homepage/), you'll see your API key.
+
+
+ 
{" "}
+
+Alternatively, you can find the API key on the Developer Tools page.
+
+- On the sidebar (on the left), click on `Developer Tools`.
+- This will display a dropdown from which you can then click on `API Ksys` to view your API key.
+
+
+ 
{" "}
+
+
+If you want to create an API key:
+
+- Click on the `CREATE API KEY` button
+- Fill the form
+- Click on `GENERATE`
+
+ 
{" "}
+
+
+## Finding the Base URL
+
+To see your base URL, log in to the account. Once logged in, on the Homepage, you should see your base URL in this format: `xxxxx.api.infobip.com`.
+
+
+ 
{" "}
+
+
+## Create an Infobip integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-infobip) page on Novu.
+- Click the "Add a provider" button.
+- Locate **Infobip** under the SMS section and click on the **Connect** button.
+- Enter your Infobip API Key.
+- Enter your Base URL.
+- Fill in the `From` field.
+- Click on the `Disabled` button and mark it as `Active`.
+- Click on the **Connect** button.
+
+You should now be able to send SMS notifications using Infobip in Novu.
diff --git a/integrations/providers/sms/kannel.mdx b/integrations/providers/sms/kannel.mdx
new file mode 100644
index 00000000..2707c68e
--- /dev/null
+++ b/integrations/providers/sms/kannel.mdx
@@ -0,0 +1,79 @@
+---
+title: "Kannel"
+description: "Learn how to use the Kannel sms provider to send sms notifications using Novu"
+---
+
+Before integrating Kannel with Novu, you should have Kannel set up and configured as an SMS gateway on your server. Let’s look at how you can do that:
+
+# Setting up Kannel
+
+1. First, you need to install Kannel on your server. You can download it from the [official-website](https://www.kannel.org/download.shtml) or use a package manager specific to your operating system (e.g., apt-
+ get for Ubuntu, yum for CentOS, etc.).
+2. Kannel's configuration is done through a file called kannel.conf. You need to edit this file to specify your SMS provider settings. Here's a basic configuration example:
+
+ ```bash
+ group = smsc
+ smsc = smpp
+ smsc-id = YourSMSCID
+ host = SMSC_Hostname_or_IP
+ port = SMSC_Port
+ system-type = SMSC_System_Type
+ smsc-username = YourUsername
+ smsc-password = YourPassword
+ max-pending-submits = 10
+ allow-ip = "127.0.0.1"
+ ```
+
+ Replace the placeholders (e.g., **YourSMSCID**, **SMSC_Hostname_or_IP**, **SMSC_Port**, **SMSC_System_Type**, **YourUsername**, and **YourPassword**) with the actual values provided by your SMS provider.
+
+3. You can define services that will handle incoming and outgoing SMS messages. These services specify how Kannel should process SMS requests. Here's an example of an SMS service configuration:
+
+ ```bash
+ group = sendsms-user
+ username = YourUsername
+ password = YourPassword
+ concatenation = true
+ max-messages = 3
+ ```
+
+ Adjust the settings to your needs.
+
+4. Start Kannel with the following command:
+
+ ```bash
+ bearerbox /path/to/kannel.conf
+ ```
+
+ Make sure to replace /path/to/kannel.conf with the actual path to your Kannel configuration file.
+
+# Creating a Kannel integration with Novu
+
+After setting up your Kannel, follow these steps to integrate with novu:
+
+- Visit the [Integrations Store](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-kannel) on Novu.
+- Click the "Add a provider" button.
+- Select Kannel service.
+- Choose your preferred deployment environment: `Development` or `Production`. Then Click the `Create` button.
+- Once the integration is active, you'll need to configure it. This configuration usually involves providing the necessary details for Novu to connect to your Kannel SMS gateway. These details typically include:
+
+ - **Kannel Gateway URL or IP Address**: If your Kannel SMS gateway is hosted on your server, you should use the server's IP address or hostname.
+ - **Port**: The port number through which Novu should communicate with Kannel (usually 13013, or a custom port you've configured in Kannel).
+ - **Username and Password**: If you've set up authentication for your Kannel SMS gateway, provide the username and password required for authentication:
+
+ ```bash
+ group = smsc
+ smsc = smpp
+ smsc-id = YourSMSCID
+ host = SMSC_Hostname_or_IP
+ port = SMSC_Port
+ smsc-username = YourUsername
+ smsc-password = YourPassword
+ max-pending-submits = 10
+ allow-ip = "127.0.0.1"
+ ```
+
+ In this example, **YourUsername** and **YourPassword** are the credentials you'd use for authentication.
+
+- Fill in the `From` field.
+- Click on the `Update` button.
+- You should now be able to send notifications using Kannel in Novu.
diff --git a/integrations/providers/sms/messagebird.mdx b/integrations/providers/sms/messagebird.mdx
new file mode 100644
index 00000000..0d018dd9
--- /dev/null
+++ b/integrations/providers/sms/messagebird.mdx
@@ -0,0 +1,23 @@
+---
+title: "MessageBird"
+description: "Learn how to use the messagebird provider to send sms notifications using Novu"
+---
+
+You can use the [MessageBird](https://www.messagebird.com) provider to send SMS messages to your customers using the Novu Platform with a single API to create multi-channel experiences.
+
+# Getting Started
+
+To use the MessageBird provider in the SMS channel, the first step is to create a [MessageBird account](https://www.messagebird.com/en/sign-up) and then generate an `Access Key` within the developers' section section of your MessageBird account. This access key is essential for authenticating your requests to the MessageBird API.
+
+# Creating a MessageBird integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-messagebird) page on Novu.
+- Click the "Add a provider" button.
+- Locate **MessageBird** under the SMS section. Click it and the **Next** button.
+- Select Your Environment add condition (Optional).
+- Click on the `Disabled` button and mark it as `Active`.
+- Enter the `Access Key` value.
+- Enter the `From` value.
+- Click on the **Update** button.
+
+Now it is possible to send SMS notifications using **MessageBird** in Novu.
diff --git a/integrations/providers/sms/nexmo.mdx b/integrations/providers/sms/nexmo.mdx
new file mode 100644
index 00000000..bb503668
--- /dev/null
+++ b/integrations/providers/sms/nexmo.mdx
@@ -0,0 +1,25 @@
+---
+title: "Nexmo"
+description: "Learn how to use the Nexmo provider to send sms notifications using Novu"
+---
+
+You can use the [Nexmo By Vonage](https://www.vonage.com/) provider to send SMS messages to your customers using the Novu Platform with a single API to create multi-channel experiences.
+
+# Getting Started
+
+To use the Nexmo provider in the SMS channel, the first step is to create a Nexmo account and add the API key and API Secret to the Nexmo integration on the Novu platform.
+
+# Finding the API key and secret
+
+First, [sign up for a Vonage account](https://ui.idp.vonage.com/ui/auth/login) if you don't already have one, and make a note of your API key and secret on the [dashboard getting started page](https://dashboard.nexmo.com/getting-started-guide).
+
+# Create a Nexmo integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-nexmo) page on Novu.
+- Click the "Add a provider" button.
+- Locate **Nexmo** under the SMS section and click on the **Connect** button.
+- Enter the `API key` and `API Secret`.
+- Enter a valid `From` email address.
+- Click on the `Disabled` button and mark it as `Active`.
+- Click on the **Connect** button.
+- Now it is possible to send SMS notifications using **Nexmo** in Novu.
diff --git a/integrations/providers/sms/overview.mdx b/integrations/providers/sms/overview.mdx
new file mode 100644
index 00000000..c3d54bdf
--- /dev/null
+++ b/integrations/providers/sms/overview.mdx
@@ -0,0 +1,30 @@
+---
+title: "SMS Providers Integration"
+sidebarTitle: "Overview"
+description: "Configure and manage SMS notification providers like Twilio, Nexmo, and others with Novu's notification infrastructure."
+icon: "circle-info"
+---
+
+Novu makes SMS notifications simple, scalable, and reliable, enabling seamless integration with your communication stack. Whether you're sending OTPs, updates, or transactional messages, Novu ensures your SMS notifications are delivered efficiently and effectively.
+
+With the SMS channel, you can:
+
+- **Switch Providers Effortlessly:** Integrate popular services like Twilio, Nexmo, or a custom provider
+- **Deliver at Scale:** Handle high-volume messaging with confidence
+- **Customize and Track:** Tailor SMS content dynamically and monitor delivery status in real time
+
+## Key Features
+
+- **Dynamic Messaging:** Inject user-specific data into messages for personalization
+- **Multi-Provider Support:** Switch or combine providers to maximize reliability
+- **Delivery Insights:** Track message delivery, failures, and user engagement
+- **Fallback Mechanisms:** Ensure reliable messaging with backup providers
+- **Template Management:** Simplify content creation with reusable SMS templates
+- **Streamlined API Integration:** Easily connect your backend for automated messaging workflows
+
+## Common Use Cases
+
+- **Transactional Notifications:** Send OTPs, receipts, or order updates instantly
+- **Marketing Campaigns:** Deliver promotional offers and updates to your audience
+- **Critical Alerts:** Notify users of urgent events, like security breaches or system outages
+- **Reminders and Scheduling:** Automate reminders for appointments, events, or deadlines
\ No newline at end of file
diff --git a/integrations/providers/sms/plivo.mdx b/integrations/providers/sms/plivo.mdx
new file mode 100644
index 00000000..9266c96d
--- /dev/null
+++ b/integrations/providers/sms/plivo.mdx
@@ -0,0 +1,27 @@
+---
+title: "Plivo"
+description: "Learn how to use the Plivo provider to send sms notifications using Novu"
+---
+
+You can use the [Plivo](https://www.plivo.com/) provider to send SMS messages to your customers using the Novu Platform with a single API to create multi-channel experiences.
+
+# Getting Started
+
+To use the Plivo provider in the SMS channel, the first step is to create a Plivo account and add the Account SID and Auth token to the Plivo integration on the Novu platform.
+
+# Finding the Account SID and Auth token
+
+[Sign up](https://console.plivo.com/accounts/register/) or [Login](https://console.plivo.com/accounts/login/) to your Plivo account, and make a note of your Account SID and Auth token on the [Plivo console page](https://console.plivo.com/dashboard/).
+
+# Creating a Plivo integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-plivo) page on Novu.
+- Click the "Add a provider" button.
+- Locate **Plivo** under the SMS section and click on the **Connect** button.
+- Enter the `Account SID`.
+- Enter the `Auth token`.
+- Fill in the `From` field.
+- Click on the `Disabled` button and mark it as `Active`.
+- Click on the **Connect** button.
+
+Now it is possible to send SMS notifications using **Plivo** in Novu.
diff --git a/integrations/providers/sms/sendchamp.mdx b/integrations/providers/sms/sendchamp.mdx
new file mode 100644
index 00000000..003de338
--- /dev/null
+++ b/integrations/providers/sms/sendchamp.mdx
@@ -0,0 +1,67 @@
+---
+title: "Sendchamp"
+description: "Learn how to use the Sendchamp provider to send sms notifications using Novu"
+---
+
+You can use the [Sendchamp](https://www.sendchamp.com/) provider to send SMS messages to your customers using the Novu Platform with a single API to create multi-channel experiences.
+
+## Getting Started
+
+To use the Sendchamp provider in the SMS channel, the first step is to create a Sendchamp account and add your API key and Sender ID to the Sendchamp integration on the Novu platform.
+
+## Retrieving your API Key
+
+To find your Sendchamp API key:
+
+- [Sign up](https://my.sendchamp.com/signup) or [Login](https://my.sendchamp.com/login) to your Sendchamp account.
+- Click on the Avatar icon in the top right corner of the screen, and then click `API & Integrations` from the drop-down menu.
+
+
+ 
{" "}
+
+ Alternatively, you can access the API key from the Accounts menu.
+
+- Scroll to the bottom of the sidebar (on the left) and click on `Accounts`.
+- This will display a dropdown from which you can then click on `API keys & Webhooks` to view your API key.
+
+ 
{" "}
+
+- On the API Keys page, copy the Public access key.
+
+ 
{" "}
+
+
+## Get your Sender's ID
+
+The Sender ID represents the sender of the message to your customers.
+
+To get your Sender's ID:
+
+- On the sidebar (on the menu on your left), click on `SMS`. This will display a dropdown. Click on `Sender ID` from the dropdown options.
+- On the page that appears, you'll find a list of your Sender IDs
+
+
+ 
{" "}
+
+ If you have not created one yet:
+
+- Click on the `Create Sender ID` button to request a Sender ID.
+- Fill in the form.
+- Click on `Add Sender ID` button.
+
+ 
{" "}
+
+
+Once it is approved, you can use your Sender ID as the from field on the Novu platform.
+
+## Create a Sendchamp integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-sendchamp) page on Novu.
+- Click the "Add a provider" button.
+- Locate **Sendchamp** under the SMS section and click on the **Connect** button.
+- Enter your Sendchamp API Key.
+- Fill in the `From` field.
+- Click on the `Disabled` button and mark it as `Active`.
+- Click on the **Connect** button.
+
+Now it is possible to send SMS notifications using **Sendchamp** in Novu.
diff --git a/integrations/providers/sms/simpletexting.mdx b/integrations/providers/sms/simpletexting.mdx
new file mode 100644
index 00000000..5ac0b056
--- /dev/null
+++ b/integrations/providers/sms/simpletexting.mdx
@@ -0,0 +1,24 @@
+---
+title: "SimpleTexting"
+description: "Learn how to use the SimpleTexting provider to send sms notifications using Novu"
+---
+
+You can use the [SimpleTexting](https://simpletexting.com/) SMS provider to send SMS messages to the customers using the Novu Platform with a single API to create multi-channel experiences.
+
+# Getting Started
+
+To use SimpleTexting provider in the SMS channel, the first step is to create a SimpleTexting account and grab your `API KEY` in your settings.
+
+# Creating a SimpleTexting integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-simpletexting) page on Novu.
+- Click the "Add a provider" button.
+- Locate **SimpleTexting** under the SMS section and click on the **Next** button.
+- Select Your Environment add condition (Optional).
+- Click on the `Create` button.
+- Click on the `Disabled` button and mark it as `Active`.
+- Enter the `API Key`.
+- Enter the `From` value.
+- Click on the **Update** button.
+
+Now it is possible to send SMS notifications using **SimpleTexting** in Novu.
diff --git a/integrations/providers/sms/sms-central.mdx b/integrations/providers/sms/sms-central.mdx
new file mode 100644
index 00000000..8ade8930
--- /dev/null
+++ b/integrations/providers/sms/sms-central.mdx
@@ -0,0 +1,23 @@
+---
+title: "SMS Central"
+description: "Learn how to use the SMS Central provider to send sms notifications using Novu"
+---
+
+You can use the [SMS Central](https://www.smscentral.com.au/) provider to send SMS messages to your customers using the Novu platform with a single API to create multi-channel experiences.
+
+# Getting Started
+
+To use the SMS Central provider in the sms channel, you will need to create a SMS Central account and add your SMS Central `Username` & `Password` to the SMS Central integration on the Novu platform.
+
+# Creating the SMS Central integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-smscentral) page on Novu.
+- Click the "Add a provider" button.
+- Select SMS Central service
+- Click `Next`
+- Choose your preferred deployment environment: `Development` or `Production`. Then Click the `Create` button.
+- Add `Username` & `Password`
+- Fill up the `From` section with the number you wish to send sms from.
+- Click on the `Disabled` button and mark it as `Active`.
+- Click on the **Update** button.
+- You should now be able to send notifications using SMS Central in Novu.
diff --git a/integrations/providers/sms/sms77.mdx b/integrations/providers/sms/sms77.mdx
new file mode 100644
index 00000000..03ec886b
--- /dev/null
+++ b/integrations/providers/sms/sms77.mdx
@@ -0,0 +1,24 @@
+---
+title: "SMS77"
+description: "Learn how to use the SMS77 provider to send sms notifications using Novu"
+---
+
+It is possible to use the [SMS77](https://www.sms77.io/en) provider to send SMS messages to the customers using the Novu Platform with a single API to create multi-channel experiences.
+
+# Getting Started
+
+To use the SMS77 provider in the SMS channel, the first step is to create an SMS77 account and add the personal API key to the SMS77 integration on the Novu platform.
+
+# Find the API key
+
+To find the SMS77 API key, log into the personal SMS77 account and navigate to the API Keys page by clicking on the 'Developer' tab present at the end of the sidebar. It is suggested to create a new API key for use with Novu. Copy the newly created API key.
+
+# Creating an SMS77 integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-sms77) page on Novu.
+- Click the "Add a provider" button.
+- Locate **SMS77** under the SMS section and click on the **Connect** button.
+- Enter the `API key`.
+- Click on the `Disabled` button and mark it as `Active`.
+- Click on the **Save** button.
+- Now it is possible to send SMS notifications using **SMS77** in Novu.
diff --git a/integrations/providers/sms/sns.mdx b/integrations/providers/sms/sns.mdx
new file mode 100644
index 00000000..798c3305
--- /dev/null
+++ b/integrations/providers/sms/sns.mdx
@@ -0,0 +1,25 @@
+---
+title: "SNS"
+description: "Learn how to use the SNS provider to send sms notifications using Novu"
+---
+
+You can use the [SNS](https://aws.amazon.com/sns/) provider to send transactional emails to your customers using the Novu Platform with a single API to create multi-channel experiences.
+
+# Getting Started
+
+Before you can use SNS as your SMS provider in the Novu platform, you'll need to set up an Amazon Web Services (AWS) account and configure the necessary settings. Here are the steps to get started:
+
+- **Create an AWS Account**: If you don't already have an AWS account, you'll need to create one. You can sign up for an AWS account on the [AWS website](https://aws.amazon.com/).
+- **Set Up Amazon SNS**: After you've created your AWS account, navigate to the AWS Management Console. In the Services menu, locate and click on "Simple Notification Service (SNS)." Follow the prompts to set up SNS for your account.
+- **Configure SMS Preferences**: In your SNS dashboard, configure your SMS preferences. This includes setting up your sender ID and opting in for SMS messaging.
+- **Create Access Keys**: To access SNS programmatically, you'll need to create AWS Access Keys. These keys are used to authenticate your integration with the Novu platform. Go to the [AWS Identity and Access Management console](https://signin.aws.amazon.com/) to create access keys.
+
+# Create an SNS integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-sms-sns) page on Novu.
+- Click the "Add a provider" button.
+- Choose your preferred deployment environment: `Development` or `Production`. Then Click the `Create` button.
+- Enter your `Access Key ID`, `Secret Access key`, and `AWS region`.
+- Click on the `Disabled` button and mark it as `Active`.
+- Click on the `Update` button.
+- You should now be able to send SMS notifications using **SNS** in Novu.
diff --git a/integrations/providers/sms/telnyx.mdx b/integrations/providers/sms/telnyx.mdx
new file mode 100644
index 00000000..cdd34c7d
--- /dev/null
+++ b/integrations/providers/sms/telnyx.mdx
@@ -0,0 +1,47 @@
+---
+title: "Telnyx"
+description: "Learn how to use the Telnyx provider to send sms notifications using Novu"
+---
+
+You can use the [Telnyx](https://telnyx.com/) provider to send transactional emails to your customers using the Novu Platform with a single API to create multi-channel experiences.
+
+# Getting Started
+
+To use the Telnyx provider in the SMS channel, you will need to create a Telnyx account and add your API key to the Telnyx integration on the Novu platform.
+
+# Finding the API Key
+
+To find your Telnyx API key:
+
+- Log into your Telnyx account.
+- Navigate to Account Setting.
+- Then go to [Keys & Credentials](https://portal.telnyx.com/#/app/api-keys).
+- You can copy the API key from there.
+- Alternatively, you can create an API key by tapping on the Create API Key button.
+
+Before copying it, make sure its status is showing active.
+
+# Finding the Message Profile ID
+
+To get your Message profile ID:
+
+- Navigate to [Messaging](https://portal.telnyx.com/#/app/messaging) to find the profiles.
+- Make sure you created a Telnyx Messaging Profile previously. Learn more [here](https://developers.telnyx.com/docs/v2/messaging/quickstarts/portal-setup).
+- Go to the active Messaging Profile.
+- Copy the profile ID.
+
+# Making sure that the From address is valid
+
+A valid from address must be a valid phone number in +E.164 format, a short code, or an alphanumeric sender ID associated with the sending messaging profile. Alphanumeric sender IDs must be between 1 and 11 characters long, and can only contain ASCII letters, numbers, and spaces. They must contain at least one letter.
+
+# Creating a Telnyx integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations) page on the Novu.
+- Click the "Add a provider" button.
+- Locate Telnyx and click on the **Connect** button.
+- Enter your Telnyx API Key.
+- Fill in the Message profile ID field.
+- Enter the Valid From address.
+- Click on the `Disabled` button and `mark it as Active`.
+- Click on the **Save** button.
+- You should now be able to send notifications using Telnyx in Novu.
diff --git a/integrations/providers/sms/termii.mdx b/integrations/providers/sms/termii.mdx
new file mode 100644
index 00000000..bd819aa4
--- /dev/null
+++ b/integrations/providers/sms/termii.mdx
@@ -0,0 +1,64 @@
+---
+title: "Termii"
+description: "Learn how to use the Termii provider to send sms notifications using Novu"
+---
+
+You can use the [Termii](https://termii.com/) provider to send SMS messages to your customers using the Novu Platform with a single API to create multi-channel experiences.
+
+## Getting Started
+
+To use the Termii provider in the SMS channel, the first step is to create a Termii account and add your API key and Sender ID to the Termii integration on the Novu platform.
+
+## Retrieving your API Key
+
+To find your Termii API key:
+
+- [Sign up](https://accounts.termii.com/#/register) or [Login](https://accounts.termii.com/#/login) to your Termii account.
+- Navigate to your [dashboard](https://accounts.termii.com/#/).
+- Then scroll to the bottom of the page to find your API key.
+
+
+ 
{" "}
+
+ Alternatively, you can find the API key on the Settings page.
+
+- Scroll to the bottom of the sidebar (on the left) and click on settings.
+- This will display a dropdown from which you can then click on `API Token` to view your API key.
+
+ 
{" "}
+
+
+## Getting your Sender's ID
+
+Sender IDs allow you to brand your messages as you send them to your customers.
+
+To get your Sender's ID:
+
+- On the sidebar (on the menu on your left), click on `Rental`. This will display a dropdown. Click on `SMS Sender IDs` from the dropdown options.
+- On the page that appears, you'll find a list of your Sender IDs
+
+
+ 
{" "}
+
+
+If you have not created one yet:
+
+- Click on the `Make a new request` button to request a Sender ID.
+- Fill in the form
+- Click on `Save`
+
+
+ 
{" "}
+
+
+## Creating a Termii integration with Novu
+
+- Visit the [Integrations](https://dashboard-v2.novu.co/integrations) page on Novu.
+- Click the "Add a provider" button.
+- Locate **Termii** under the SMS section and click on the **Connect** button.
+- Enter your Termii API Key.
+- Fill in the `From` field.
+- Click on the Disabled button and mark it as Active.
+- Click on the **Connect** button.
+
+Now it is possible to send SMS notifications using **Termii** in Novu.
diff --git a/integrations/providers/sms/twilio.mdx b/integrations/providers/sms/twilio.mdx
new file mode 100644
index 00000000..92c31b32
--- /dev/null
+++ b/integrations/providers/sms/twilio.mdx
@@ -0,0 +1,54 @@
+---
+title: "Twilio"
+description: "Learn how to use the Twilio provider to send sms notifications using Novu"
+---
+
+You can utilize the [Twilio](https://www.twilio.com/) API to communicate with your customers using SMS messaging. Let’s look at how you can do that:
+
+# Setting up Twilio
+
+1. First, go to [Twilio](https://www.twilio.com/) and create an account, probably starting with their free trial.
+2. You’ll be asked to verify your email and your phone number. Get them verified.
+3. Once you’re done with that, you’ll get an option to ‘get a Twilio phone number’ from your Twilio console.
+4. Click on it to get your Twilio phone number.
+
+When first using Twilio there should be an option to get a Twilio phone number in the main console. Otherwise, you may have to [Buy](https://console.twilio.com/us1/develop/phone-numbers/manage/search?frameUrl=%2Fconsole%2Fphone-numbers%2Fsearch%3Fx-target-region%3Dus1¤tFrameUrl=%2Fconsole%2Fphone-numbers%2Fsearch%3FisoCountry%3DUS%26searchTerm%3D%26searchFilter%3Dleft%26searchType%3Dnumber%26x-target-region%3Dus1%26__override_layout__%3Dembed%26bifrost%3Dtrue) a number from that link to begin using it. Assuming this is the first run though, utilize the free number given to us.
+
+Simply follow one of their many [Tutorials](https://www.twilio.com/docs/usage/requests-to-twilio) within their docs to understand every part of the process.
+
+Irrespective of the language you use, the process is the same:
+
+- Load the Account SID and Auth token into the code, using some sort of safe environment such as .env variables. Nobody should have access to this but you.
+- Create a client object from Twilio that take the SID and Token as variables then create a message with the client.
+- A message is an object that has three things:
+ - that free number from earlier,
+ - the number you would like to send to, and
+ - a body message that you want to send through SMS.
+
+# Creating a Twilio integration with Novu
+
+Creating a Twilio integration with Novu is quite simple. Just follow these steps:
+
+- Visit the [Integrations Store](https://dashboard-v2.novu.co/integrations) on Novu.
+- Click the "Add a provider" button.
+- Locate **Twilio** and click on the `Disabled` button and mark it as `Active`.
+- Click on the **Connect** button.
+- Go to your [Console](https://console.twilio.com/) on Twilio and access the Account Info section at the bottom of the page
+- Enter your `Account SID`, `Auth Token` and `Twilio Phone Number`.
+- Click on the **Save** button.
+- You should now be able to send SMS notifications using **Twilio** in Novu.
+
+## Sending an WhatsApp message with Twillio
+
+To send a WhatsApps message with Twillio integration prefix the phone number of the subscriber with `whatsapp:` as shown below.
+
+```ts
+await novu.trigger("
+
+
+ 
+
+
+ 
+
+
+Click `Add Setting` to add your new setting.
+
+
+ 
+
+
+Now, while configuring the function, Add these three variables to be then used in the code exposed in the settings function param.
+
+
+ 
+
+
+#### Test the destination function
+
+You can test your code directly from the editor in two ways:
+
+**1. Use sample events for testing**
+Click `Use Sample Event` and select the source to use events from.
+
+
+ 
+
+
+Click `Run` to test your function with the event you selected.
+
+**2. Test using manual input**
+You can also manually include your own JSON payload of a Segment event, instead of fetching a sample from one of your workspace sources.
+
+
+ 
+
+
+**Here is the the event example JSON we will use**
+
+```JSON
+{
+ "type": "track",
+ "event": "User Abandoned Cart",
+ "properties": {
+ "name": "abandoned-cart-recovery-workflow",
+ "user": {
+ "subscriberId": "63da8ee0c037e013fd790ffd",
+ "email": "hi@hi.com",
+ "firstName": "John",
+ "lastName": "Doe"
+ },
+ "environment": "development"
+ }
+}
+```
+
+We will now execute the function based on the manual event input we've provided. This function sends a trigger to Novu, prompting to take action and send the user an email to return and the purchase.
+
+
+ 
+
+
+Whether you chose the first or second option to test your Destination Function, you can also check if the function triggered your workflow and whether it was delivered through Novu's [Activity Feed](https://dashboard-v2.novu.co/activities?utm_campaign=docs-guides-segment).
+
+
+ 
+
+
+This guide was inspired by the following resources:
+
+- https://discord.com/channels/895029566685462578/1060308007658987571/1077377322547687475
+- https://segment.com/docs/getting-started/05-data-to-destinations/
+- https://aviyel.com/post/3381/how-to-integrate-novu-with-segment
diff --git a/introduction.mdx b/introduction.mdx
index 27f9d09b..308879d5 100644
--- a/introduction.mdx
+++ b/introduction.mdx
@@ -1,6 +1,6 @@
---
title: Introduction
-description: 'Welcome to the home of novu documentation!'
+description: "Welcome to the home of novu documentation!"
---
{" "}
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+Let's build and run our iOS application to see if everything works correctly.
+
+
+ 
{" "}
+
+
+Go to the Firebase documentation website, go to docs here, and select Cloud Messaging.
+We will follow this guide to set up cloud messaging inside the app.
+
+You can read more about how Firebase Cloud Messaging works by reading their [official documentation](https://firebase.google.com/docs/cloud-messaging/ios/client).
+
+
+ 
{" "}
+
+
+Go to iOS+ and click on the `Set up an Apple platforms client` section.
+
+
+ 
{" "}
+
+
+The first thing that we need to do is add Firebase to our iOS app.
+Let's create a new Firebase project inside of the console.
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+## Create a Firebase project
+
+Select a name for your project.
+
+
+ 
{" "}
+
+
+Then, add Google Analytics to the Firebase project.
+
+
+ 
{" "}
+
+
+Here, you can select your Google account.
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+We will click on Add Firebase to your iOS app.
+
+
+ 
{" "}
+
+
+We first need to add the bundle name, so go to your iOS Xcode project and copy and paste the bundle name.
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+Download the `.plist` file and put it in the root of your project.
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+You can put it right under `info.plist` file.
+
+
+ 
{" "}
+
+
+We need to add the Firebase SDK using the Swift package manager.
+Copy this https://github.com/firebase/firebase-ios-sdk URL and then go to 'File`->`Add Package Dependencies...`.
+Paste that URL in the top right.
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+We must add the initialization code to the `AppDelegates.swift` file.
+
+Let's import the "FirebaseCore" dependency by adding `import FirebaseCore` to the beginning of the file.
+
+Then, we will copy `firebaseapp.configure()` and place it in `didFinishLaunchingWithOptions` method.
+
+
+ 
{" "}
+
+
+```Swift
+
+//
+// AppDelegate.swift
+// PushNotificationDemo
+//
+// Created by Emillien Pearce.
+//
+
+import UIKit
+import FirebaseCore //Here
+
+@main
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+
+
+ func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+ // Override point for customization after application launch.
+ FirebaseApp.configure() //Here
+ FirebaseConfiguration.shared.setLoggerLevel(.min)
+ return true
+ }
+
+ // MARK: UISceneSession Lifecycle
+
+ func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
+ // Called when a new scene session is being created.
+ // Use this method to select a configuration to create the new scene with.
+ return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
+ }
+
+ func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set
{" "}
+
+
+ 
{" "}
+
+
+Let's build and run our project and see if we get Firebase log messages in the console.
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+## Create and upload our APNs authentication key
+
+We will create and upload our APNs authentication key to the Firebase project settings.
+
+
+ 
{" "}
+
+
+Navigate to [Apple Developer Member Center](https://developer.apple.com/account).
+
+Head to the "Keys" section under "Certificates, IDs & Profiles".
+
+
+ 
{" "}
+
+
+Create a new key.
+
+
+ 
{" "}
+
+
+Select "Apple Push Notification Service".
+
+
+ 
{" "}
+
+
+Click "Register".
+
+
+ 
{" "}
+
+
+We have to download this key and upload it into Firebase.
+
+
+ 
{" "}
+
+
+Head to "Project Settings".
+
+
+ 
{" "}
+
+
+Click on Cloud Messaging, then click "Upload APNs Authentication Key".
+
+
+ 
{" "}
+
+
+Now we can upload the dots p8 file.
+
+
+ 
{" "}
+
+
+You must enter your `Key ID` and `Team ID`, which you can find in the top right corner.
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+## Register for Remote Notifications
+
+
+ 
{" "}
+
+
+1. Copy this code block and place it inside the `AppDelegate.swift` file using the `didFinishLaunchingWithOptions` method.
+ We paste this code block under `firebaseApp.configure()`.
+
+2. We need to conform to this delegate, so we will also create an `AppDelegate` extension at the bottom for `UNUserNotificationCenterDelegate`.
+
+3. Add `import FirebaseMessaging` to the file.
+
+```Swift
+
+//
+// AppDelegate.swift
+// PushNotificationDemo
+//
+// Created by Emillien Pearce.
+//
+
+import UIKit
+import FirebaseCore
+import FirebaseMessaging
+
+@main
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+
+
+ func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+ // Override point for customization after application launch.
+ FirebaseApp.configure()
+
+ // Register for Remote Notitifcations
+
+ UNUserNotificationCenter.current().delegate = self
+
+ let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
+ UNUserNotificationCenter.current().requestAuthorization(
+ options: authOptions,
+ completionHandler: { _, _ in }
+ )
+
+ application.registerForRemoteNotifications()
+
+
+ return true
+ }
+
+ // MARK: UISceneSession Lifecycle
+
+ func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
+ // Called when a new scene session is being created.
+ // Use this method to select a configuration to create the new scene with.
+ return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
+ }
+
+ func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set
{" "}
+
+
+ 
{" "}
+
+
+We will now add a 'Messaging' delegate extension to `AppDelegate.swift` file.
+
+
+ 
{" "}
+
+
+```Swift
+
+//
+// AppDelegate.swift
+// PushNotificationDemo
+//
+// Created by Emillien Pearce on 13/01/2024.
+//
+
+import UIKit
+import FirebaseCore
+import FirebaseMessaging
+
+@main
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+
+
+ func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+ // Override point for customization after application launch.
+ FirebaseApp.configure()
+ FirebaseConfiguration.shared.setLoggerLevel(.min)
+
+
+ // Register for Remote Notitifcations
+
+ UNUserNotificationCenter.current().delegate = self
+
+ let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
+ UNUserNotificationCenter.current().requestAuthorization(
+ options: authOptions,
+ completionHandler: { _, _ in }
+ )
+
+ application.registerForRemoteNotifications()
+
+ // Messaging Delegate
+
+ Messaging.messaging().delegate = self
+
+
+ return true
+ }
+
+ // MARK: UISceneSession Lifecycle
+
+ func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
+ // Called when a new scene session is being created.
+ // Use this method to select a configuration to create the new scene with.
+ return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
+ }
+
+ func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set
{" "}
+
+
+```Swift
+
+//
+// AppDelegate.swift
+// PushNotificationDemo
+//
+// Created by Emillien Pearce.
+//
+
+import UIKit
+import FirebaseCore
+import FirebaseMessaging
+
+@main
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+ let gcmMessageIDKey = "gcm.Message_ID"
+
+ func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+ // Override point for customization after application launch.
+ FirebaseApp.configure()
+ FirebaseConfiguration.shared.setLoggerLevel(.min)
+
+
+ // Register for Remote Notitifcations
+
+ UNUserNotificationCenter.current().delegate = self
+
+ let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
+ UNUserNotificationCenter.current().requestAuthorization(
+ options: authOptions,
+ completionHandler: { _, _ in }
+ )
+
+ application.registerForRemoteNotifications()
+
+ // Messaging Delegate
+
+ Messaging.messaging().delegate = self
+
+
+ return true
+ }
+
+ // MARK: UISceneSession Lifecycle
+
+ func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
+ // Called when a new scene session is being created.
+ // Use this method to select a configuration to create the new scene with.
+ return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
+ }
+
+ func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set
{" "}
+
+
+Click on the plus sign (+) and select `Background Modes`.
+
+
+ 
{" "}
+
+
+**Select the following options:**
+
+- Background Fetch
+- Remote Notifications
+- Background Processing
+
+
+ 
{" "}
+
+
+Add `Push Notifications` capabilities.
+
+
+ 
{" "}
+
+
+## App Build
+
+
+ 
{" "}
+
+
+It will ask if you want to receive notifications, and we will allow it.
+
+
+ 
{" "}
+
+
+## Cloud Message Test
+
+In your Firebase project, navigate to 'engage' section and click on 'messaging'.
+
+
+ 
{" "}
+
+
+Click on "Send your first message".
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+We're going to enter the `notification title` and the `notification text`, then we're going to send the test message.
+
+
+ 
{" "}
+
+
+We must copy and paste this FCM registration token to confirm our device (A physical or a simulator). You can find it in your Xcode console.
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+Click on 'Test'.
+
+
+ 
{" "}
+
+
+You should see the notification on your device!
+
+
+ 
{" "}
+
+
+## Novu account creation
+
+
+ 
{" "}
+
+
+You can immediately configure FCM as a Push channel provider or navigate to the Integration Store.
+
+
+ 
{" "}
+
+
+## Connecting FCM as a provider
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+You only need to configure FCM with Novu with the Firebase Service Accounts private key.
+
+To acquire the account key JSON file for your service account, follow this instructions:
+
+1. Select your project. Click the gear icon on the top of the sidebar.
+2. Head to project settings.
+3. Navigate to the service account tab.
+4. Click "Generate New Private Key", then confirm by clicking "Generate Key".
+5. Clicking Generate Key will download the JSON file.
+6. Once the file is on your machine, paste the entire JSON file content in the Service Account field of the FCM provider in the integration store on Novu’s web dashboard.
+
+Make sure your service account key JSON content contains these fields:
+
+```JSON
+
+{
+ "type": "service_account",
+ "project_id": "PROJECT_ID",
+ "private_key_id": "PRIVATE_KEY_ID",
+ "private_key": "PRIVATE_KEY",
+ "client_email": "FIREBASE_ADMIN_SDK_EMAIL",
+ "client_id": "CLIENT_ID",
+ "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+ "token_uri": "https://oauth2.googleapis.com/token",
+ "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+ "client_x509_cert_url": "CLIENT_X509_CERT_URL"
+}
+
+```
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+## Creating a workflow
+
+In Novu, creating a workflow means establishing a blueprint for sending notifications within your app. This unified structure ties together email, in-app messages, SMS, push notifications, and chat into **one entity**.
+
+Each workflow has a unique name and identifier and includes customized content for various channels, using `{{handlebars}}` variables for personalization.
+
+This ensures consistent platform notifications and allows dynamic adjustments for individual subscribers, scenarios, and use cases.
+
+Workflow creation is for streamlining automated notifications, enabling teams to communicate effectively without extensive technical expertise.
+
+
{" "}
+
+
+ 
{" "}
+
+ 
{" "}
+
+ 
{" "}
+
+ 
{" "}
+
+
+
+
+ 
+ 
+
+```JSON
+
+ curl --request PUT \
+ --url https://api.novu.co/v1/subscribers/{subscriber_id}/credentials \
+--header 'Content-Type: application/json' \
+ --header 'Authorization: ApiKey 
{" "}
+
+
+## Dynamic Content
+
+When we were creating the first workflow, we "Hardcoded" the content of the notification.
+
+Now, we will determine the content when calling the API.
+
+1. In the workflow, we should change the values of the `title` and the `body` to `{{title}}` and `{{body}}`.
+ That way, we could insert values through the payload of the API call.
+
+
+ 
{" "}
+
+
+2. Add a 'payload' object to the API call.
+
+```JSON
+
+curl --location --request POST 'https://api.novu.co/v1/events/trigger' \
+ --header 'Authorization: ApiKey 
{" "}
+
+
+## Sound of a notification
+
+The name of a sound file in your app's main bundle or in the Library/Sounds folder of your app's container directory.
+Specify the string "default" to play the system sound.
+
+Use this key for regular notifications. For critical alerts, use the sound dictionary instead.
+
+```JSON
+
+curl --location --request POST 'https://api.novu.co/v1/events/trigger' \
+ --header 'Authorization: ApiKey 
{" "}
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+Select **Finish**, and when prompted, select **Activate**.
+
+
+ 
{" "}
+
+
+When you added the Firebase package to your project, it was only added to the your "main" (In my case it's "PushNotificationDemo") target, so now you need to add the necessary dependency to your new extension.
+Open your app’s project settings and select the name you picked for the extention under Targets.
+
+Under Frameworks and Libraries, select the + button, and search for FirebaseMessaging. Then, select Add. Your project should reflect the image below:
+
+
+ 
{" "}
+
+
+Select the + button, and search for FirebaseMessaging. Then, select Add.
+
+
+ 
{" "}
+
+
+ 
{" "}
+
+
+Now, open `NotificationService.swift`. This file is where you can customize notifications before the user sees them.
+
+First, add the following import to the top of the file:
+`import FirebaseMessaging`
+
+Next, replace the contents of `didReceive(_:withContentHandler:)` with the following:
+
+```Swift
+
+self.contentHandler = contentHandler
+bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
+
+if let bestAttemptContent = bestAttemptContent {
+// Modify the notification content here...
+bestAttemptContent.title = "\(bestAttemptContent.title)"
+
+// Call FIRMessaging extension helper API.
+
+if let messagingContentHandler = self.contentHandler {
+Messaging.serviceExtension().populateNotificationContent(bestAttemptContent, withContentHandler: messagingContentHandler)
+ }
+}
+
+```
+
+Typically, you’d have to search the field containing the image URL, download the image, and finish the presentation with the picture as an attachment.
+Here, you’re using Firebase’s `FIRMessagingExtensionHelper` to perform all that work automatically in a straightforward helper method call.
+
+Remember, iOS only allows you to download your attached image. If the extension’s code takes too long to run, the system will call `serviceExtensionTimeWillExpire()`.
+This gives you a chance to gracefully finish up anything you are doing in the extension or to simply present the notification as is, which is the default implementation.
+
+This is the entire `NotificationService.swift` file.
+
+```Swift
+
+//
+// NotificationService.swift
+// Rich Notifications
+//
+// Created by Emillien Pearce.
+//
+
+import UserNotifications
+import FirebaseMessaging
+
+class NotificationService: UNNotificationServiceExtension {
+
+ var contentHandler: ((UNNotificationContent) -> Void)?
+ var bestAttemptContent: UNMutableNotificationContent?
+
+ override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
+
+ self.contentHandler = contentHandler
+ bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
+
+ if let bestAttemptContent = bestAttemptContent {
+ // Modify the notification content here...
+ bestAttemptContent.title = "\(bestAttemptContent.title)"
+
+ // Call FIRMessaging extension helper API.
+ if let messagingContentHandler = self.contentHandler {
+ Messaging.serviceExtension().populateNotificationContent(bestAttemptContent, withContentHandler: messagingContentHandler)
+ }
+ }
+ }
+
+ override func serviceExtensionTimeWillExpire() {
+ // Called just before the extension will be terminated by the system.
+ // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
+ if let contentHandler = contentHandler, let bestAttemptContent = bestAttemptContent {
+ contentHandler(bestAttemptContent)
+ }
+ }
+
+}
+
+```
+
+Let's **rebuild** our app again!
+
+
+ 
{" "}
+
+
+When making the API call, we should include:
+
+- "mutable-content": 1 inside the "aps" object.
+- "image" in "fcm_options" object,
+- URL address of the image.
+
+```JSON
+
+curl --location --request POST 'https://api.novu.co/v1/events/trigger' \
+ --header 'Authorization: ApiKey 
{" "}
+
+
+ 
{" "}
+
+
+## Sending actionable notifications
+
+1. Define Notification Actions:
+
+In your `AppDelegate.swift` file, you should define the notification actions you want to add.
+You can do this by creating a `UNNotificationAction` for each action you want to include.
+For example, let's add two actions: "Accept" and "Reject".
+
+```Swift
+
+// Add these lines inside your AppDelegate class, preferably below the existing extensions.
+
+extension UNNotificationAction {
+ static let accept = UNNotificationAction(
+ identifier: "ACCEPT_ACTION",
+ title: "Accept",
+ options: [.foreground]
+ )
+
+ static let reject = UNNotificationAction(
+ identifier: "REJECT_ACTION",
+ title: "Reject",
+ options: [.destructive, .foreground]
+ )
+}
+
+```
+
+2. Register Notification Category:
+
+ You need to register the notification category with the actions you defined in your `didFinishLaunchingWithOptions` method:
+
+ ```
+ func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+ // ... (your existing code)
+
+ // Register notification category
+ let acceptAction = UNNotificationAction.accept
+ let rejectAction = UNNotificationAction.reject
+
+ let messageCategory = UNNotificationCategory(
+ identifier: "MESSAGE_CATEGORY",
+ actions: [acceptAction, rejectAction],
+ intentIdentifiers: [],
+ options: []
+ )
+
+ UNUserNotificationCenter.current().setNotificationCategories([messageCategory])
+
+ return true
+
+ }
+
+```
+
+3. Handle Action Taps:
+
+Now, you need to handle the action taps in the `userNotificationCenter(_:didReceive response:)` method of your `AppDelegate`.
+You can check which action was tapped by inspecting the `response.actionIdentifier` property:
+
+```Swift
+
+func userNotificationCenter(_ center: UNUserNotificationCenter,
+ didReceive response: UNNotificationResponse) async {
+ let userInfo = response.notification.request.content.userInfo
+
+ if response.actionIdentifier == UNNotificationAction.accept.identifier {
+ // Handle the "Accept" action
+ print("User tapped Accept")
+ // Perform the desired action for "Accept"
+ } else if response.actionIdentifier == UNNotificationAction.reject.identifier {
+ // Handle the "Reject" action
+ print("User tapped Reject")
+ // Perform the desired action for "Reject"
+ } else {
+ // Handle other actions or default behavior
+ print("User tapped an action with identifier: \(response.actionIdentifier)")
+ }
+}
+
+```
+
+Your full `AppDelegate.swift` file should look like this:
+
+```Swift
+
+//
+// AppDelegate.swift
+// PushNotificationDemo
+//
+// Created by Emillien Pearce.
+//
+
+import UIKit
+import FirebaseCore
+import FirebaseMessaging
+
+@main
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+ let gcmMessageIDKey = "gcm.Message_ID"
+
+ func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+ // Override point for customization after application launch.
+ FirebaseApp.configure()
+ FirebaseConfiguration.shared.setLoggerLevel(.min)
+
+
+ // Register for Remote Notitifcations
+
+ UNUserNotificationCenter.current().delegate = self
+
+ let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
+ UNUserNotificationCenter.current().requestAuthorization(
+ options: authOptions,
+ completionHandler: { _, _ in }
+ )
+
+ application.registerForRemoteNotifications()
+
+ // Register notification category
+ let acceptAction = UNNotificationAction.accept
+ let rejectAction = UNNotificationAction.reject
+
+ let messageCategory = UNNotificationCategory(
+ identifier: "MESSAGE_CATEGORY",
+ actions: [acceptAction, rejectAction],
+ intentIdentifiers: [],
+ options: []
+ )
+
+ UNUserNotificationCenter.current().setNotificationCategories([messageCategory])
+
+ // Messaging Delegate
+
+ Messaging.messaging().delegate = self
+
+
+ return true
+ }
+
+ // MARK: UISceneSession Lifecycle
+
+ func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
+ // Called when a new scene session is being created.
+ // Use this method to select a configuration to create the new scene with.
+ return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
+ }
+
+ func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set
{" "}
+
+
+## Additional resources
+
+- [Generating a remote notification by Apple](https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server/generating_a_remote_notification)
+- [Sending notification requests to APNs](https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server/sending_notification_requests_to_apns)
diff --git a/legacy-guides/add-digest-to-email-notifications.mdx b/legacy-guides/add-digest-to-email-notifications.mdx
new file mode 100644
index 00000000..5b915174
--- /dev/null
+++ b/legacy-guides/add-digest-to-email-notifications.mdx
@@ -0,0 +1,280 @@
+---
+title: "How to Add Digest to Email Notifications"
+description: "Use the digest functionality to send email notifications"
+---
+
+# Introduction
+
+In this guide, you’ll learn how to add digest functionality to email notifications. But before exploring the actual code, let’s understand what a digest notification is and how it works.
+
+You can find the entire code(frontend as well as backend) for this app [here](https://github.com/novuhq/digest-email-app).
+
+
{" "}
+
+ Once you click the `create workflow` button, you’ll see a dropdown. Select `blank
+ workflow` from the dropdown:
+
+ 
{" "}
+
+ You’ll now be taken to the workflow editor:
+
+ 
{" "}
+
+ Once here, you can add the channels you want to use for sending notifications
+ and configure them. For this guide, we’ll use the `Email` channel. You’ll also
+ see the `Digest` action on the right sidebar.
+
+
{" "}
+
+The `digest` node allows you to set a specific time interval for when notifications
+should be sent:
+
+ 
{" "}
+
+Once, you’ve configured it. Go ahead and configure the `email` channel as per your
+need:
+
+ 
{" "}
+
+Here’s a brief explanation of all the options:
+
+- **1-Preview:** This shows you a glimpse of what the email notification item will look like when delivered to the client.
+- **2-Sender Name:** Lets you set the sender name for emails that the client will receive.
+- **3-Subject:** This lets you define the subject line for the emails that the client will receive.
+- **4-Filter:** This feature allows you to configure the criteria for delivering notifications. For instance, you can apply a filter based on a subscriber's online status to send them an email if they were online within the last hour.
+- **5-Custom Code** - In custom code, you can write custom digest templates to show some/all parts of a message.
+- **6-Test** - This allows you to send a test email to test if everything is working as per your wish.
+
+You can write your own digest template in the 'custom code' section or just follow this guide as shown in the picture above. Once you’re done configuring this to your liking, click on the `update` button on the top right.
+
+It’ll automatically create a trigger code that you can use in your app. To get it, click on the `get snippet` button on the top right and copy it:
+
+
+ 
{" "}
+
+Now, let’s see how to add Novu to our app!
+
+# Add Novu to the Backend and Configure it
+
+In your backend, install the novu package using the following code:
+
+```bash
+npm install @novu/node
+
+```
+
+Now, create a route that you want to hit when called from the front end. In our demo app, this is the route:
+
+```jsx
+import express from "express";
+
+import { getEmailDigest } from "../controller/emaildigest.js";
+
+const router = express.Router();
+
+router.post("/sending-email-digest", getEmailDigest);
+
+export default router;
+```
+
+Now, we need to write a controller function that will handle the logic for what is to be sent in the trigger function’s payload. In our case, this is the controller function:
+
+```jsx
+import { sendEmailDigest } from "../novu/novu.js";
+
+export const getEmailDigest = async (req, res) => {
+ const { notif, email } = req.body;
+ try {
+ await sendEmailDigest(notif, email);
+ res.status(201).json({ message: "success", notif: notif });
+ } catch (error) {
+ res.status(409).json({ message: error.message });
+ }
+};
+```
+
+To make it modular, we’ll keep the trigger code in a separate function in a separate file (`novu.js`, in our case) and the trigger function is getting called in the controller function above by the name `getEmailDigest`.
+
+If you’re following the guide, you’ve already copied the trigger function. But before we can add it to our app, we need one key thing - Subscribers.
+
+Subscribers are users to which the notifications are sent. You can see a list of subscribers in the [Novu dashboard](https://dashboard-v2.novu.co/subscribers?utm_campaign=docs-digests) as well.
+
+In our app, we’ll create a subscriber in Node.js as we’re writing our backend in Node.js, but we also have backend [SDKs](/sdks/introduction) ([Node.js](https://github.com/novuhq/novu/tree/next/packages/node), [PHP](https://github.com/novuhq/novu-php), [.NET](https://github.com/novuhq/novu-dotnet), [Elixir](https://github.com/novuhq/novu-elixir), [Go](https://github.com/novuhq/go-novu), [Ruby](https://github.com/novuhq/novu-ruby), [Python](https://github.com/novuhq/novu-python), and [Kotlin](https://github.com/novuhq/novu-kotlin)) to choose from. The recommended way to create a subscriber in NodeJS is as follows:
+
+```jsx
+await novu.subscribers.identify("digestEmailSub", {
+ firstName: "digest email subscriber",
+ email: email,
+});
+```
+
+Here, we’re creating a subscriber with the `subscriberID` of `digestEmailSub.` In most real-world scenarios, the `subscriberId` should be an alphanumeric entity like `adfa67y87ad0`. You can read more about subscribers [here](https://docs.novu.co/platform/subscribers/).
+
+Back in our app, we can now add the trigger function:
+
+```jsx
+import { Novu } from "@novu/node";
+
+export const sendEmailDigest = async (notif, email) => {
+ const novu = new Novu(process.env.YOUR_NOVU_SECRET_KEY);
+ await novu.subscribers.identify("digestEmailSub", {
+ firstName: "digest email subscriber",
+ email: email,
+ });
+
+ novu.trigger("emaildigestworkflow", {
+ to: {
+ subscriberId: "digestEmailSub",
+ email: email,
+ },
+ payload: {
+ notif: notif,
+ },
+ });
+};
+```
+
+Now, we just need to hit the route defined above from the front end.
+
+# Hit the backend route from the front end
+
+From the front end, we just need to hit the route we had defined above. Below, I'm sharing the body component of the demo app I created to illustrate this:
+
+```jsx
+const Body = () => {
+ const [formInput, setFormInput] = useState({ notif: "", email: "" });
+ const [buttonClicked, setButtonClicked] = useState(false);
+
+ const onSubmitHandler = async (e) => {
+ e.preventDefault();
+ const response = await fetch(
+ "https://emaildigestbackend.onrender.com/api/v1/sending-email-digest",
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(formInput),
+ }
+ );
+ console.log(response.data);
+ setFormInput({ notif: "" });
+ };
+
+ const handleClick = () => {
+ setButtonClicked(true);
+
+ // Reset the button feedback after a certain duration
+ setTimeout(() => {
+ setButtonClicked(false);
+ }, 100);
+ };
+
+ const onChangeHandler = (e) => {
+ const value =
+ e.target.name === "email" ? e.target.value.trim() : e.target.value;
+
+ setFormInput((prev) => ({
+ ...prev,
+ [e.target.name]: value,
+ }));
+ };
+ return (
+ + Don't know how to? Start{" "} + + {" "} + here + +
+ +
{" "}
+
+
+In this app, when we enter the email id, some text in the input box, and click send, the notification appears in the inbox after the delay specified above (when we’re creating the workflow).
+
+This is how we add digest to email notifications!
diff --git a/legacy-guides/add-digest-to-inapp-notifications.mdx b/legacy-guides/add-digest-to-inapp-notifications.mdx
new file mode 100644
index 00000000..b47a89ad
--- /dev/null
+++ b/legacy-guides/add-digest-to-inapp-notifications.mdx
@@ -0,0 +1,323 @@
+---
+title: "How to Add Digest to In-App Notifications"
+description: "Leverage the digest functionality to send in-app notifications"
+---
+
+## Introduction
+
+In this guide, you’ll learn how to add digest notifications to a React app. But before exploring the actual code, let’s understand what a digest notification is and how it works.
+
+You can find the entire code(frontend as well as backend) for this app [here](https://github.com/novuhq/digest-learning-app/tree/main).
+
+### What is a Digest Notification?
+
+Often times when you associate notifications with user activity, the end user can be bombarded with messages because of the nature of the activity. Take for example the case of commenting in the context of a social media app. If you were to send a notification to a user for every comment they receive, and they happen to receive 100 comments, it could lead to user fatigue since you would have to send 100 messages.
+
+This is where digest notifications come into the picture!
+
+A digest notification is a notification that consolidates information from several notifications into one and delivers that notification to the end user instead of several separate messages.
+
+### How does Digest Notification Work?
+
+Novu has a built-in digest engine that collects multiple trigger events, aggregates them into a single message and delivers it to the subscriber. You can use the digest engine by adding a `digest node` to your workflow in the workflow editor in the [Novu dashboard](https://dashboard-v2.novu.co/workflows?utm_campaign=docs-digestsinapp).
+
+Let’s see it in action now!
+
+## Add Digest Notification To An App
+
+To get started with this, you need the following:
+
+- A Novu account. [Sign up for free](http://dashboard.novu.co/?utm_campaign=docs-gs-digestsinapp) if you don’t have one yet.
+- A working React development environment.
+
+## Workflow setup in Novu
+
+Once, you have these, follow the steps below:
+
+1. Head over to the Novu Dashboard.
+2. Click **"Workflows"** on the left sidebar of your Novu dashboard.
+3. Click the **"Create Workflow"** button on the top right:
+
+ {" "}
+
+ Once you click the `create workflow` button, you’ll see a dropdown. Select `blank
+ workflow` from the dropdown:
+
+ {" "}
+
+ You’ll now be taken to the workflow editor:
+
+ {" "}
+
+ Once here, you can add the channels you want to use for sending notifications
+ and configure them. For this guide, we’ll use the `In-App` channel. You’ll also
+ see the `Digest` action on the right sidebar.
+
+
{" "}
+
+The `digest` node allows you to set a specific time interval for when notifications
+should be sent:
+
+ 
{" "}
+
+Once, you’ve configured it. Go ahead and configure the `in-app` channel as per your
+need:
+
+ 
{" "}
+
+Here’s a brief explanation of all the options:
+
+- **1-Preview**: This shows you a glimpse of what each notification item will look like in the Notification Center UI.
+- **2-Avatar:** If turned on, each notification item will show the avatar of the subscriber.
+- **3-Action:** With this, you can add a primary and secondary call to action button to each notification item.
+- **4-Notification Feeds:** This displays a stream of specific notifications. You can have multiple feeds to show specific notifications in multiple tabs.
+- **5-Redirect URL** - This is the URL to which a subscriber can be directed when they click on a notification item.
+- **6-Filter** - This feature allows you to configure the criteria for delivering notifications. For instance, you can apply a filter based on a subscriber's online status to send them an email if they were online within the last hour.
+
+In our case, we’re going to use the following:
+
+
+ 
{" "}
+
+Once you’re done configuring this to your liking, click on the `update` button on
+the top right. It’ll automatically create a trigger code that you can use in your
+app. To get it, click on the `get snippet` button on the top right and copy it:
+
+ 
{" "}
+
+Now, let’s see how to add Novu to our app!
+
+# Add Novu to the Backend and Configure it
+
+In your backend, install the novu package using the following code:
+
+```bash
+npm install @novu/node
+```
+
+Now, create a route which you want to hit when called from the front end. In our demo app, this is the route:
+
+```jsx
+import express from "express";
+import { getDigest } from "../controller/digest.js";
+
+const router = express.Router();
+
+router.post("/sending-digest", getDigest);
+
+export default router;
+```
+
+Now, we need to write a controller function that will handle the logic for what is to be sent in the trigger function’s payload. In our case, this is the controller function:
+
+```jsx
+import { sendDigest } from "../novu/novu.js";
+
+export const getDigest = async (req, res) => {
+ const { name } = req.body;
+ try {
+ await sendDigest(name);
+ res.status(201).json({ message: "success", name: name });
+ } catch (error) {
+ res.status(409).json({ message: error.message });
+ }
+};
+```
+
+To make it modular, we’ll keep the trigger code in a separate function in a separate file (`novu.js`, in our case) and the trigger function is getting called in the controller function above by the name `getDigest`.
+
+If you’re following the guide, you’ve already copied the trigger function. But before we can add it to our app, we need one key thing - **Subscribers.**
+
+Subscribers are entities to which the notifications are sent. You can see a list of subscribers in the [Novu dashboard](https://dashboard-v2.novu.co/subscribers?utm_campaign=docs-digests-inapp) as well.
+
+In our app, we’ll create a subscriber in Node.js as we’re writing our backend in Node.js, but we also have backend [SDKs](/sdks/introduction) (Node.js, PHP, .NET, Go, Ruby, Python and Kotlin) to choose from. The recommended way to create a subscriber in NodeJS is as follows:
+
+```jsx
+await novu.subscribers.identify("aa234u787", {
+ firstName: "digest subscriber",
+});
+```
+
+Here, we’re creating a subscriber with the `subscriberID` of `aa234u787.` You can read more about subscribers [here](/concepts/subscribers).
+
+Back in our app, we can now add the trigger function:
+
+```jsx
+import { Novu } from "@novu/node";
+
+export const sendDigest = async (name) => {
+ const novu = new Novu(process.env.NOVU_SECRET_KEY);
+
+ await novu.subscribers.identify("aa234u787", {
+ firstName: "digest subscriber",
+ });
+
+ await novu.trigger("digest-showcase", {
+ to: {
+ subscriberId: "aa234u787",
+ },
+ payload: {
+ name: name,
+ },
+ });
+};
+```
+
+Now, we just need to hit the route defined above from the front end and add Novu to it.
+
+# Add Novu’s Notification Center to the front end
+
+In the front end, install the Novu notification centre package using the following command:
+
+```bash
+npm install @novu/notification-center
+
+```
+
+Now, import and render the component in your app. The code to do so is as follows:
+
+```jsx
+import {
+ NovuProvider,
+ PopoverNotificationCenter,
+ NotificationBell,
+ IMessage,
+} from "@novu/notification-center";
+
+function Header() {
+ function onNotificationClick(message: IMessage) {
+ // your logic to handle the notification click
+ if (message?.cta?.data?.url) {
+ window.location.href = message.cta.data.url;
+ }
+ }
+
+ return (
+ + Don't know how to? Start{" "} + here. +
+
{" "}
+
+In this app, when we enter some text in the input box and click send, the notification
+appears in the bell icon after the delay specified above (when we’re creating the
+workflow).
+
+This is how we add digest to in-app notifications!
diff --git a/legacy-guides/cookbook/introduction.mdx b/legacy-guides/cookbook/introduction.mdx
new file mode 100644
index 00000000..a04ec299
--- /dev/null
+++ b/legacy-guides/cookbook/introduction.mdx
@@ -0,0 +1,192 @@
+---
+title: "Recipes"
+---
+
+This cookbook contains recipes and code samples demonstrating how to accomplish everyday tasks with Novu in your application. Each code example uses our libraries and SDKs.
+
+
+ 
+
+
+## Fetch Subscriber Feed
+
+A subscriber feed is a list of all In-App messages for a single subscriber. It's a continuous stream of messages displayed in a list that subscribers can scroll through on the frontend via the Notification Center.
+
+It is a dynamic list with **seen** and **unseen** capabilities. Multiple feeds can exist for a subscriber.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{" "}
+
+2. Right-click the channel and select **“Edit Channel”**.
+
+ 
{" "}
+
+3. Select Integrations -> Webhooks -> Create Webhook
+
+ 
{" "}
+
+4. Edit the Bot name to your liking, copy the webhook URL and store it somewhere. We'll need it in the future.
+
+ 
{" "}
+
+
+# Set up Novu
+
+In this part, we'll set up a workflow that will be triggered when we send a notification. Workflows are like blueprints and hold the entire flow of notifications. You can read more about them on our [docs](https://docs.novu.co/workflows/notification-workflows). To set up a notification workflow for our app, follow these steps:
+
+1. Make sure that you've set the Discord Integration as active from the [Novu Integrations Store](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-discordnotifications).
+
+ 
{" "}
+
+2. Goto the [Novu Web Dashboard](https://dashboard-v2.novu.co/workflows?utm_campaign=docs-discordnotifications).
+3. Click on the **"Add a workflow"** button and select **"Blank workflow"** from the dropdown.
+
+ 
{" "}
+
+4. Once there, give your workflow a name and drag and drop the **"Chat"** option below the **"Workflow trigger"** step.
+
+ 
{" "}
+
+5. You can also add variables in the **Workflow Editor**. For example, here I've added 'chatMsg' as a variable as I'll be sending data using it.
+
+ 
{" "}
+
+ 
{" "}
+
+ Now, we've completed all the setup required and can move to coding!
+
+# Create the backend
+
+The backend for this app is quite simple. Simply install the Novu package:
+
+```bash
+npm install @novu/node
+
+```
+
+Now, create a route that you'll hit when called from the front end. For our demo app, this is the route I've created:
+
+```jsx
+import express from "express";
+import { chatController } from "../controller/chat.js";
+
+const router = express.Router();
+
+router.post("/sendChat", chatController);
+
+export default router;
+```
+
+Now, we need a controller function to handle what is to be sent in the trigger's function payload. Here's the controller I wrote:
+
+```jsx
+import { chat } from "../novu/novu.js";
+
+export const chatController = async (req, res) => {
+ const { chatMsg } = req.body;
+ try {
+ await chat(chatMsg);
+ res.status(201).json({ message: "Message sent successfully" });
+ } catch (error) {
+ console.log("notifController error:", error);
+ res.status(500).json({ message: error.message });
+ }
+};
+```
+
+
{" "}
+
+
+This is how we send Discord notifications using Novu!
diff --git a/legacy-guides/fcm-flutter-novu/how-to-send-push-notifications-to-flutter-apps-with-fcm-using-Novu.mdx b/legacy-guides/fcm-flutter-novu/how-to-send-push-notifications-to-flutter-apps-with-fcm-using-Novu.mdx
new file mode 100644
index 00000000..ac23fe41
--- /dev/null
+++ b/legacy-guides/fcm-flutter-novu/how-to-send-push-notifications-to-flutter-apps-with-fcm-using-Novu.mdx
@@ -0,0 +1,785 @@
+---
+title: "How to send push notifications to Flutter apps (Android & iOS) with FCM using Novu"
+description: "Learn how to integrate Firebase Cloud Messaging with Novu and send notifications to Flutter apps"
+---
+
+## Prerequisites
+
+To complete this guide, you will need the following:
+
+- [Apple Developer](https://developer.apple.com/) membership (to obtain the required permissions to send push notifications).
+- A machine running MacOS to work on building the Flutter app for iOS devices.
+- [Firebase](https://firebase.google.com/) account
+- [Novu](https://dashboard-v2.novu.co/?utm_campaign=docs-gs-legacy-guides-fcm-flutter) account.
+- [Android Studio](https://developer.android.com/studio/install) configured with Dart and Flutter plugins.
+- [Xcode](https://developer.apple.com/xcode/) installed on your machine.
+
+Check out the [Flutter app code for this guide on GitHub](https://github.com/novuhq/flutter-fcm-novu).
+
+## Set up and Create a Flutter App
+
+If you have an existing Flutter App, you can skip this step.
+
+If you are creating a brand new Flutter app, please follow this [guide](https://firebase.google.com/codelabs/firebase-fcm-flutter#0).
+
+## Set up Firebase and FlutterFire
+
+Please follow this [guide to set up a Firebase project and integrate Firebase Cloud Messaging in your Flutter app](https://firebase.google.com/codelabs/firebase-fcm-flutter#2).
+
+## Set Up Apple Integration
+
+Please follow this [guide to ensure that everything is set up on your iOS device](https://firebase.flutter.dev/docs/messaging/apple-integration) to receive messages.
+
+There is an optional section about allowing **Notification Images**. Follow the steps to install and activate the notification service extension. We'll need it later in this guide to display images as part of the push notifications from FCM.
+
+## Set Up FCM Notification Permission & Registration Token
+
+We'll add code to initialize Firebase and ask the user's permission to receive notifications.
+
+Open up the `lib/main.dart` file in your Flutter app and replace everything with the code below:
+
+```dart
+import 'package:flutter/foundation.dart';
+import 'package:firebase_core/firebase_core.dart';
+import 'package:flutter/material.dart';
+import 'firebase_options.dart';
+import 'package:firebase_messaging/firebase_messaging.dart'; // FlutterFire's Firebase Cloud Messaging plugin
+
+// Add Stream controller
+import 'package:rxdart/rxdart.dart';
+
+// for passing messages from event handler to the UI
+final _messageStreamController = BehaviorSubject{" "}
+
+
+Click on `Create your first campaign` and select `Firebase Notification messages`.
+
+
+ {" "}
+
+
+ {" "}
+
+
+Enter the `Notification title` and the `Nabigateotification text`, and click on `Send test message`.
+
+
+ {" "}
+
+
+We must copy and paste this FCM registration token to confirm our device. You can find it logged as shown earlier in our editor.
+
+
+ {" "}
+
+
+ {" "}
+
+
+Click on 'Test'.
+
+
+ {" "}
+
+
+You should see the notification on your device!
+
+
+ {" "}
+
+
+Next, immediately configure FCM as a Push channel provider.
+
+
+ {" "}
+
+
+You can also do this by heading straight to the `Integrations Store`. Click on `Add a provider`.
+
+## Connect FCM as a Push Channel provider
+
+
+ {" "}
+
+
+ {" "}
+
+
+You only need to configure FCM with Novu with the Firebase Service Accounts private key.
+
+To acquire the account key JSON file for your service account, follow this instructions:
+
+1. Select your project. Click the gear icon on the top of the sidebar.
+2. Head to project settings.
+3. Navigate to the `Service accounts` tab.
+4. Click `Generate new private key`, then confirm by clicking `Generate key`.
+5. Click `Generate key` to download the JSON file.
+6. Once the file is on your machine, paste the entire JSON file content in the `Service Account` field of the FCM provider in the Integration store on Novu’s web dashboard.
+
+Make sure your service account key JSON content contains these fields:
+
+```JSON
+
+{
+ "type": "service_account",
+ "project_id": "PROJECT_ID",
+ "private_key_id": "PRIVATE_KEY_ID",
+ "private_key": "PRIVATE_KEY",
+ "client_email": "FIREBASE_ADMIN_SDK_EMAIL",
+ "client_id": "CLIENT_ID",
+ "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+ "token_uri": "https://oauth2.googleapis.com/token",
+ "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+ "client_x509_cert_url": "CLIENT_X509_CERT_URL"
+}
+
+```
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+## Create a Notification Workflow
+
+In Novu, creating a workflow means establishing a blueprint for sending notifications within your app. This unified structure ties together email, in-app messages, SMS, push notifications, and chat into **one entity**.
+
+Each workflow has a unique name and identifier and includes customized content for various channels, using `{{handlebars}}` variables for personalization.
+
+This ensures consistent platform notifications and allows dynamic adjustments for individual subscribers, scenarios, and use cases.
+
+{" "}
+
+
+ {" "}
+
+ {" "}
+
+ {" "}
+
+ {" "}
+
+
+
+
+ ```JSON
+
+ curl --request PUT \
+ --url https://api.novu.co/v1/subscribers/{subscriber_id}/credentials \
+ --header 'Content-Type: application/json' \
+ --header 'Authorization: ApiKey 
{" "}
+
+3. You’ll then be asked if you want to use React-email or not. Since, we’ll be using MJML, I’m choosing the default 'No' option.
+
+ 
{" "}
+
+4. After this step, all the dependencies will be installed and you will be able to start using Novu Framework.
+
+ 
{" "}
+
+5. Once this installation is complete, simply cd into the directory and start your app using the `npm run dev` command, and your app will be served on `localhost:4000`
+
+
{" "}
+
+
+Here’s how the Dev Studio looks on the first run:
+
+
+ 
{" "}
+
+You’ll notice that it asks for an `Echo endpoint` at the bottom. Novu Echo requires
+a single HTTP endpoint (`/api/echo` or similar) to be exposed by your application.
+This endpoint is used to receive events from our Worker Engine. We have more on Novu
+endpoint [in our docs.](https://docs.novu.co/framework/concepts/endpoint)
+
+
{" "}
+
+Once you do, you’ll see a green checkmark alongside the URL input box and a green
+`connected` highlight at the top right corner.
+
+## Installing and configuring MJML
+
+Integrating MJML with Novu in our NextJS app is quite straightforward, with just one small caveat. Following are the steps to get it installed and configured:
+
+1. Simply run the following command to install it like any other npm package:
+
+```bash
+npm i mjml
+```
+
++ Please contact us if you have any questions. +
{" "}
+
+Here, from the Dev Studio, you or your peers can change things like the text of a
+button, toggle visibility of a button, static text content etc and have it synced
+with the cloud with the `Sync to Cloud` button.
+
+### Payload vs Step Inputs
+
+Notice that in the Echo dev studio above, we’ve used payload as well as step inputs. Here’s how you can decide if you need either or both:
+| Payload | Step Inputs |
+| -------- | ------------------------------------- |
+| is used for dynamic content that changes from one notification to another based on events occurring in your system. | are used for static elements or predefined options that non-technical team members can modify without altering the codebase.|
+| is controlled by developers and passed dynamically through the novu.trigger method. | are defined by developers but aremeant to be utilized and modified by non-technical peers.|
+| Payload examples include User ID, Post ID, Comment, Order ID, 2FA token, etc., which are likely to change with each notification. | Step Inputs examples include the text of a button, whether a section should be shown, static text content, etc., which are generally static but configurable elements.|
+| Payload modifications are made in the code by developers at the time of triggering a notification. | Step Inputs can be modified directly in the UI, offering a no-code solution for non-technical team members to make changes.|
+| Payload data is passed during the novu.trigger method and is part of the dynamic data handling process within notification workflows.| Step Inputs are predefined in the workflow configuration and can be adjusted through the Echo Dev Studio, affecting how notifications are rendered without changing the workflow logic.|
+
+## Syncing with the cloud, with the click of a button
+
+Once done with the workflow, now we need to sync it to the cloud. Fortunately, Novu Framework makes it a breeze to sync changes from the local machine to the cloud and it all happens with a click of a button.
+
+To enable our cloud environment to talk to your local Bridge instance, you need to supply an [Bridge Endpoint](/concepts/endpoint) URL. This sets up a communication channel between our cloud environment and your local instance. To allow Novu to communicate with your local machine a tunnel will need to be generated.
+
+Running the `npm run dev` script in the project launches both the Bridge application and the tunnel solution. The tunnel URL shows up in the console output.
+
+You can also use a tool like `ngrok`:
+
+```bash
+// using ngrok
+ngrok http http://localhost:
{" "}
+
+Remember, the exact URL (`/api/novu` or similar) you expose in your application for
+handling Novu Framework requests is what you'd consider the `Bridge URL`.
+
+This URL would be the endpoint within your application's domain where Novu's Worker Engine sends requests to fetch notification content or subscriber details dynamically. In our case, it is this: https://faec-2409-40f2-3c-3b57-400e-a7f7-1fc0-1e5.ngrok-free.app/api/echo
+So, we’ll enter this Bridge URL:
+
+
+ 
{" "}
+
+And create diff:
+
+ 
{" "}
+
+
+## Testing our workflow
+
+Once you’ve synced your changes in the previous step, you’ll see a notification that says ‘Sync complete’ and you can now go to Novu Cloud using the ‘Test your workflows’ link and trigger a notification.
+
+
+ 
{" "}
+
+You’ll see the workflow you’ve created has a blue lightning bolt icon. That icon
+signifies that the corresponding workflow has been created with Novu Framework:
+
+ 
{" "}
+
+Simply open the workflow and you can send a test email from there.
+
+
{" "}
+
+This is the workflow test email in my inbox:
+
+ 
{" "}
+
+Once tested, you can simply have this workflow triggered whenever you want. For
+instance, a typical use case is to have a workflow triggered when an event
+occurs. To replicate it, I’ve attached a handler function that triggers this
+workflow when the `submit` event fires:
+
+Here’s a simple replication of the stipulated scenario:
+
+```jsx
+"use client";
+
+import { useState } from "react";
+
+export default function Home() {
+ const [loading, setLoading] = useState(false);
+ const [text, setText] = useState("");
+ const [email, setEmail] = useState("");
+
+ const triggerWorkflow = async () => {
+ setLoading(true);
+ const response = await fetch("/api/users", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ text: text,
+ email: email,
+ }),
+ });
+ const result = await response.json();
+ setLoading(false);
+ console.log(result);
+ };
+ return (
+ 
+
+
+ Here is where our exact API endpoint goes. If our application runs on a different port, we should change the URL manually to point Dev Studio in the right direction.
+
+
+ 
+
+
+ Also, if we have configured everything correctly, we should see that Dev Studio sees our workflow identifier (Workflow unique name).
+
+
+ 
+
+
+3. Click the “View Workflow” button in the Dev Studio to see the workflow.
+
+ We should see the following:
+
+
+ 
+
+
+Click on the workflow step node called `send-email`. We should see a preview of our email template and the `Step Input` and `Payload` variables we have configured in the workflow schemas.
+
+
+ 
+
+
+4. This is the time to adjust the email template, step input schema, or define the properties we anticipate in the payload. We have a live representation of everything. You can add more steps like In-App, SMS, and chat.
+
+## 5. Syncing our workflow to Novu Cloud
+
+Having completed crafting, designing, and modifying our notification workflow to suit our requirements, we're ready to push it to Novu Cloud. There, it will handle the heavy lifting and seamlessly execute all the steps we've configured whenever we trigger the workflow.
+
+1. Click on the `Sync to Cloud` button on the top right.
+
+
+ 
+
+
+2. We will need to create a local tunnel that the Novu Cloud environment can reach for local experimentation purposes.
+
+
+ 
+
+
+ On a separate terminal, run the following command:
+
+ ```jsx
+ // Change to the port where the app is currently running
+
+ npx localtunnel --port 3000
+ ```
+
+ We should get something like:
+
+ ```jsx
+ your url is: https://famous-pumas-clap.loca.lt
+ ```
+
+
+ 
+
+
+3. Click the `Create Diff` button. To push (merge) the workflow code to the cloud, an API Key from our Novu account should be added to our Framework Client instance.
+
+
+ 
+
+
+ Let’s navigate to `../app/server/novu/workflows.ts` file and add our Novu API Key.
+
+```jsx
+// app/server/novu/workflows.ts
+// This workflow already renders vue email template.
+
+import { config } from '@vue-email/compiler'
+import { Client, workflow } from '@novu/framework';
+
+const vueEmail = config('templates', {
+ verbose: false,
+ options: {
+ },
+})
+
+export const client = new Client({
+ apiKey: process.env.NOVU_SECRET_KEY, // <<-- Your Novu API KEY
+ /**
+ * Disable this flag only during local development
+ * For production this should be true
+ */
+ strictAuthentication: process.env.NODE_ENV !== "development"
+});
+
+export const myWorkflow = workflow('hello-world', async ({ step, payload }) => {
+ await step.email(
+ 'send-email',
+ async () => {
+ const template = await vueEmail.render('sample-email.vue', {
+ props: payload,
+ });
+ return {
+ subject: `You have a new invitation from: ${payload.username}.`,
+ body: template.html,
+ }
+ });
+},
+ {
+ payloadSchema: {
+ // Always `object`
+ type: 'object',
+ // Specify the properties to validate. Supports deep nesting.
+ properties: {
+ username: { type: "string" },
+ invitedByEmail: { type: "string" },
+ inviteLink: { type: "string" },
+ inviteFromIp: { type: "string" },
+ inviteFromLocation: { type: "string" }
+ },
+ // Used to enforce full type strictness, with no rogue properties.
+ additionalProperties: false,
+ // The `as const` is important to let Typescript know that this
+ // type won't change, enabling strong typing on `inputs` via type
+ // inference of the provided JSON Schema.
+ } as const,
+ },
+);
+```
+
+ We will now click the `Create Diff` button again.
+
+ 
+
+ This is where you can review all the changes made to the workflow. Once you have verified that everything is in order, go ahead and click the `Deploy Changes` button.
+
+ 
+
+ ## 6. Testing Our Notification Workflow
+
+ There are many ways to test and [trigger our workflow](https://docs.novu.co/api-reference/events/trigger-event), but we'll make a `cURL` API call to Novu Cloud from our terminal in this guide.
+
+ If we don't have any subscribers or users in our database or within our Novu Cloud organization, we'll send the test to ourselves for simplicity.
+
+ - In the `subscriberId` key, input a random number or even our email address (as long as we do not try to assign the same ID key to another subscriber, we should be good).
+ - For the `email` key, we will need to insert a valid email address so we can actually receive the email.
+
+
+ {" "}
+
+3. You’ll then be asked if you want to use React-email or not. You can choose to install it at this step itself or proceed with No and then install it later. I’m choosing the default No option.
+
+ {" "}
+
+4. After this step, all the dependencies will be installed and you will be able to start using Novu Framework.
+
+ {" "}
+
+5. Once this installation is complete, simply cd into the directory and start your app using the `npm run dev` command, and your app will be served on `localhost:4000`
+
+{" "}
+
+
+Here’s how the Dev Studio looks on the first run:
+
+
+ {" "}
+
+You’ll notice that it asks for an `[Bridge Endpoint](/concepts/endpoint)` at the bottom. Novu Framework
+requires a single HTTP endpoint (`/api/novu` or similar) to be exposed by your application.
+This endpoint is used to receive events from our Worker Engine. We have more on Bridge
+endpoint [in our docs.](https://docs.novu.co/framework/concepts/endpoint)
+
+{" "}
+
+Once you do, you’ll see a green checkmark alongside the URL input box and a green
+`connected` highlight at the top right corner.
+
+## Installing and configuring React Email
+
+
+ 
+ 
{" "}
+
+Here, from the Dev Studio, you or your peers can change things like the text of a
+button, toggle visibility of a button, static text content, etc, and have it synced
+with the cloud with the `Sync to Cloud` button.
+
+### Payload vs Step Inputs
+
+Notice that in the Echo dev studio above, we’ve used payload as well as step inputs. Here’s how you can decide if you need either or both:
+
+- Payload is used for dynamic content that changes from one notification to another based on events occurring in your system.
+- Step Inputs are for static elements or predefined options that non-technical team members can modify without altering the codebase.
+- Payload is controlled by developers and passed dynamically through the novu.trigger method.
+- Step Inputs are defined by developers but are meant to be utilized and modified by non-technical peers.
+- Payload examples include User ID, Post ID, Comment, Order ID, 2FA token, etc., which are likely to change with each notification.
+- Step Inputs examples include the text of a button, whether a section should be shown, static text content, etc., which are generally static but configurable elements.
+- Payload modifications are made in the code by developers at the time of triggering a notification.
+- Step Inputs can be modified directly in the UI, offering a no-code solution for non-technical team members to make changes.
+- Payload data is passed during the novu.trigger method and is part of the dynamic data handling process within notification workflows.
+- Step Inputs are predefined in the workflow configuration and can be adjusted through the Echo Dev Studio, affecting how notifications are rendered without changing the workflow logic.
+
+## Syncing with the cloud, with the click of a button
+
+Once done with the workflow, now we need to sync it to the cloud. Fortunately, Novu Framework makes it a breeze to sync changes from the local machine to the cloud and it all happens with a click of a button.
+
+To enable our cloud environment to talk to your local Echo instance, you need to supply an Echo endpoint URL. This sets up a communication channel between our cloud environment and your local instance. To allow Novu to communicate with your local machine a tunnel will need to be generated.
+
+Running the `npm run dev` script in the project launches both the Bridge application and the tunnel solution. The tunnel URL shows up in the console output.
+
+You can also use a tool like `ngrok`:
+
+```bash
+// using ngrok
+ngrok http http://localhost:
{" "}
+
+Remember, the exact URL (`/api/novu` or similar) you expose in your application for
+handling Novu Framework requests is what you'd consider the `Bridge URL`.
+
+This URL would be the endpoint within your application's domain where Novu's Worker Engine sends requests to fetch notification content or subscriber details dynamically. In our case, it is this: `https://0536-2409-40f2-1039-43e1-3053-d98e-c276-ee5.ngrok-free.app/api/echo`
+
+So, we’ll enter this Bridge URL:
+
+
+ 
{" "}
+
+And create diff:
+
+ 
{" "}
+
+
+## Testing our workflow
+
+Once you’ve synced your changes in the previous step, you’ll see a notification that says ‘Sync complete’ and you can now go to Novu Cloud using the ‘Test your workflows’ link and trigger a notification.
+
+
+ 
{" "}
+
+You’ll see the workflow you’ve created has a blue lightning bolt icon. That icon
+signifies that the corresponding workflow has been created with Novu Framework:
+
+ 
{" "}
+
+Simply open the workflow and you can send a test email from there.
+
+
{" "}
+
+This is the workflow test email in my inbox:
+
+ 
{" "}
+
+Once tested, you can simply have this workflow triggered whenever you want. For
+instance, a typical use case is to have a workflow triggered when an event
+occurs. To replicate it, I’ve attached a handler function that triggers this
+workflow when the `submit` event fires:
+
+Here’s a simple replication of the stipulated scenario:
+
+```jsx
+"use client";
+import Image from "next/image";
+import styles from "./page.module.css";
+import React, { useState } from "react";
+import axios from "axios";
+
+export default function Home() {
+ const [email, setEmail] = useState("");
+ const [username, setUsername] = useState("");
+
+ const onClickHandler = async (e: React.FormEvent
{" "}
+
+2. Apple invoice email example
+
+ 
{" "}
+
+
+## Conclusion
+
+So there you go!
+
+This is how you create workflows using Novu Framework and deploy your changes seamlessly to the Novu cloud. You can check out the code for a [sample demo app](https://github.com/novuhq/novu-framework-nextjs-react-email-example).
+Once you've built the workflow, you might want read one of [our other guides](/legacy-guides/framework-guides/product) on how to empower product teams to manage notification workflows.
+
+
+
+ 
{" "}
+
+
+**Note:** Use the port on which your Remix app is running for the [Bridge Endpoint](/concepts/endpoint) so that the Novu Dev Studio can connect to your API route as highlighted in the image above.
+
+2. Check out the signup email workflow and test
+
+
+ 
{" "}
+
+
+3. Deploy to Novu Cloud when you're done.
+
+On the top right(as seen in the image above) of the Novu Dev Studio, you can sync to Novu Cloud when you're done working locally.
+
+**Note:** You'll need to create a local tunnel that the Novu Cloud environment can reach for local experimentation purposes. Ngrok is a good tunnel.
+
+### 6. Send a Notification
+
+Trigger a notification using the recently deployed workflow either via your [Novu Cloud dashboard](https://dashboard-v2.novu.co).
+
+```js
+import { Novu } from "@novu/node";
+
+const novu = new Novu("
{" "}
+
+
+**Note:** Use the port on which your Svelte app is running for the Bridge endpoint so that the Novu Dev Studio can connect to your API route.
+
+2. Check out the email workflow and test
+
+
+ 
{" "}
+
+
+3. Deploy to Novu Cloud when you're done.
+
+On the top right of the Novu Dev Studio, you can sync to Novu Cloud when you're done working locally.
+
+**Note:** You'll need to create a local tunnel that the Novu Cloud environment can reach for local experimentation purposes. Ngrok is a good tunnel.
+
+### 6. Send a Notification
+
+Trigger a notification using the recently deployed workflow either via your [Novu Cloud dashboard](https://dashboard-v2.novu.co) or [code](/inbox/react/get-started).
+
+Once you've built the workflow, you might want read one of [our other guides](/legacy-guides/framework-guides/product) on how to empower product teams to manage notification workflows.
diff --git a/legacy-guides/framework-guides/otp.mdx b/legacy-guides/framework-guides/otp.mdx
new file mode 100644
index 00000000..7fd01ee9
--- /dev/null
+++ b/legacy-guides/framework-guides/otp.mdx
@@ -0,0 +1,330 @@
+---
+title: "How to send OTP verification email notifications with React-email"
+description: "Learn how to send OTP verification email notifications with React-email in your NextJS app"
+---
+
+## Introduction
+
+In this guide, you’ll learn how to send OTP verification email notifications using the React-email package. Follow these steps:
+
+## Getting started
+
+Integrating Novu’s code-first workflow with React.Email for your Next.js application can be done in a few steps:
+
+1. Create a NextJS app and wait for the installation:
+
+```bash
+npx novu init@latest --secret-key=
{" "}
+
+
+3. Define a workflow that uses that template to send notifications - In this step, we need to define a workflow that uses the template we wrote above to render the email notification:
+
+```ts
+import { Client, workflow } from "@novu/framework";
+import { renderOTPEmail } from "./otp";
+
+export const client = new Client({
+ apiKey: process.env.NOVU_SECRET_KEY,
+ /**
+ * Disable this flag only during local development
+ */
+ strictAuthentication: process.env.NODE_ENV !== "development",
+});
+
+export const otpFlow = workflow(
+ "otp-flow",
+ async ({ step, payload }) => {
+ // Send a welcome email
+ await step.email(
+ "send-email",
+ async (inputs) => {
+ return {
+ subject: `Here's your verification code, Sumit!`,
+ body: renderOTPEmail(inputs, payload),
+ };
+ },
+ {
+ controlSchema: {
+ type: "object",
+ properties: {
+ showJoinButton: { type: "boolean", default: true },
+ buttonText: { type: "string", default: "Login to Linear" },
+ logoURL: {
+ type: "string",
+ default:
+ "https://react-email-demo-7qy8spwep-resend.vercel.app/static/linear-logo.png",
+ format: "uri",
+ },
+ supportEmail: { type: "string", default: "support@linear.co" },
+ validationCode: { type: "string", default: "tt226-5398x" },
+ inviteLink: {
+ type: "string",
+ default: "https://linear.app",
+ format: "uri",
+ },
+ inviteFromIp: { type: "string", default: "204.13.186.218" },
+ inviteFromLocation: {
+ type: "string",
+ default: "São Paulo, Brazil",
+ },
+ },
+ },
+ }
+ );
+ // JSON Schema for validation and type-safety. Zod, and others coming soon.
+ },
+ { payloadSchema: { properties: { text: { type: "string" } } } }
+);
+```
+
+4. Triggering the workflow - Lastly, we need to trigger the workflow we created above. Here’s how to trigger it:
+
+```ts
+import { Novu } from "@novu/node";
+
+const novu = new Novu("
{" "}
+
+That’s it!
+
+That’s how you create and use an OTP workflow. You can check out [our docs](https://docs.novu.co/guides/framework-guides/framework-react-email) for a hands on guide with more in-depth instructions.
+
+Once you've built the workflow, you might want read one of [our other guides](/legacy-guides/framework-guides/product) on how to empower product teams to manage notification workflows.
+
+Don’t forget to share your workflows with us and as always, hit us up on Discord with any questions you might have!
diff --git a/legacy-guides/framework-guides/product.mdx b/legacy-guides/framework-guides/product.mdx
new file mode 100644
index 00000000..295738fd
--- /dev/null
+++ b/legacy-guides/framework-guides/product.mdx
@@ -0,0 +1,55 @@
+---
+title: "Empowering Product Teams to Manage Notification Workflows"
+description: "Enabling product teams to independently manage and optimize notification workflows for improved efficiency and user experience"
+---
+
+# Introduction
+
+Novu’s code-first workflow empowers product teams to manage notification for end-users independently once the engineering teams have built and delivered the notification platform for the product.
+
+Let’s see how product teams can leverage it:
+
+1. **Engineering Team sets things up:** Engineering teams integrate Novu’s code-first workflows into their application. This involves setting up the structure of notification workflows in the codebase, defining events, steps, inputs, payload, etc. These workflows are functions that execute business logic and need to be set only once.
+2. **Empowering Non-Technical Teams:** Once the foundational workflows are established, product teams can take over! Code-first workflows allow non-technical users to modify workflows safely without breaking critical integrations. Through an exposed Inputs interface, product teams can adjust notification content and behaviour, tailoring the user experience without needing to dive into the code at all. This helps both teams win - product teams are empowered to manage and optimize notifications independently, creating a dynamic and user-centric notification system without constant reliance on engineering teams.
+3. **Insights and Optimization**: Further, with Novu’s Web Dashboard, Product teams gain valuable insights into last-mile delivery from the activity monitor. This enables them to refine notification strategies and optimize for better user satisfaction.
+
+This collaborative approach between the Engineering and Product teams allows both teams to focus on their strengths, resulting in a more efficient and effective notification strategy, without constant interruptions in each other’s flow.
+
+## Customising the workflow
+
+To demonstrate the customizability, we’ll assume that the Engineering team has successfully delivered the basic setup as outlined in [one of our guides.](https://docs.novu.co/guides/framework-guides/framework-react-email)
+
+1. To start things off, you only need to visit the workflow section in our [Web Dashboard](https://dashboard-v2.novu.co/).
+
+ 
{" "}
+
+
+- You’ll see the blue lightning bolt icon right next to the workflow name symbolising that it is a code-first workflow.
+- Now, simply click on the workflow to open it and make your desired changes.
+- The green `Sync` indicator on the top right corner means that your app is successfully connected with Novu.
+
+2. Once you open a workflow, you’ll see all the steps of the workflow:
+
+ 
{" "}
+
+3. Simply, select a node to see the rendered view. This is what will get sent to the end user.
+
+ 
{" "}
+
+4. To start making changes, simply click on either of the two buttons highlighted below:
+
+ 
{" "}
+
+5. Once you click on it, you’ll be taken to the edit view where you’ll see real-time preview of the workflow. You can make changes to the step inputs on the right-hand side and the rendered view will update in real-time to reflect those changes
+
+ 
{" "}
+
+6. Let's take a look at what payload and step inputs are:
+7. In almost all the scenarios, you’ll be tweaking and modifying step inputs and the workflow editor makes it blazing fast and effortlessly simple. Simply change the text of the respective field or button or toggle any button on or off till the rendered view becomes what you want your end users to receive. Here’s how you can tweak it:
+
+ 
{" "}
+
+
+## Conclusion
+
+The collaboration resulting from Novu’s code-first workflow increases agility, enabling rapid iterations and quick adjustments based on user feedback. It fosters effective collaboration between product and engineering teams, resulting in a more efficient workflow and improved user notifications.
diff --git a/legacy-guides/headless-notification-center-guide.mdx b/legacy-guides/headless-notification-center-guide.mdx
new file mode 100644
index 00000000..b90ede2e
--- /dev/null
+++ b/legacy-guides/headless-notification-center-guide.mdx
@@ -0,0 +1,463 @@
+---
+title: "How to use Headless Notification Center"
+description: "Use the headless version of the notification center"
+---
+
+## Introduction
+
+In this guide, you'll learn about how to use the headless version of our notification center. The headless version is useful for scenarios in which a lightweight solution for integrating notification functionality into a web app that is completely unstyled (so that you can style it as per your wish) is required.
+
+{" "}
+
+ Once you click the **"Create Workflow"** button, you’ll see a dropdown. Select `blank
+ workflow` from the dropdown:
+
+ {" "}
+
+ You’ll now be taken to the workflow editor:
+
+ {" "}
+
+ Once here, you can add the channels you want to use for sending notifications
+ and configure them. For this guide, we’ll use the `In-App` channel.
+
+ 
{" "}
+
+ The in-app node allows you to further customize the notifications that will
+ get sent, as per your need. In our case, it is a simple `description`, which will
+ contain the text that will be entered from the front end. Here's the `in-app`
+ node for your reference:
+
+
+ 
{" "}
+
+
+Here's a brief overview of all the options:
+
+- **1-Preview**: This shows you a glimpse of what each notification item will look like in the Notification Center UI.
+- **2-Avatar:**: If turned on, each notification item will show the avatar of the subscriber.
+- **3-Action:**: With this, you can add a primary and secondary call to action button to each notification item.
+- **4-Notification Feeds:**: This displays a stream of specific notifications. You can have multiple feeds to show specific notifications in multiple tabs.
+- **5-Redirect URL**: This is the URL to which a subscriber can be directed when they click on a notification item.
+- **6-Filter**: This feature allows you to configure the criteria for delivering notifications. For instance, you can apply a filter based on a subscriber's online status to send them an email if they were online within the last hour.
+
+Once you’re done configuring this to your liking, click on the `update` button on the top right. It'll automatically create a trigger code that you can use in your app. To get it, click on the `get snippet` button on the top right and copy it:
+
+
+ 
{" "}
+
+Enter notification text
+ +
+Again, don't forget that you can view the entire code [here](https://github.com/novuhq/novu-headless-demo-app/tree/main) and if you've any questions, either related to this headless app or something else, feel free to ping use [here.](https://discord.gg/novu)
+Also, we've several demo apps for you to check out [here.](https://inbox.novu.co/)
+Thanks for reading!
+```
diff --git a/legacy-guides/novu-fcm-react-native-android.mdx b/legacy-guides/novu-fcm-react-native-android.mdx
new file mode 100644
index 00000000..f3c7412b
--- /dev/null
+++ b/legacy-guides/novu-fcm-react-native-android.mdx
@@ -0,0 +1,411 @@
+---
+title: "How to send push notifications in an Android app (react native) with FCM and Novu"
+description: "Learn how to send FCM push notifications in a React native Android app using Novu and FCM"
+---
+
+## Prerequisites
+
+To complete this tutorial, you will need the following:
+
+- A [Firebase](https://firebase.google.com/) account
+- A [Novu](https://dashboard-v2.novu.co/?utm_campaign=docs-gs-guides-fcm-android) account
+- An [Expo](https://expo.dev) account
+
+Push notifications are notifications that are sent to a user’s devices whether the user is using the app or not. We’ll be using the Firebase Cloud Messaging (FCM) integration of Novu to send these notifications. You can find the complete code for this project in our [Github repo.](https://github.com/novuhq/fcm-react-native-android)
+
+## Start a React-Native project
+
+We'll use the `create-expo` tool to initialize a new expo app. It creates a new React Native app with the expo package installed. We're naming our app `fcm-novu-rn2` and hence using the following command:
+
+```javascript
+ npx create-expo-app fcm-novu-rn2
+```
+
+
{" "}
+
+2. Once your project has been created, you'll be greeted with this welcome screen and asked to add Firebase to your app, so let's do that.
+
+ 
{" "}
+
+3. We'll choose the 'Android' option because we're creating an Android app.
+
+ 
{" "}
+
+4. Find the package name from the `app.json` file of the project:
+
+ 
{" "}
+
+5. Add this package name to Firebase:
+
+ 
{" "}
+
+6. Now, we need to add `SHA1` keys from our project to the Firebase app. Run the following command to obtain `SHA1` key. We'll get two `SHA1` keys, one of which we'll add to Firebase right now and the other one, later on.
+
+```bash
+eas credentials
+```
+
+
+7. Now copy the `SHA1` key and add it to Firebase and register the app:
+
+8. Click 'next' on all the other options and finally click 'continue to console' as follows:
+
+9. Go to 'project settings' and scroll all the way down
+
+10. Click on the 'Add fingerprint' button and add the second `SHA1` key here.
+
+11. Now, download the Google services file and add it to the project's root directory. We also need to specify its location in the `app.json` file:
+
+12. Now we need to upload the Firebase server key to expo. Go to project settings and find it under the 'Cloud Messaging' tab.
+
+13. Now, upload that key to expo using the following command:
+``` bash
+expo push:android:upload --api-key 
{" "}
+
+
{" "}
+
+ 
{" "}
+
+3. Choose the 'blank workflow' option from the dropdown menu.
+
+ 
{" "}
+
+4. Drag and drop the 'Push' node below the Workflow Trigger node.
+
+ 
{" "}
+
+5. If you hover over the newly added 'Push' node, you'll see an error saying 'Message content and title are missing'.
+
+ 
{" "}
+
+6. We're going to add a title and body for notifications. So, add them and give your workflow a suitable name.
+
+ 
{" "}
+
+7. Now, click on the 'Update' and then the 'get snippet' button to get the trigger code.
+
+ 
{" "}
+
+
+## Create a subscriber and update credentials
+
+A subscriber is essentially the recipient of the notifications sent through Novu’s system. When you create a subscriber, you’re setting up the necessary information for Novu to send targeted notifications to. You can find more about subscribers in [our docs.](https://docs.novu.co/subscribers/subscribers)
+To create a subscriber, we'll use the `identify` method:
+
+```jsx
+// creating new instance of Novu
+const novu = new Novu("
{" "}
+
+
+## Dynamic content
+
+So far, we've sent notifications that have had "hard-coded" content. Now we'll send dynamic data when triggering a notification.
+
+The way to do so is by changing the values of the title and the body to `{{title}}` and `{{body}}` in our workflow.
+
+1. Go to the workflow we'd created earlier and change the values of the title and the body to `{{title}}` and `{{body}}` respectively.
+
+ 
{" "}
+
+2. Simply add these identifiers to the payload by changing the trigger code:
+
+```jsx
+novu.trigger("rna-2", {
+ to: {
+ subscriberId: "newSubForRNA",
+ },
+ payload: {
+ title: payloadTitle,
+ body: payloadBody,
+ },
+});
+```
+
+
{" "}
+
+
+## Sending images
+
+Up to this point, your notifications have all contained only text. But if you’ve received many notifications, you know that notifications can have rich content, such as images. It’d be great if your notifications showed users a nice image related to their content. Once again, Firebase makes this super simple.
+
+All you need to do is to specify the `URL` of the image in the override as shown below:
+
+```jsx
+novu.trigger("rna-2", {
+ to: {
+ subscriberId: "newSubForRNA",
+ },
+ payload: {
+ title: payloadTitle,
+ body: payloadBody,
+ },
+ overrides: {
+ fcm: {
+ android: {
+ notification: {
+ imageUrl: "URL of the image",
+ },
+ },
+ },
+ },
+});
+```
+
+The following notification is what gets delivered to the subscriber:
+
+
+ 
{" "}
+
+
+## Handling data type messages
+
+With FCM, you can send `Notification` and `Data` messages. We have handled sending notification messages. Let’s handle data messages. Data type messages are useful when, in addition to the usual data, you want to send some custom data. Maybe whether a subscriber has purchased the pro plan of our product or not, maybe which tier of usage they have purchased etc. You can do this easily by modifying the override. Here's an example of sending the subscription status using the identifier `subStatus`:
+
+```jsx
+novu.trigger("rna-2", {
+ to: {
+ subscriberId: "newSubForRNA",
+ },
+ payload: {
+ title: payloadTitle,
+ body: payloadBody,
+ },
+ overrides: {
+ fcm: {
+ android: {
+ data: {
+ subStatus: "true",
+ },
+ },
+ },
+ },
+});
+```
+
+On the user's device, you can extract this out and have it displayed like this:
+
+
+ 
{" "}
+
+
+## Priority of a notification
+
+FCM tries to deliver high-priority messages immediately. The priority of a notification can also be altered by changing the overrides, as shown below:
+
+```jsx
+novu.trigger("rna-2", {
+ to: {
+ subscriberId: "newSubForRNA",
+ },
+ payload: {
+ title: payloadTitle,
+ body: payloadBody,
+ },
+ overrides: {
+ fcm: {
+ android: {
+ data: {
+ subStatus: "true",
+ },
+ notification: {
+ priority: "low",
+ },
+ },
+ },
+ },
+});
+```
+
+
+ 
{" "}
+
+
+## Additional resources
+
+- [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging)
+- [FCM Architectural Overview](https://firebase.google.com/docs/cloud-messaging/fcm-architecture)
diff --git a/legacy-guides/novu-fcm-web.mdx b/legacy-guides/novu-fcm-web.mdx
new file mode 100644
index 00000000..b57df6fd
--- /dev/null
+++ b/legacy-guides/novu-fcm-web.mdx
@@ -0,0 +1,275 @@
+---
+title: "How to send web push notifications with FCM and Novu"
+description: "Send FCM push notifications in a React app using Novu"
+---
+
+## Introduction
+
+In this guide, we'll learn how to send FCM push notifications in a web app using Novu. But before exploring the actual code, let’s understand what a push notification is and how it works.
+You can find the [frontend code](https://github.com/novuhq/fcmWebPushFE) as well as [backend code](https://github.com/novuhq/FCMWebPushBE) for the app on Github.
+
+{" "}
+
+2. Once your project has been created, you'll be greeted with this welcome screen and asked to add Firebase to your app, so let's do that.
+
+ 
{" "}
+
+3. We'll choose the web option because we're creating a web app.
+
+ 
{" "}
+
+4. Give your app a name and click on the 'Register' button.
+
+ 
{" "}
+
+5. We're done with the Firebase setup! Now, we'll set up Novu and finally proceed to add both (Novu and FCM) to our app.
+
+## Setting up Novu
+
+We'll need a workflow to trigger notifications to our user's devices. Follow the steps below to create one to ensure we are on the path to make FCM work as expected:
+
+1. Head over to the [Integrations Store](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-guides-fcm-web) on the Novu Web Dashboard and make sure that you've turned on the 'Firebase Cloud Messaging' integration.
+
+ {" "}
+
+ {" "}
+
+3. Choose the 'blank workflow' option from the dropdown menu.
+
+ {" "}
+
+4. Drag and drop the 'Push' node below the Workflow Trigger node.
+
+ {" "}
+
+5. If you hover over the newly added 'Push' node, you'll see an error saying 'Message content and title are missing'.
+
+ {" "}
+
+6. We're going to use the identifiers `title` and `body` for the title and the content of notifications, so let's add them in the 'Push message title' and the 'Push message content' fields respectively. So, add them and give your workflow a suitable name.
+
+ 
{" "}
+
+7. Now, click on the 'get snippet' button to get the trigger code.
+
+ 
{" "}
+
+
+## Adding Firebase to the frontend
+
+1. In your project, add Firebase using the following command:
+
+```bash
+npm install firebase
+```
+
+2. Create a new file called `firebase.js` and add the following to it:
+
+```jsx
+import { initializeApp } from "firebase/app";
+import { getMessaging, onMessage } from "firebase/messaging";
+
+//from firebase console
+// Your web app's Firebase configuration
+const firebaseConfig = {
+ apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+ authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+ projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+ storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+ messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+ appId: import.meta.env.VITE_FIREBASE_APP_ID,
+};
+
+// Initialize Firebase
+export const app = initializeApp(firebaseConfig);
+
+// Initialize Firebase Cloud Messaging and get a reference to the service
+export const messaging = getMessaging(app);
+
+export const onMessageListener = () =>
+ new Promise((resolve) => {
+ onMessage(messaging, (payload) => {
+ console.log("payload", payload);
+ resolve(payload);
+ });
+ });
+```
+
+3. Now, we need to generate tokens using the `getToken` method provided by Firebase. But we want to use this only when the user has allowed notifications on their end. So let's request notification permission from the user and if granted, we'll generate the token. Add this to your root module:
+
+```jsx
+async function requestPermission() {
+ const permission = await Notification.requestPermission();
+ if (permission === "granted") {
+ // get token
+ const token = await getToken(messaging, {
+ vapidkey: import.meta.env.VITE_VAPID_KEY,
+ });
+ } else if (permission === "denied") {
+ alert("Persmission denied!");
+ }
+}
+useEffect(() => {
+ requestPermission();
+}, []);
+```
+
+4. To use the `getToken` method, you need a Voluntary Application Server Identification or `VAPID key`. Go to your Project Settings -> Cloud Messaging -> Generate key pair (under Web Push Certificates):
+
+ 
{" "}
+
+5. In order for Firebase's background listener service to work, you need a service worker. Make sure you've created a service worker file `firebase-messaging-sw.js` and add the following to it:
+
+```jsx
+importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js");
+importScripts(
+ "https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"
+);
+
+const firebaseConfig = {
+ apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+ authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+ projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+ storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+ messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+ appId: import.meta.env.VITE_FIREBASE_APP_ID,
+};
+
+firebase.initializeApp(firebaseConfig);
+const messaging = firebase.messaging();
+messaging.onBackgroundMessage((payload) => {
+ console.log("notif incoming", payload);
+ const notificationTitle = JSON.parse(JSON.parse(payload.notification)).title;
+ // payload.notification.title;
+ const notificationOptions = {
+ body: payload.notification.body,
+ icon: payload.notification.image,
+ };
+
+ self.registration.showNotification(notificationTitle, notificationOptions);
+});
+```
+
+## Adding Novu to the backend
+
+In your app's backend, add Novu using the following command:
+
+```bash
+npm install @novu/node
+```
+
+Now, create a route that you want to hit when called from the front end. In our app, this is the route:
+
+```jsx
+import express from "express";
+import { createNotif } from "../controller/notif.js";
+
+const router = express.Router();
+
+router.post("/create", createNotif);
+
+export default router;
+```
+
+Now, we need a controller function to handle the logic for what is to be sent in the trigger function’s payload. In our case, this is the controller function:
+
+```jsx
+import { inAppNotification } from "../novu/novu.js";
+
+export const createNotif = async (req, res) => {
+ const { title, body } = req.body;
+ try {
+ await inAppNotification(title, body);
+ res.status(201).json({ message: "success", title: title, body: body });
+ } catch (error) {
+ res.status(409).json({ message: error.message });
+ }
+};
+```
+
+To make it modular, we’ll keep the trigger code in a separate function in a separate file (`novu.js`, in our case) and the trigger function is getting called in the controller function above by the name `createNotif`.
+
+If you’re following the guide, you should already have the trigger function. But before we can add it to our app, we need one key thing - **Subscribers.**
+
+[Subscribers](https://docs.novu.co/subscribers/subscribers) are entities to which the notifications are sent. You can see a list of subscribers in the [Novu dashboard](https://dashboard-v2.novu.co/subscribers?utm_campaign=docs-guides-fcm-web) as well.
+
+We'll create a subscriber in our app. Our backend will be written in Node.js, but we also have backend [SDKs in PHP, .NET, Go, Ruby, Python, and Kotlin](/sdks/introduction). The recommended way to create a subscriber in NodeJS is as follows:
+
+```jsx
+await novu.subscribers.identify(process.env.NOVU_SUB_ID, {
+ firstName: "pushSubscriber",
+});
+```
+
+Here, we're creating a subscriber with the `subscriberID` of whatever value the `env` file contains for the identifier `NOVU_SUB_ID`. You can read more about subscribers [in our docs.](concepts/subscribers).
+
+Back in our app, before we can now add the trigger function, we need to set device identifiers using the [setCredential method](https://docs.novu.co/integrations/providers/push/fcm#set-device-token):
+
+```jsx
+await novu.subscribers.setCredentials(
+ process.env.NOVU_SUB_ID,
+ PushProviderIdEnum.FCM,
+ {
+ deviceTokens: [process.env.DEVICE_TOKEN],
+ }
+);
+```
+
+
{" "}
+
+2. Choose 'From Scratch' from the following dialog:
+
+ 
{" "}
+
+3. Choose a name for your app and select the Slack workspace in which you want to send notifications:
+
+ 
{" "}
+
+4. Once you're done, simply click the 'Create App' button:
+
+ 
{" "}
+
+5. Once done, you'll be greeted with the screen shown below. We'll make a couple of changes here and it'll be ready to go.
+
+ 
{" "}
+
+6. We'll need `Client Id` from the [Slack Developer's Dashboard](https://api.slack.com/apps) for configuring Slack Integration in the [Novu Web Dashboard](https://dashboard-v2.novu.coovu.coovu.co/integrations?utm_campaign=docs-guides-slack) later, so keep it handy.
+
+ 
{" "}
+
+
+# Create a workflow in the Novu Web Dashboard
+
+1. To create a workflow, head to the workflow section in the [Novu Web Dashboard](https://dashboard-v2.novu.co/workflows?utm_campaign=docs-guides-slack).
+2. Click on the 'Add a workflow' button and select 'Blank workflow' from the dropdown.
+
+ {" "}
+
+3. Once there, give your workflow a name and drag and drop the 'chat' option below the 'workflow trigger' step.
+
+ {" "}
+
+4. You can also add variables in the Workflow Editor. For example, here I've added 'chatMsg' as a variable as I'll be sending data using it.
+
+ 
{" "}
+
+ 
{" "}
+
+6. To turn the Slack integration on, you'll need `Client Id`. You should have it already but if you don't, you can obtain it from the [Slack Developer's Dashboard](https://api.slack.com/apps).
+
+ {" "}
+
+7. Once you have it, you need to plug it into the respective field in the [Slack Integration Settings](https://dashboard-v2.novu.co/integrations?utm_campaign=docs-guides-slack) on the Novu Web Dashboard.
+
+ 
{" "}
+
+
+# Create the backend
+
+The backend for this app is quite simple. Simply install the Novu package:
+
+```bash
+npm install @novu/node
+
+```
+
+Now, create a route that you'll hit when called from the front end. We'll also need to add it to our Slack app (discussed below). For our demo app, this is the route I've created:
+
+```jsx
+import express from "express";
+import { chatController } from "../controller/chat.js";
+
+const router = express.Router();
+
+router.post("/sendChat", chatController);
+
+export default router;
+```
+
+Now, we need a controller function to handle what is to be sent in the trigger's function payload. Here's the controller I wrote:
+
+```jsx
+import { chat } from "../novu/novu.js";
+
+export const chatController = async (req, res) => {
+ const { chatMsg } = req.body;
+ try {
+ await chat(chatMsg);
+ res.status(201).json({ message: "Message sent successfully" });
+ } catch (error) {
+ res.status(500).json({ message: error.message });
+ }
+};
+```
+
+
{" "}
+
+
+ 
{" "}
+
+
+# Configure the Slack app
+
+There are two ways to configure the Slack app. One is the Novu managed option and another the manually managed option.
+Since the Novu managed is fairly straightforward, I'll demonstrate the manual method here. Follow along to set it up!
+
+1. Goto 'Incoming Webhooks' in your Slack app settings and turn it on.
+
+ {" "}
+
+2. Click on the 'Add New Webhook to Workspace':
+
+ {" "}
+
+3. Now, go ahead and select the channel in which you want to send notifications and click 'allow'.
+
+ {" "}
+
+4. Then, copy the 'webhookUrl' from Slack.
+
+ {" "}
+
+5. Now, add the code below to the backend trigger functionality. Using this code, we are specifying what `webhookUrl` Novu will use to authenticate when using the Slack provider.
+
+
{" "}
+
+ 
{" "}
+
+
+This is how we send Slack notifications using Novu!
diff --git a/legacy-guides/usecases/centralized-multiple-legacy-implementations.mdx b/legacy-guides/usecases/centralized-multiple-legacy-implementations.mdx
new file mode 100644
index 00000000..7cb8b0ff
--- /dev/null
+++ b/legacy-guides/usecases/centralized-multiple-legacy-implementations.mdx
@@ -0,0 +1,13 @@
+---
+title: "Centralized multiple legacy implementations of different teams"
+description: "Learn to use Novu to centralize legacy notification implementations."
+---
+
+If you're coming from a medium or large team with multiple implementations of sending notifications across channels, then you can be rest assured that Novu will be the central gateway.
+
+- Install Novu's SDK (according to your preferred tech).
+- Connect your existing delivery providers to Novu.
+- [Migrate your users to subscribers](/concepts/subscribers#bulk-subscriber-creation) on Novu either via Cloud or on-prem.
+- Now, every notification fires via Novu.
+
+Teams in charge of content can always update the workflow templates via the dashboard. Engineers can always debug and add as many providers or activate as many more channels needed!
diff --git a/legacy-guides/usecases/debug-notifications.mdx b/legacy-guides/usecases/debug-notifications.mdx
new file mode 100644
index 00000000..c0b47697
--- /dev/null
+++ b/legacy-guides/usecases/debug-notifications.mdx
@@ -0,0 +1,20 @@
+---
+title: "Debug notifications across channels in a single place"
+description: "Understand the lifecycle of your notifications"
+---
+
+Debugging notifications can be a hassle. Novu allows you understand and debug notifications sent across different channels in one place.
+
+In [Novu's Activity Feed](https://dashboard-v2.novu.co/activities?utm_campaign=docs-usecases-debug), you can access a log of all the notifications that have been sent & filter through the successful & failed ones. Furthermore, you'll know why it failed!
+
+You can filter through channels, workflows, emails, subscribers and transactions.
+
+
+ 
+
+
+
+
diff --git a/legacy-guides/usecases/digest-multiple-events.mdx b/legacy-guides/usecases/digest-multiple-events.mdx
new file mode 100644
index 00000000..de20b33c
--- /dev/null
+++ b/legacy-guides/usecases/digest-multiple-events.mdx
@@ -0,0 +1,14 @@
+---
+title: "Digest multiple events in a single notification"
+description: "Learn to leverage Novu in digesting multiple events."
+---
+
+One of the recurring features developers yearn for is the ability to batch multiple notifications and send as one to subscribers.
+
+Novu ships with a built-in digest engine that handles batching and digesting multiple events in a single notification. You can programmatically adjust the digest recurrence or set it from the dashboard.
+
+
+ 
+
+
+[Explore more about Novu's Digest Feature](/workflow/digest)
diff --git a/legacy-guides/usecases/embedded-notification-center.mdx b/legacy-guides/usecases/embedded-notification-center.mdx
new file mode 100644
index 00000000..7220da89
--- /dev/null
+++ b/legacy-guides/usecases/embedded-notification-center.mdx
@@ -0,0 +1,16 @@
+---
+title: "Fully featured embedded notification center"
+description: "A real-time fully functional embedded notification center"
+---
+
+Novu provides a real-time embedded notification center widget that can simply be dropped into any web application.
+
+
+ 
+
+
+It's available as a drop-in component for React, Vue and Angular apps. For non-specific frameworks, it's also ready as a bundled web component.
+
+We care about the developer experience so much that we also built a headless, zero-UI version to empower you to hand-craft your notification center.
+
+[Explore a lot more about the Notification Center here](/inbox/overview)
diff --git a/legacy-guides/usecases/introduction.mdx b/legacy-guides/usecases/introduction.mdx
new file mode 100644
index 00000000..afd8f013
--- /dev/null
+++ b/legacy-guides/usecases/introduction.mdx
@@ -0,0 +1,55 @@
+---
+title: "Learn by usecase"
+description: "Learn Novu's Use Cases"
+---
+
+Novu is built to empower engineering teams in integrating rich product notification experiences seamlessly without re-inventing the wheel.
+
+It has been thoroughly and beautifully crafted to help individuals, teams, businesses and organizations focus on what truly matters: creating exceptional user experiences and driving engagement through smooth and swift notifications delivery.
+
+The common use cases for using Novu are highlighted below:
+
+
+
+
+### Add a new Delivery Provider
+
+
+ 
+
diff --git a/legacy-guides/usecases/send-notifications-at-any-scale.mdx b/legacy-guides/usecases/send-notifications-at-any-scale.mdx
new file mode 100644
index 00000000..2e8a6482
--- /dev/null
+++ b/legacy-guides/usecases/send-notifications-at-any-scale.mdx
@@ -0,0 +1,8 @@
+---
+title: "Processing and sending notifications at any scale"
+description: "Novu can handle notifications at extremely large scale"
+---
+
+[Novu's Cloud](https://dashboard-v2.novu.co?utm_campaign=docs-usecases-notificationsscale) is built to process and send notifications at any scale. For folks using the self-hosted Novu version, you can scale it up as your needs grow.
+
+If you're looking to use Novu on a very large scale & you need to confirm infrastructure & scalability prowess, [please reach out to us for more information](https://notify.novu.co/meetings/novuhq/notifications-45min?utm_campaign=docs-bam-usecases-notificationsscale).
diff --git a/linkedin-insights.js b/linkedin-insights.js
new file mode 100644
index 00000000..5974d4a7
--- /dev/null
+++ b/linkedin-insights.js
@@ -0,0 +1,14 @@
+(function (l) {
+ if (!l) {
+ window.lintrk = function (a, b) {
+ window.lintrk.q.push([a, b]);
+ };
+ window.lintrk.q = [];
+ }
+ var s = document.getElementsByTagName("script")[0];
+ var b = document.createElement("script");
+ b.type = "text/javascript";
+ b.async = true;
+ b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
+ s.parentNode.insertBefore(b, s);
+})(window.lintrk);
diff --git a/linkedin.js b/linkedin.js
new file mode 100644
index 00000000..e0a3898e
--- /dev/null
+++ b/linkedin.js
@@ -0,0 +1,3 @@
+_linkedin_partner_id = "5915650";
+window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
+window._linkedin_data_partner_ids.push(_linkedin_partner_id);
diff --git a/logo/dark.svg b/logo/dark.svg
index f78dd4c7..1dfd9c79 100644
--- a/logo/dark.svg
+++ b/logo/dark.svg
@@ -11,9 +11,9 @@
+
+## Code Example
+
+```javascript
+import { workflow } from '@novu/framework';
+import { renderFeedbackEmail } from '../emails/feedback';
+import { zodControlSchema, zodDelayControlSchema, zodPayloadSchema } from './schemas';
+
+export const AirbnbReview = workflow(
+ "Airbnb Review",
+ async ({ step, payload }) => {
+ /**
+ * Delay Step
+ */
+ await step.delay(
+ 'delay-1-week',
+ async (controls) => {
+ return {
+ type: "regular",
+ unit: controls.unit, // 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months'
+ amount: controls.amount, // the number of units to delay workflow execution for
+ };
+ },
+ {
+ controlSchema: zodDelayControlSchema
+ }
+ );
+
+ /**
+ * Email Step
+ */
+ await step.email(
+ "send-email",
+ async (controls) => {
+ return {
+ subject: controls.emailSubject,
+ body: renderFeedbackEmail(controls, payload),
+ };
+ },
+ {
+ controlSchema: zodControlSchema
+ }
+ );
+ },
+ {
+ payloadSchema: zodPayloadSchema
+ },
+);
+```
\ No newline at end of file
diff --git a/recipes/workflows/introduction.mdx b/recipes/workflows/introduction.mdx
new file mode 100644
index 00000000..a7f3581f
--- /dev/null
+++ b/recipes/workflows/introduction.mdx
@@ -0,0 +1,35 @@
+---
+title: "Common Notification Workflow Examples"
+sidebarTitle: "Overview"
+description: "You shouldn't have to reinvent the wheel. Here we share how to implement several real-world use cases of notifications workflows."
+---
+
+## Workflow examples
+
+This directory consists of drop-in working projects of different types of notification workflows you can use.
+
+Each directory is a batteries-included Novu Nextjs app that you can simply clone, install and run!
+
+
+
+
+
+## Code example
+
+```javascript
+import { workflow } from '@novu/framework';
+import { renderAppleReceiptEmail } from '../emails/apple-receipt';
+import { zodControlSchema, jsonSchema, zodPayloadSchema } from './schemas';
+
+/**
+ * Apple Receipt workflow
+ */
+export const appleReceipt = workflow(
+ "Apple Receipt",
+ async ({ step, payload }) => {
+ await step.email(
+ "send-email",
+ async (controls) => {
+ return {
+ subject: controls.receiptSubject,
+ body: renderAppleReceiptEmail(controls, payload),
+ };
+ },
+ {
+ controlSchema: zodControlSchema
+ },
+ );
+ },
+ {
+ payloadSchema: zodPayloadSchema
+ }
+);
+```
\ No newline at end of file
diff --git a/recipes/workflows/multi-workflow-digest.mdx b/recipes/workflows/multi-workflow-digest.mdx
new file mode 100644
index 00000000..a3fd6a96
--- /dev/null
+++ b/recipes/workflows/multi-workflow-digest.mdx
@@ -0,0 +1,124 @@
+---
+title: "Multi Workflow Digest Summary"
+sidebarTitle: "Multi-workflow digest"
+description: "Send a digest notification email by batching different types of notifications from multiple workflows"
+---
+
+## Introduction
+
+This example demonstrates how to send a digest notification email by batching different types of notifications from multiple workflows using the Novu Framework. The digest notification email is sent to the user with a summary of all the notifications that have been triggered by different workflows.
+
+**Use case**: Linear is a project management tool that allows users to create and manage projects and tickets. When someone comments on the ticket, someone assigns the ticket to the user or there can be more events for which the user has turned on the Notification, the user receives a notification. The user can receive multiple notifications in a short period. To avoid spamming the user with multiple emails, Linear sends a digest notification email that contains a summary of all the notifications.
+
+Source Code on GitHub: [Multi-workflow digest](https://github.com/novuhq/examples/tree/main/novu-workflows/react/multi-workflow-digest)
+
+
+
+## Code Example
+
+```typescript Summary worklflow to digest all notifications from different workflows
+import { CronExpression, workflow } from "@novu/framework";
+import { renderLinearDigestEmail } from "../../emails/linear-digest";
+import {
+ ticketAssignedPayloadSchema,
+ commentOnTicketPayloadSchema,
+ summaryWorkflowPayloadSchema,
+} from "./schemas";
+
+export const summaryWorkflow = workflow(
+ "multi-workflow-digest",
+ async ({ step }) => {
+ // Digest all notifications from different workflows
+ const digestedNotifications = await step.digest(
+ "digest-all-notifications",
+ async () => {
+ return {
+ cron: CronExpression.EVERY_DAY_AT_8AM,
+ };
+ }
+ );
+
+ // Send digested notifications via email
+ await step.email("send-email", async () => {
+ return {
+ subject: `${digestedNotifications.events.length} unread notifications on Novu - Linear`,
+ body: renderLinearDigestEmail(digestedNotifications.events),
+ };
+ });
+ },
+ {
+ payloadSchema: summaryWorkflowPayloadSchema,
+ }
+);
+```
+
+```typescript Workflow to send notification when someone comments on a ticket
+export const someoneCommentedOnTicket = workflow(
+ "someone-commented-on-ticket",
+ async ({ step, payload, subscriber }) => {
+ await step.inApp("send-inbox-notification", async () => {
+ return {
+ body: `${payload.comment.author.userName} commented ${payload.comment.text} on ticket ${payload.ticket.id}`,
+ };
+ });
+
+ await step.custom("digest-the-message", async () => {
+ try {
+ await summaryWorkflow.trigger({
+ to: subscriber?.subscriberId as string,
+ payload: payload,
+ });
+ return {
+ success: true,
+ error: null,
+ };
+ } catch (error) {
+ return {
+ success: false,
+ error: error,
+ };
+ }
+ });
+ },
+ {
+ payloadSchema: commentOnTicketPayloadSchema,
+ }
+);
+```
+
+```typescript Workflow to send notification when a ticket is assigned to the user
+export const ticketAssigned = workflow(
+ "ticket-assigned-to-user",
+ async ({ step, payload, subscriber }) => {
+ await step.inApp("send-inbox-notification", async () => {
+ return {
+ body: `${payload.assign.author.userName} assigned ticket ${payload.ticket.id} ${payload.ticket.title} to you.`,
+ };
+ });
+
+ await step.custom("digest-the-message", async () => {
+ try {
+ await summaryWorkflow.trigger({
+ to: subscriber?.subscriberId as string,
+ payload: payload,
+ });
+ return {
+ success: true,
+ error: null,
+ };
+ } catch (error) {
+ return {
+ success: false,
+ error: error,
+ };
+ }
+ });
+ },
+ {
+ payloadSchema: ticketAssignedPayloadSchema,
+ }
+);
+```
\ No newline at end of file
diff --git a/recipes/workflows/otp.mdx b/recipes/workflows/otp.mdx
new file mode 100644
index 00000000..1058251c
--- /dev/null
+++ b/recipes/workflows/otp.mdx
@@ -0,0 +1,81 @@
+---
+title: "OTP (One-Time Password)"
+description: "Send OTPs without setting up your own infrastructure"
+---
+
+## Intro
+
+Sending One-Time Passwords (OTP) is often unnecessarily complicated, requiring engineering teams to waste valuable development cycles setting up SMS infrastructure and getting email reputation satisfactory for sending six digit passcodes. This three channel workflow example shows how to send an email, push notification, or SMS OTP.
+
+[Explore the source code on GitHub](https://github.com/novuhq/examples/tree/main/novu-workflows/react/otp)
+
+## Preview
+
+Send an email
+
+
+Send a mobile push notification
+
+
+Send an SMS notification
+
+
+
+## Code Sample
+
+```javascript
+import { workflow } from '@novu/framework';
+import { renderOtpEmail } from '../emails/slack-otp';
+import { zodControlSchema, zodPayloadSchema, zodPushControlSchema, zodSmsControlSchema } from './schemas';
+
+export const SlackVerificationOTP = workflow(
+ "Slack Verify OTP",
+ async ({ step, payload }) => {
+ await step.email(
+ "send-email",
+ async (controls) => {
+ return {
+ subject: controls.emailSubject,
+ body: renderOtpEmail(controls, payload),
+ };
+ },
+ {
+ controlSchema: zodControlSchema
+ });
+
+ // -----------------------------------push flow-------------------------------------------------------------------------
+ await step.push('send-push', async (controls) => {
+ return {
+ subject: controls.pushNotificationSubject,
+ body: `Your verification code from Slack is ${payload.validationCode}`,
+ };
+ },
+ {
+ controlSchema: zodPushControlSchema
+ });
+
+ // -----------------------------------sms flow-------------------------------------------------------------------------
+ await step.sms('send-sms', async (controls) => {
+ return {
+ subject: controls.smsSubject,
+ body: `Your verification code from Slack is ${payload.validationCode}`,
+ };
+ },
+ {
+ controlSchema: zodSmsControlSchema
+ });
+ },
+ {
+ payloadSchema: zodPayloadSchema
+ },
+);
+```
diff --git a/recipes/workflows/password-reset.mdx b/recipes/workflows/password-reset.mdx
new file mode 100644
index 00000000..53edd773
--- /dev/null
+++ b/recipes/workflows/password-reset.mdx
@@ -0,0 +1,48 @@
+---
+title: "Password Reset"
+description: "Help users reclaim access to their account via the 'Password Reset' or 'Forgot Username' functions"
+---
+
+## Intro
+
+To help users re-establish access to their account securely, a password reset email should be succint and have a unique password reset URL that expires after a given time. This example uses the payload schema to fetch the unique expiring password reset link.
+
+[Explore the source code on GitHub](https://github.com/novuhq/examples/tree/main/novu-workflows/react/password-reset)
+
+## Preview
+
+
+
+
+## Code Example
+
+```javascript
+import { workflow } from '@novu/framework';
+import { renderPasswordResetEmail } from '../emails/password-reset';
+import { zodControlSchema, zodPayloadSchema } from './schemas';
+
+export const DropboxPasswordResetEmail = workflow(
+ "Dropbox Password Reset",
+ async ({ step, payload }) => {
+ await step.email(
+ "send-email",
+ async (controls) => {
+ return {
+ subject: controls.emailSubject,
+ body: renderPasswordResetEmail(controls, payload),
+ };
+ },
+ {
+ controlSchema: zodControlSchema
+ }
+ );
+ },
+ {
+ payloadSchema: zodPayloadSchema
+ }
+);
+```
+
diff --git a/recipes/workflows/recent-login.mdx b/recipes/workflows/recent-login.mdx
new file mode 100644
index 00000000..fd245c08
--- /dev/null
+++ b/recipes/workflows/recent-login.mdx
@@ -0,0 +1,66 @@
+---
+title: "Recent Login"
+description: "Notify users of recent login activity"
+---
+
+## Intro
+
+Sending recent logins is a great way to inform users of possible unusal activity and verify their usage. This workflow example leverages the payload schema to display the login IP, and notifies users through both email and a push notification.
+
+[Explore the source code on GitHub](https://github.com/novuhq/examples/tree/main/novu-workflows/react/recent-login)
+
+## Preview
+
+
+
+
+## Code Example
+
+```javascript
+import { workflow } from '@novu/framework';
+import { renderLoginEmail } from '../emails/yelp-recent-login';
+import { zodControlSchema, zodPayloadSchema, zodPushControlSchema } from './schemas';
+
+export const YelpRecentLogin = workflow(
+ "Yelp Recent Login",
+ async ({ step, payload }) => {
+ /**
+ * Email Flow
+ */
+ await step.email(
+ "send-email",
+ async (controls) => {
+ return {
+ subject: "Recent login to your Account",
+ body: renderLoginEmail(controls, payload),
+ };
+ },
+ {
+ controlSchema: zodControlSchema
+ },
+ );
+
+ /**
+ * Push Flow
+ */
+ await step.push(
+ "send-push",
+ async (controls) => {
+ return {
+ subject: controls.pushNotificationSubject,
+ body: `Hi ${payload.userFirstName}, we noticed a recent login to your Yelp account. If this was you, there's nothing else you need to do. If this wasn't you or please see our support page.`,
+ };
+ },
+ {
+ controlSchema: zodPushControlSchema
+ }
+ );
+ },
+ {
+ payloadSchema: zodPayloadSchema
+ },
+);
+```
diff --git a/recipes/workflows/scaffold.mdx b/recipes/workflows/scaffold.mdx
new file mode 100644
index 00000000..ee0b67e2
--- /dev/null
+++ b/recipes/workflows/scaffold.mdx
@@ -0,0 +1,124 @@
+---
+title: ""
+description: ""
+---
+
+## Intro
+
+
+[Explore the source code on GitHub](https://github.com/novuhq/examples/tree/main/novu-workflows/react/otp)
+
+## Preview
+
+
+
+
+
+## Code Example
+
+```javascript
+import { Client, workflow } from "@novu/framework";
+import { renderOtpEmail } from "./emails/slack-otp";
+
+
+export const client = new Client({
+ /**
+ * Enable this flag only during local development
+ */
+ strictAuthentication: false,
+});
+
+export const SlackVerificationOTP = workflow(
+ "Slack Verify OTP",
+ async ({ step, payload }) => {
+ await step.email(
+ "send-email",
+ async (inputs) => {
+ return {
+ subject: inputs.emailSubject,
+ body: renderOtpEmail(inputs, payload),
+ };
+ },
+ {
+ inputSchema: {
+ type: "object",
+ properties: {
+ emailSubject: {
+ title: "Email Subject",
+ type: "string",
+ default: "Verify your Slack OTP!"
+ },
+ confirmAddressHeader: {
+ type: "string",
+ default: "Confirm your email address",
+ title: "Confirm Address Header"
+ },
+ majorBodyText: {
+ type: "string",
+ default: "Your confirmation code is below - enter it in your open browser window and we'll help you get signed in.",
+ title: "Major Body Text"
+ },
+ showMagicLink: {
+ type: "boolean",
+ default: false,
+ title: "Show Magic Link"
+ },
+ linkText: {
+ type: 'string',
+ default: 'Click this link if the OTP does not work for you!',
+ title: 'Magic link Text'
+ },
+ showOTP: {
+ type: "boolean",
+ default: true,
+ title: "Show OTP"
+ },
+ },
+ },
+ });
+
+ // -----------------------------------push flow-------------------------------------------------------------------------
+ await step.push('send-push', async () => {
+ return {
+ subject: 'You received a Slack OTP',
+ body: `Your verification code from Slack is ${payload.validationCode}`,
+ };
+ });
+
+ // -----------------------------------sms flow-------------------------------------------------------------------------
+ await step.sms('send-sms', async () => {
+ return {
+ subject: 'You received a Slack OTP',
+ body: `Your verification code from Slack is ${payload.validationCode}`,
+ };
+ });
+ },
+ {
+ payloadSchema: {
+ type: "object",
+ properties: {
+ validationCode: {
+ type: "string",
+ default: "123456",
+ title: "OTP",
+ },
+ magicLinkURL: {
+ type: "string",
+ default: "https://slack.com/magic/link",
+ title: "Magic Link URL"
+ }
+ },
+ },
+ },
+);
+
+```
+
+## Installation
+
+```
+npm run dev
+```
diff --git a/recipes/workflows/shipping-confirmation.mdx b/recipes/workflows/shipping-confirmation.mdx
new file mode 100644
index 00000000..be8ab583
--- /dev/null
+++ b/recipes/workflows/shipping-confirmation.mdx
@@ -0,0 +1,51 @@
+---
+title: "Shipping Confirmation"
+description: "Let buyers know their order is on the way!"
+---
+
+## Intro
+
+What delights the dopamine receptors more than an email confirming their order's delivery date? Reward your buyers by letting them know their order is confirmed and on the way, complete with tracking info fetched by leveraging the payload schema.
+
+[Explore the source code on GitHub](https://github.com/novuhq/examples/tree/main/novu-workflows/react/shipping-order-confirmation)
+
+## Preview
+
+
+
+
+## Code Example
+
+```javascript
+import { workflow } from '@novu/framework';
+import { renderShippingOrderEmail } from '../emails/shipping-order-confirmation';
+import { zodControlSchema, zodPayloadSchema, jsonControlSchema, jsonPayloadSchema } from './schemas';
+
+export const AmazonShippingOrderConfirmation = workflow(
+ "Amazon Shipping Order",
+ async ({ step, payload }) => {
+ await step.email(
+ "send-email",
+ async (controls) => {
+ return {
+ subject: controls.emailSubject,
+ body: renderShippingOrderEmail(controls, payload),
+ };
+ },
+ {
+ controlSchema: zodControlSchema
+ }
+ );
+ },
+ {
+ payloadSchema: zodPayloadSchema
+ },
+);
+```
+
+
+
+
+### Applying Liquid Filters
+
+The variable popover will display a list of suggested Liquid Filters based on the variable type, you can apply one or more filters to the variable and re-order using drag and drop.
+Re-ordering filters is useful as the filters are applied in the order they are listed, and the output of each filter is passed to the next one.
+
+### Previewing filters output
+
+With more advanced filter logic, you can preview the output of the filters by clicking on the **Preview** button and pass the variable value to see how the filters will be applied.
+
+### Raw Liquid.js syntax
+
+You can also apply raw Liquid.js syntax to the variable by clicking on the **Raw** button which will reveal the raw Liquid.js content that will be applied to the variable.
+
+## Adding logic with Liquid Filters
+
+Novu supports Liquid filters to add dynamic and conditional content to your notifications. Below are examples of how to use the top 10 Liquid filters in real-world notification templates.
+
+Learn more about the Liquid Templating Language.
+
+
+### `capitalize`
+
+Use `capitalize` to ensure proper formatting for user names.
+
+```liquid
+Hello {{ subscriber.firstName | capitalize }},
+Welcome to Novu! We're excited to have you on board.
+```
+
+**Output**:
+`Hello John,
+Welcome to Novu! We're excited to have you on board.`
+
+---
+
+### `upcase`
+
+Use `upcase` for emphasizing specific information like workspace names.
+
+```liquid
+Your workspace {{ payload.workspaceName | upcase }} has been successfully created.
+```
+
+**Output**:
+`Your workspace TEAM ALPHA has been successfully created.`
+
+---
+
+### `downcase`
+
+Use `downcase` for consistent email formatting or usernames.
+
+```liquid
+Hi {{ subscriber.email | downcase }},
+We’ve sent a confirmation to your inbox.
+```
+
+**Output**:
+`Hi john.doe@example.com,
+We’ve sent a confirmation to your inbox.`
+
+---
+
+### `date`
+
+Use `date` to format subscription or event dates.
+
+```liquid
+Your subscription will renew on {{ payload.renewalDate | date: "%B %d, %Y" }}.
+```
+
+**Output**:
+`Your subscription will renew on December 31, 2024.`
+
+---
+
+### `truncate`
+
+Use `truncate` to shorten long content like notification messages.
+
+```liquid
+New comment on your post: {{ payload.commentText | truncate: 20 }}
+Click here to read more.
+```
+
+**Output**:
+`New comment on your post: Great work on your...
+Click here to read more.`
+
+---
+
+### `truncatewords`
+
+Use `truncatewords` to limit the number of words in a preview.
+
+```liquid
+{{ subscriber.firstName }}, here's a preview of the article:
+{{ payload.articleExcerpt | truncatewords: 5 }}
+```
+
+**Output**:
+`John, here's a preview of the article:
+Novu is a flexible and...`
+
+---
+
+### `replace`
+
+Use `replace` to dynamically update template content.
+
+```liquid
+Hi {{ subscriber.firstName }},
+Your {{ payload.subscriptionType | replace: "basic", "premium" }} subscription is active.
+```
+
+**Output**:
+`Hi John,
+Your premium subscription is active.`
+
+---
+
+### `split`
+
+Use `split` to parse tags or interests.
+
+```liquid
+You have new updates in {{ payload.tags | split: "," | join: ", " }}.
+```
+
+**Input**:
+`"announcements,updates,offers"`
+
+**Output**:
+`You have new updates in announcements, updates, offers.`
+
+---
+
+### `join`
+
+Use `join` to list multiple items in a human-readable way.
+
+```liquid
+Hello {{ subscriber.firstName }},
+You have the following items pending: {{ payload.tasks | join: ", " }}.
+```
+
+**Input**:
+`["Upload documents", "Confirm email", "Schedule meeting"]`
+
+**Output**:
+`Hello John,
+You have the following items pending: Upload documents, Confirm email, Schedule meeting.`
+
+---
+
+### `default`
+
+Use `default` to provide fallback values.
+
+```liquid
+Hi {{ subscriber.nickname | default: subscriber.firstName }},
+Your account settings are updated.
+```
+
+**Output (when nickname is null)**:
+`Hi John,
+Your account settings are updated.`
+
+