diff --git a/additional-resources/glossary.mdx b/additional-resources/glossary.mdx index 7577845d..01228d4a 100644 --- a/additional-resources/glossary.mdx +++ b/additional-resources/glossary.mdx @@ -23,9 +23,9 @@ Novu lets you send notifications across different communication mediums, includi {" "} -## Providers Providers are responsible for handling message delivery across various -channels. Novu currently supports multiple notification channels, each with its own -set of providers. +## 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 diff --git a/additional-resources/security.mdx b/additional-resources/security.mdx index 1b55fcca..1f6d3410 100644 --- a/additional-resources/security.mdx +++ b/additional-resources/security.mdx @@ -1,6 +1,6 @@ --- title: "Security and Compliance" -description: "Common questions related to security, compliance, privacy policy and terms and conditions" +description: "Common questions about security, compliance, privacy policy, and terms and conditions" icon: "shield" --- @@ -39,8 +39,8 @@ By default, data is stored using the following TTL values - Notifications (for 1 month) - Jobs (for 1 month) - Message (for in-app messages - 12 months, for all other messages - 1 month) -- Execution Details (for 1 month) -- Subscribers, Workflows, Feeds, Layouts (Not deleted automatically, can be deleted by the user at any time) +- Execution details (for 1 month) +- Subscribers, workflows, feeds, layouts (not deleted automatically, can be deleted by the user at any time) If you want to delete any specific data or information, reach out to us at support@novu.co diff --git a/api-reference/events/trigger-event.mdx b/api-reference/events/trigger-event.mdx index 89725928..fd6e71c4 100644 --- a/api-reference/events/trigger-event.mdx +++ b/api-reference/events/trigger-event.mdx @@ -134,7 +134,7 @@ url = "https://api.novu.co" api_key = "" novu = EventApi(url, api_key).trigger( - name="", # This is the Workflow ID. It can be found on the workflow page. + name="", # This is the workflow ID. It can be found on the workflow page. recipients="", # The subscriber ID can be gotten from the dashboard. payload={}, # Your custom Novu payload goes here ) diff --git a/api-reference/workflows/create-workflow.mdx b/api-reference/workflows/create-workflow.mdx index 63438902..14f84ad7 100644 --- a/api-reference/workflows/create-workflow.mdx +++ b/api-reference/workflows/create-workflow.mdx @@ -31,7 +31,7 @@ import { const novu = new Novu(""); await novu.notificationTemplates.create({ - name: "Onboarding Workflow", + name: "Onboarding workflow", // taking first workflow group id notificationGroupId: workflowGroupsData.data[0]._id, steps: [ diff --git a/architecture/diagrams.mdx b/architecture/diagrams.mdx deleted file mode 100644 index 7a3a0e23..00000000 --- a/architecture/diagrams.mdx +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: "Novu Architecture Diagram" -version: "v0.21.0" ---- - -# Novu Architecture Diagram powered by [terrastruct](https://terrastruct.com) and D2 - -If the diagram below is not rendering, please [click here](https://app.terrastruct.com/diagrams/1895866270) to view it on terrastruct.com. - - diff --git a/architecture/introduction.mdx b/architecture/introduction.mdx deleted file mode 100644 index b1c5e62c..00000000 --- a/architecture/introduction.mdx +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: "Introduction to Novu" -description: "Overview of Novu's Architecture" -version: "v0.21.0" ---- - -Novu is an open-source notification infrastructure designed to provide a robust, efficient, and flexible solution for managing notifications across various platforms. -The architecture of Novu is meticulously crafted to ensure accurate delivery of notifications while maintaining high performance and scalability. - -Our systems are hosted on Amazon Web Services (AWS), ensuring a reliable and secure environment for our infrastructure. -We adhere to several industry-standard compliance certifications including SOC II, PCI, and GDPR which underline our commitment to security and data privacy. - -## Framework Leveraged - -- **Nestjs**: A progressive Node.js framework that is used for building efficient, reliable, and scalable server-side applications. Nestjs provides a high-level abstraction with a lot of out-of-the-box features, making it a perfect choice for building modular and maintainable applications. -- **Mongoose**: An elegant Object Document Mapper (ODM) for MongoDB, which simplifies the interaction with the database by providing a straightforward modeling of the application data. Mongoose’s features like schema validation, query building, and middleware support immensely help in building robust applications. -- **BullMQ**: A robust, fast, and reliable queue library for handling distributed jobs and messages in Node.js. It is instrumental in managing the processing of notification jobs ensuring they are handled in an efficient and reliable manner. - -## Databases - -- **MongoDB**: A NoSQL database that provides high performance, high availability, and easy scalability. It works on a document-oriented data model, which is extremely flexible and allows for varied, complex data structures to be stored and manipulated with ease. -- **Redis**: An in-memory data structure store, used as a database, cache, and message broker. It's exceptionally fast and provides support for various data structures like strings, hashes, lists, sets, etc. It's utilized in Novu for caching and as a reliable message broker for managing queues and real-time data processing. - -## Scalability & Performance - -The architecture of Novu is designed to scale horizontally to handle a growing number of notification requests. The use of microservices, container orchestration with Kubernetes, and leveraging AWS’s auto-scaling capabilities, ensure that the system can handle high loads while maintaining low latency and high throughput. - -## Monitoring & Observability - -Monitoring and observability are crucial for ensuring the reliable operation of Novu. Utilizing tools like Prometheus and Grafana, we've built a comprehensive monitoring and alerting system that provides real-time insights into the system’s performance and health. - -## Security - -Security is a paramount concern in Novu’s architecture. By adhering to industry-standard security practices and compliance certifications, we ensure that the data flowing through Novu is handled securely and in compliance with regulatory requirements. diff --git a/community/introduction.mdx b/community/overview.mdx similarity index 100% rename from community/introduction.mdx rename to community/overview.mdx diff --git a/community/project-differences.mdx b/community/project-differences.mdx index f2be124c..fe13fa6f 100644 --- a/community/project-differences.mdx +++ b/community/project-differences.mdx @@ -19,16 +19,16 @@ Below you will find a table that outlines the best available Novu Cloud Tier, co |--- | --- | --- | |Channels supported: Email, In-app, SMS, Chat, Push | ✅ | ✅ | |Notification Subscribers | Unlimited | Infratructure dependent | -|GUI-based workflows | Nov 2024 | ✅ | -|Code-based workflows | ✅ | ✅ | -|Subscriber management| Nov 2024 | ❌ | +|GUI-based workflows | ✅ | ✅ | +|Code-based Framework workflows | ✅ | ✅ | +|Subscriber management| Q1 2025 | ❌ | |Multi-org/multi-tenancy | Q1 2025 | ❌ | |**FRAMEWORK**| -|Max Workflows | Unlimited | Infratructure dependent | +|Max workflows | Unlimited | Infratructure dependent | |Provider integrations | Unlimited | Unlimited | -|Activity Feed retention | Unlimited | Infratructure dependent | +|Activity feed retention | Unlimited | Infratructure dependent | |Digests | ✅ | Infratructure dependent | -|Workflow Step Controls | ✅ | ✅ | +|Workflow step controls | ✅ | ✅ | |Translations| ✅ | ✅ | |Block-based email editor | Nov 2024 | Nov 2024 | |**INBOX**| diff --git a/community/self-hosting-novu/introduction.mdx b/community/self-hosting-novu/overview.mdx similarity index 69% rename from community/self-hosting-novu/introduction.mdx rename to community/self-hosting-novu/overview.mdx index 8dd1bd47..f4aa3bb5 100644 --- a/community/self-hosting-novu/introduction.mdx +++ b/community/self-hosting-novu/overview.mdx @@ -1,17 +1,17 @@ --- -title: 'Introduction' -description: '' +title: 'Overview' +description: 'Self-hosting Novu provides full control and flexibility over your notification infrastructure, with specific system requirements for optimal performance across VMs, Redis, MongoDB, and S3 storage.' icon: 'code' --- When self-hosting Novu, you take full control over your communication infrastructure by deploying it on your own servers. While this setup allows for customization and greater flexibility, it is important to note that some features exclusive to Novu’s cloud-managed solution will not be available in a self-hosted environment. -## System Requirements Overview +## System requirements overview -### Hosting Novu Services on Separate VMs +### Hosting Novu services on separate VMs For optimal performance, we recommend hosting Novu's core services across multiple virtual machines (VMs). -- **Novu Services:** +- **Novu services:** - 3 VMs per service - Each VM: 2 vCPUs and 4GB of RAM - **Redis:** @@ -22,22 +22,22 @@ For optimal performance, we recommend hosting Novu's core services across multip - **Storage:** - 10GB of S3 storage -### Hosting All Novu Services on a Single VM +### Hosting all Novu services on a single VM If resources are limited or simplicity is a priority, Novu services can be hosted on a single VM. -- **All Services:** 36 vCPUs and 64GB of RAM +- **All services:** 36 vCPUs and 64GB of RAM - **Storage:** 10GB of S3 storage -### Redis Requirements +### Redis requirements - **Redis Clusters:** 2 (one for queues with AOL enabled) - **Memory:** 8GB RAM per cluster - **AOL:** Active Append-Only Log (AOL) for data persistence and to prevent job loss during outages. -### MongoDB Requirements -- **MongoDB Cluster:** M20 or higher (recommended) on MongoDB Atlas. +### MongoDB requirements +- **MongoDB cluster:** M20 or higher (recommended) on MongoDB Atlas. -### Storage Requirements -- **S3 Storage:** Minimum 10GB for file storage. +### Storage requirements +- **S3 storage:** Minimum 10GB for file storage. The above specifications are general recommendations. Adjust them based on your system load, usage patterns, and scale of operations. Self-hosting Novu does not support GitHub login. To access your account, please use the email and password associated with your Novu account. \ No newline at end of file diff --git a/concepts/endpoint.mdx b/concepts/endpoint.mdx index f2fa833f..996cd8e9 100644 --- a/concepts/endpoint.mdx +++ b/concepts/endpoint.mdx @@ -1,68 +1,68 @@ --- -title: "Bridge Endpoint" +title: "Framework Endpoint" +description: "Learn how to customize and extend any aspect of the Novu platform using the Framework SDK powered bridge endpoint." --- -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**. - -You can view the Bridge Endpoint as a webhook endpoint that Novu will call when it needs to retrieve contextual information for a given subscriber and notification. - -Using the `npx novu init` command creates a Bridge application for you with a Bridge Endpoint ready to go. - -## The `serve` function - -We offer framework specific wrappers in form of an exported `serve` function that abstracts away: - -- Parsing the incoming request for `GET`, `POST`, `PUT` and `OPTIONS` requests -- HMAC header authentication -- Framework specific response and error handling - -Currently, we offer `serve` functions for the following frameworks: - -- [Next.js](/quickstart/nextjs) -- [Express.js](/quickstart/express) -- [Nuxt](/quickstart/nuxt) -- [h3](/quickstart/h3) -- [Remix](/quickstart/remix) -- [Sveltekit](/quickstart/svelte) - -## Writing a custom `serve` function - -If we currently don't support your framework, you can write a custom `serve` function like the following example: - -```ts -import { type Request, type Response } from "express"; -import { NovuRequestHandler, ServeHandlerOptions } from "@novu/framework"; - -export const serve = (options: ServeHandlerOptions): any => { - const requestHandler = new NovuRequestHandler({ - frameworkName: "express", - ...options, - handler: (incomingRequest: Request, response: Response) => ({ - method: () => incomingRequest.method, - headers: (key) => { - const header = incomingRequest.headers[key]; - return Array.isArray(header) ? header[0] : header; - }, - queryString: (key) => { - const qs = incomingRequest.query[key]; - return Array.isArray(qs) ? qs[0] : qs; - }, - body: () => incomingRequest.body, - url: () => - new URL( - incomingRequest.url, - `https://${incomingRequest.headers.get("host") || ""}` - ), - transformResponse: ({ body, headers, status }) => { - Object.entries(headers).forEach(([headerName, headerValue]) => { - response.setHeader(headerName, headerValue); - }); - - return response.status(status).send(body); - }, - }), - }); - - return requestHandler.createHandler(); -}; -``` +import { SvelteIcon } from "/snippets/icons/svelte.mdx"; +import { NestjsIcon } from "/snippets/icons/nestjs.mdx"; +import { ExpressjsIcon } from "/snippets/icons/expressjs.mdx"; +import { LambdaIcon } from "/snippets/icons/lambda.mdx"; +import { NuxtIcon } from "/snippets/icons/nuxt.mdx"; +import { NextjsIcon } from "/snippets/icons/nextjs.mdx"; +import { RemixIcon } from "/snippets/icons/remix.mdx"; +import { H3Icon } from "/snippets/icons/h3.mdx"; +import { FrameworkTerminal } from "/snippets/framework-terminal.mdx"; + +Novu was built for endless extensibility. Although not required for majority of your notification usecases, you can customize and extend any aspect of the Novu platform using the Framework SDK powered bridge endpoint. + +## Overview + +The framework endpoint is a Restful API path that runs on your server and environment and can be used for multiple usecases including: + +- Automating workflow creation using GitOps +- Adding custom components to your emails and other channels +- Hydrating resources including subscribers, topics and tenants directly from your database +- Executing custom logic before, during and after a workflow is executed +- Connect to 3rd-party services such as OpenAI, Stripe, Salesforce and more. +- Implement custom delivery providers with internal systems + +## How it works + + + + + +### 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: + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + + The Framework SDK is currently only supported in Typescript for JS based run-times. + diff --git a/concepts/environments.mdx b/concepts/environments.mdx index a22c5949..42f961e9 100644 --- a/concepts/environments.mdx +++ b/concepts/environments.mdx @@ -33,6 +33,6 @@ Each environment will be accessed using a separate credential set: We suggest configuring these key sets based on your active environment, the same as you would use to manage different service credentials and serve them based on the current environment in which your code is deployed. -## Promoting changes to production +## Syncing changes to production -When moving changes from the `development` environment to the `production` environment, we suggest using your CI/CD pipeline to promote the changes. +When moving changes from the `development` environment to the `production` environment, you can "Sync" those changes from the Dashboard interface or using the Sync API for your framework based workflow using CI/CD. \ No newline at end of file diff --git a/concepts/integrations.mdx b/concepts/integrations.mdx index 06449c9c..c0aa818d 100644 --- a/concepts/integrations.mdx +++ b/concepts/integrations.mdx @@ -29,7 +29,7 @@ You can find the list of available integrations for each channel: Integrate with chat platforms - + Manage in-app notification center diff --git a/concepts/notifications.mdx b/concepts/notifications.mdx new file mode 100644 index 00000000..6fe063aa --- /dev/null +++ b/concepts/notifications.mdx @@ -0,0 +1,77 @@ +--- +title: "Notifications" +description: "Learn about what Novu Notifications are, their structure, and functionality" +--- + +Notifications in Novu are the primary data entities that facilitate communication between your application and its users. These entities encapsulate critical details about the subscriber, the message, and the delivery process, enabling streamlined and reliable interactions across various channels. + +## Anatomy of a notification + +A notification in Novu is designed to provide complete visibility and control over its lifecycle. + +```json Sample Notification Object +{ + "data": { + "_id": "", + "_environmentId": "", + "_organizationId": "", + "transactionId": "", + "createdAt": "", + "channels": "in_app", + "subscriber": { + "firstName": "", + "_id": "", + "lastName": "", + "email": "", + "phone": "" + }, + "template": { + "_id": "", + "name": "", + "triggers": [ + "" + ] + }, + "jobs": [ + "" + ] + } +} +``` + +### Key Components + +1. **Identification** + - `_id`: Unique identifier for the notification. + - `_environmentId`: Links the notification to a specific environment (e.g., staging, production). + - `_organizationId`: Identifies the organization that owns the notification. + +2. **Transaction and timing** + - `transactionId`: Tracks individual notification transactions for auditing and debugging. + - `createdAt`: Timestamp indicating when the notification was created. + +3. **Channel and delivery** + - `channels`: Specifies the delivery channel, such as in-app notifications, email, SMS, or push notifications. + +4. **Subscriber details** + - `subscriber`: Contains user-specific data: + - `firstName`, `lastName`, `email`, `phone`: Information about the recipient. + - `_id`: A unique identifier for the subscriber. + +5. **Notification workflow** + - `template`: Links the notification to a predefined message format: + - `_id`: Identifier for the workflow. + - `name`: Workflow name. + - `triggers`: Events or actions that initiate the notification (e.g., user sign-up, order confirmation). + +6. **Jobs** + - `jobs`: Tracks tasks associated with processing and delivering the notification. + +--- + +### Notification APIs + + + Query notifications and update messages individually or in batches via the Novu API. + + diff --git a/concepts/preferences.mdx b/concepts/preferences.mdx index ddb8ebad..bff1d107 100644 --- a/concepts/preferences.mdx +++ b/concepts/preferences.mdx @@ -60,7 +60,7 @@ In those cases you can mark a workflow as `critical` in the Dashboard. Critical title="Define workflow channel preferences" icon="code" color="#16a34a" - href="/sdks/framework/typescript/workflow#workflow-channel-preferences" + href="/framework/typescript/workflow#workflow-channel-preferences" /> - -### Steps: -- `mkdir export_novu_subscribers` -- `cd export_novu_subscribers` -- create `fetch_subscribers.js` file and copy [export_novu_subscribers.js](https://gist.github.com/jainpawan21/8604b4b2c1582b419e837bdc72290696#file-export_novu_subscribers-js) gist code into this file. -- `npm init -y` -- `npm install axios fast-csv fs` -- Run `node fetch_subscribers.js` -- Subscribers are exported in `subscribers.csv` file - - - - -### Steps: -- Create file with name fetch_subscribers.sh and copy [export_novu_subscribers.sh](https://gist.github.com/jainpawan21/8604b4b2c1582b419e837bdc72290696#file-export_novu_subscribers-sh) gist code into this file. -- Run `chmod +x fetch_subscribers.sh` -- Run `./fetch_subscribers.sh` -- Subscribers are exported in `subscribers.csv` file - - diff --git a/concepts/topics.mdx b/concepts/topics.mdx index 548cd586..03979351 100644 --- a/concepts/topics.mdx +++ b/concepts/topics.mdx @@ -56,7 +56,7 @@ Adding subscribers to the topic is the main usecase of topic. A topic is like a Before adding subscribers to a topic, it's crucial to ensure that they are correctly identified in the Novu system. This identification is done using the - [identify method](/subscribers/subscribers#create-a-subscriber) or API. When a + [identify method](/concepts/subscribers#creating-a-subscriber) or API. When a subscriber is added to a topic, Novu uses the identification information to pick up the email or phone number associated with the subscriber. @@ -97,7 +97,9 @@ After that, that topic created on the fly can be managed in the same ways as the ## Trigger workflow to a topic -A workflow can be triggered to a single subscriber and an array of subscribers. While doing so, one need to send subscriberIds in `to` field. In case of trigger, we have already stored subscriberIds in a topic, so a topic key can be used to trigger a workflow. Workflow will be triggered to all subscribers in the topic. +A workflow can be triggered to a single subscriber and an array of subscribers. While doing so, one need to send subscriberIds in `to` field. In case of trigger, we have already stored subscriberIds in a topic, so a topic key can be used to trigger a workflow. The workflow will be triggered to all subscribers in the topic. + +For billing purposes, when a workflow is triggered to a topic, it will create one workflow event per topic member. ```typescript const topicKey = "posts:comment:12345"; @@ -171,7 +173,7 @@ await novu.trigger("", { title="Rename a topic" icon="plug" color="#16a34a" - href=" /api-reference/topics/rename-a-topic" + href="/api-reference/topics/rename-a-topic" > @@ -180,7 +182,7 @@ await novu.trigger("", { No, adding subscribers into topic does not change subscriber's individual - [subscriber preference](/subscribers/preferences). Topic is mainly used to + [subscriber preference](/concepts/preferences). Topic is mainly used to group subscribers and fan out workflow triggered notifications to all subscribers at once. diff --git a/concepts/workflows.mdx b/concepts/workflows.mdx index 5086ac29..de18d8e6 100644 --- a/concepts/workflows.mdx +++ b/concepts/workflows.mdx @@ -1,6 +1,6 @@ --- title: "Workflows" -description: "Workflows are at the core of responding to events in your system with notifications. Novu Framework enables you to declare type-safe, validated, and version-controlled Workflows with code." +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. @@ -9,43 +9,139 @@ A workflow holds the entire flow of steps (nodes) that are sent to the subscribe 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. -## Workflow Components +## How it works - - - Every workflow will have a name and trigger identifier. The workflow trigger identifier is used to uniquely identify each workflow. Two workflows can have same name but always have different trigger identifiers. - - - The **Trigger** refers to an event or action that initiates the workflow. It signifies a call to the Novu API with a specified workflow trigger identifier, along with the necessary payload data that the workflow content will utilize. - - - Within the Novu framework, steps are categorized into various types, each of which is linked with at least one corresponding action: - - #### Channel Steps - - **Email** (examples include Sendgrid, Postmark) - - **Inbox** (such as feeds, toasts, banners) - - **Push** (such as APNS, FCM) - - **SMS** (examples include Twilio, Telnyx) - - **Chat** (such as Slack, Microsoft Teams, and Discord) - - #### Action Steps - - **Delay** (to pause the workflow for a specified duration) - - **Digest** (to group multiple notifications into a single message) - - **Custom** (to execute custom logic like calling an HTTP API, database query, etc.) - +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. + +![Workflow Editor](/workflow/media-assets/how-it-works.png) + +Here is how a workflow looks like in the UI Workflow Editor: + +![Workflow Editor](/workflow/media-assets/workflow-editor.png) + +## 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. -## Execution of Workflow Steps +**Example of a trigger** +Here's an example of an API call to trigger an event: -Once a workflow is initiated by its trigger, the steps within the workflow are executed in a specific sequence. This sequential execution ensures that each step is completed before the next one begins, maintaining a controlled and orderly flow of the notification process. Here's what you need to know about this process: +```bash +curl -X POST https://api.novu.co/v1/events/trigger \ + -H "Authorization: ApiKey " \ + -H "Content-Type: application/json" \ + -d '{ + "name": "", + "to": { + "subscriberId": "", + }, + "payload": {} + }' +``` + +### Channel step + +A **Channel step** in Novu represents a configured provider to send notifications to your recipients. + +The Workflow Editor is designed for **Omni-Channel Communication**, delivering a unified experience across diverse messaging channels: + +- **In-app notifications** +- **Email** +- **SMS** +- **Push** + - **Mobile push** + - **Web push** +- **Chat** + - **Enterprise messaging platforms** (e.g., Slack, Microsoft Teams) + - **Consumer messaging apps** (e.g., WhatsApp, Telegram, Discord) + +Most providers within Novu use credentials that you supply to deliver notifications on your behalf. These credentials and other settings are what make a configured channel. + +### Action steps + +**Action steps** are purpose built functions that help manage the workflow flow. **Action Steps** can be executed before and after **Channel steps**. +For example, you can use a **Delay** to pause a workflow for a certain duration before sending a notification. + +There are three types of action steps supported by Novu: + +- **[Delay](/workflow/delay)** +- **[Digest](/workflow/digest)** +- **[Custom](/workflow/custom)** + +## Example use cases + + + + Notifications for orders, shipping, or subscription statuses + + + Welcome emails, follow-up emails, and more + + + Re-engagement campaigns, follow-up emails, and more + + + Notifications for product updates, new features, and more + + + Notifications for abandoned carts and follow-up emails + + + Notifications for password resets and follow-up emails + + + Notifications for administrative actions like account deletions and more + + + Notifications for system errors and alerts + + + +## Execution of workflow steps + +When a workflow is triggered, its steps are executed in a predetermined sequence. This ensures a controlled, orderly flow and helps maintain the integrity of the notification process. +Here's how it works: + + + + Each step is executed one at a time, in the exact order they are defined. This guarantees that dependencies and prerequisites for later steps are met before moving forward. + + + Sequential execution creates a reliable process, ensuring that outputs from earlier steps seamlessly influence subsequent steps. + + + Messages are sent in a structured manner, preventing overlap or confusion and ensuring each step receives the attention it requires. + + -Each step in the workflow is activated one after the other, in the order they are listed within the workflow. This method ensures that each step is given the necessary attention and that dependencies or prerequisites of later steps are adequately met. -Sequential execution provides a predictable and reliable workflow process, ensuring that messages are sent out in an orderly manner and that each step's output can appropriately influence subsequent steps. -
-Read more about building workflows [here](/workflow/introduction). \ No newline at end of file +By following this approach, workflows remain consistent, predictable, and effective. +Read more about building workflows [here](/workflow/overview). \ No newline at end of file diff --git a/content-creation-design/variables.mdx b/content-creation-design/variables.mdx index 143d4a5b..6f4251b4 100644 --- a/content-creation-design/variables.mdx +++ b/content-creation-design/variables.mdx @@ -1,6 +1,6 @@ --- title: "Workflow Editor" -description: "" +description: "Learn how Novu's Workflow Editor empowers developers to create dynamic, personalized notification workflows using versatile system and data payload variables." icon: "code" --- @@ -18,9 +18,9 @@ For instance, in the code example the variables username and resetLink are data **The utilization of these variables allows Novu to deliver personalized notifications to the receiver, thus improving user experience and accomplishing better communication outcomes.** -## System Variables +## System variables -### Subscriber Variables +### Subscriber variables | Variable | Type | Description | | -------------- | -------- | ----------------------------------------------------------------------------- | @@ -34,7 +34,7 @@ For instance, in the code example the variables username and resetLink are data | `subscriberId` | `String` | Unique identifier for the subscriber. | | `data` | `Object` | An additional object that can hold custom subscriber data as key-value pairs. | -### Actor Variables +### Actor variables | Variable | Type | Description | | -------------- | -------- | ------------------------------------------------------------------------ | @@ -48,7 +48,7 @@ For instance, in the code example the variables username and resetLink are data | `subscriberId` | `String` | Unique identifier for the actor. | | `data` | `Object` | An additional object that can hold custom actor data as key-value pairs. | -### Step Variables +### Step variables | Variable | Type | Description | | ------------- | --------- | --------------------------------------------------------------------------- | @@ -57,7 +57,7 @@ For instance, in the code example the variables username and resetLink are data | `events` | `Array` | An aggregated collection of events (that are stored when digest is active). | | `total_count` | `Number` | Represents the total number of events in the digest. | -### Brand Variables +### Brand variables | Variable | Type | Description | | ---------- | -------- | --------------------------------------------------------------------------- | @@ -65,7 +65,7 @@ For instance, in the code example the variables username and resetLink are data | `logo` | `String` | Insert the brand logo. | | `color` | `String` | Set the primary color of the notification based on the brand configuration. | -### Tenant Variables +### Tenant variables | Variable | Type | Description | | -------- | -------- | ------------------------------------------------------------------------- | @@ -73,7 +73,7 @@ For instance, in the code example the variables username and resetLink are data | `name` | `String` | Insert the brand logo. | | `data` | `Object` | An additional object that can hold custom tenant data as key-value pairs. | -## Data Payload Variables +## Data payload variables Data payload variables encompass the dynamic data intended to be injected into the content of a workflow. These variables are integral components of the payload object, forming part of the parameters for the trigger function. @@ -101,4 +101,4 @@ Within this code snippet, the variables `username` and `resetLink` are represent Importantly, it's worth noting that the payload itself can encompass any serializable JSON object. -Avoid use of system reserved variables as normal variables. For example don't use `email` as variable name because `{{subscriber.email}}` is a system reserved variable +Avoid use of system reserved variables as normal variables. For example don't use `email` as variable name because `{{subscriber.email}}` is a system reserved variable. diff --git a/framework-terminal.js b/framework-terminal.js index 0514ea17..e97579c8 100644 --- a/framework-terminal.js +++ b/framework-terminal.js @@ -1511,7 +1511,7 @@ function initializeEchoNode(o, options, transitionToState) { await event.step.email('weekly-comments', async (inputs) => { return { - subject: \`Weekly post comments ($\{events.length + 1})\`, + subject: \`Weekly post comments ($\{events.length})\`, body: renderReactEmail(inputs, events) }; }, { skip: () => inAppResponse.seen }); diff --git a/framework/chat-channel.mdx b/framework/chat-channel.mdx new file mode 100644 index 00000000..cfb7a2ef --- /dev/null +++ b/framework/chat-channel.mdx @@ -0,0 +1,17 @@ +--- +title: "Chat Channel" +sidebarTitle: "Chat Channel" +description: "Learn the process of configuring and using chat providers with Novu" +--- + +Novu brings chat notifications into your development workflow, giving you a unified way to manage messaging across platforms and apps. Whether you're working with tools like Slack or Microsoft Teams or apps like WhatsApp, Telegram, and Discord, Novu lets you integrate, manage, and scale chat notifications without unnecessary complexity. + +Learn more about the [Chat Channel](/integrations/providers/chat/overview). + +```typescript +await step.chat('chat', async () => { + return { + body: 'A new post has been created', + }; +}); +``` \ No newline at end of file diff --git a/integrations/content/react-email.mdx b/framework/content/react-email.mdx similarity index 93% rename from integrations/content/react-email.mdx rename to framework/content/react-email.mdx index 87c861f7..f8829e74 100644 --- a/integrations/content/react-email.mdx +++ b/framework/content/react-email.mdx @@ -4,7 +4,7 @@ title: "React Email" Integrating Novu Framework with [React.Email](https://react.email/) for your Next.js application can be done in three steps. - Don't have an existing Novu Next.js app yet? Visit our [Quickstart guide](/quickstart/nextjs) to create one. + Don't have an existing Novu Next.js app yet? Visit our [Quickstart guide](/framework/quickstart/nextjs) to create one. @@ -43,7 +43,7 @@ Integrating Novu Framework with [React.Email](https://react.email/) for your Nex - Define your Workflow using the above template + Define your workflow using the above template ```tsx import { renderEmail } from './sample-email.tsx'; diff --git a/integrations/content/remix-react-email.mdx b/framework/content/remix-react-email.mdx similarity index 96% rename from integrations/content/remix-react-email.mdx rename to framework/content/remix-react-email.mdx index b68f68b1..69fa1554 100644 --- a/integrations/content/remix-react-email.mdx +++ b/framework/content/remix-react-email.mdx @@ -42,7 +42,7 @@ Integrating Novu Framework with [React email](https://react.email/) for your Rem - Define your Workflow using the above template + Define your workflow using the above template ```tsx import { renderEmail } from './sample-email.tsx'; diff --git a/integrations/content/svelte-email.mdx b/framework/content/svelte-email.mdx similarity index 98% rename from integrations/content/svelte-email.mdx rename to framework/content/svelte-email.mdx index 4ddf505c..d355ba3d 100644 --- a/integrations/content/svelte-email.mdx +++ b/framework/content/svelte-email.mdx @@ -103,7 +103,7 @@ Integrating Novu Framework with [Svelte email](https://react.email/) for your Sv - Define your Workflow using the above template + Define your workflow using the above template ```tsx import WelcomeEmail from '$lib/emails/sample-email.svelte'; diff --git a/integrations/content/vue-email.mdx b/framework/content/vue-email.mdx similarity index 98% rename from integrations/content/vue-email.mdx rename to framework/content/vue-email.mdx index 6dc853c9..456305bb 100644 --- a/integrations/content/vue-email.mdx +++ b/framework/content/vue-email.mdx @@ -68,7 +68,7 @@ For a Quickstart Boilerplate project using Nuxt.js, and Vue Email, check out the ``` - Define your Workflow using the above template + Define your workflow using the above template ```ts import { config } from '@vue-email/compiler'; import { workflow } from '@novu/framework'; diff --git a/concepts/controls.mdx b/framework/controls.mdx similarity index 94% rename from concepts/controls.mdx rename to framework/controls.mdx index 173c9745..f5513bfb 100644 --- a/concepts/controls.mdx +++ b/framework/controls.mdx @@ -2,7 +2,7 @@ title: "Controls" --- -Controls are defined using [JSON Schema](/recipes/json-schema) or [Zod](https://zod.dev), providing a strong run-time validation system for your workflows. +Controls are defined using [JSON Schema](framework/schema/json-schema) or [Zod](https://zod.dev), providing a strong run-time validation system for your workflows. This ensures that you as the developer and your non-technical peers are speaking the same language. Those responsible for styling and copy can edit with confidence, knowing their changes are tested in code. @@ -110,11 +110,11 @@ The snippet below shows a configuration for the Step Control schema. If you don ``` -For the full list of parameters, check out the [full SDK reference](/sdks/framework/typescript/steps/email). +For the full list of parameters, check out the [full SDK reference](/framework/typescript/steps/email). ## Supported Schema Types - [Zod Schema](https://zod.dev/) - A TypeScript-first schema declaration and validation library. -- [JSON Schema](/recipes/json-schema) - The most popular schema language for defining JSON data structures. +- [JSON Schema](/framework/schema/json-schema) - The most popular schema language for defining JSON data structures. ## Using Variables 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..dde43e36 --- /dev/null +++ b/framework/delay.mdx @@ -0,0 +1,77 @@ +--- +title: "Delay Action Step" +sidebarTitle: "Delay Action" +--- + +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. + + + +Here, we are delaying the execution of the next step by 1 day and skipping the delay step if the isCriticalMessage function returns true. + +```typescript +await step.delay( + "delay", + () => { + return { + type: "regular" + unit: "days", + amount: 1, + }; + }, + { + skip: () => isCriticalMessage(), + } +); +``` + + + +Here, we are delaying the execution of the in-app step by 30 minutes and sending the in-app notification only if the subscriber has `goalReminderInAppAllowed` set to `true` for subscriber. If during 30 minutes delay window, subscriber sets `goalReminderInAppAllowed` to `false`, the in-app step will be skipped. + +```typescript +export const goalReminderInAppAfterDelay = workflow( + "goal-reminder-in-app-after-delay", + async ({ step, subscriber }) => { + await step.delay("delay-step", async () => { + return { + type: "regular", + amount: 30, + unit: "minutes", + }; + }); + + await step.inApp( + "in-app-step", + async () => { + return { + subject: `Don’t Forget Your Fitness Goals Today!`, + body: `Hey ${subscriber.firstName}, it's been a while since you logged your + last activity. Keep up the momentum and complete your workout to stay on + track with your goals!`, + }; + }, + { + skip: () => (subscriber as any).data?.goalReminderInAppAllowed === false, + } + ); + } +); +``` + + + +Changing the step content after triggering the workflow with delay step will not affect the existing pending delayed notification content. \ No newline at end of file diff --git a/deployment/actions.mdx b/framework/deployment/actions.mdx similarity index 96% rename from deployment/actions.mdx rename to framework/deployment/actions.mdx index 9915b77a..4486b471 100644 --- a/deployment/actions.mdx +++ b/framework/deployment/actions.mdx @@ -5,7 +5,7 @@ title: "GitHub Actions" Learn how to deploy your Novu workflows with our built-in GitHub Action command: ```yaml -name: Deploy Workflow State to Novu +name: Deploy workflow State to Novu on: workflow_dispatch: diff --git a/deployment/cli.mdx b/framework/deployment/cli.mdx similarity index 89% rename from deployment/cli.mdx rename to framework/deployment/cli.mdx index 72f1aa2b..1dfe16a2 100644 --- a/deployment/cli.mdx +++ b/framework/deployment/cli.mdx @@ -2,7 +2,7 @@ title: "CLI" --- -The Novu CLI provides a mechanism for you to synchronize your Workflows into Novu Cloud so that non-technical Novu users can control the Workflow and Step-level controls and enable your Workflows to be triggered via Novu API. +The Novu CLI provides a mechanism for you to synchronize your workflows into Novu Cloud so that non-technical Novu users can control the workflow and Step-level controls and enable your workflows to be triggered via Novu API. ```bash npx novu@latest sync --bridge-url --secret-key diff --git a/deployment/production.mdx b/framework/deployment/production.mdx similarity index 100% rename from deployment/production.mdx rename to framework/deployment/production.mdx diff --git a/deployment/syncing.mdx b/framework/deployment/syncing.mdx similarity index 74% rename from deployment/syncing.mdx rename to framework/deployment/syncing.mdx index bf7ca886..39b7bd1a 100644 --- a/deployment/syncing.mdx +++ b/framework/deployment/syncing.mdx @@ -28,14 +28,14 @@ The general workflow for pushing changes to Novu Cloud is as follows: Novu currently supports the following CI integrations: -- **GitHub Actions** - [Direct Integration](/deployment/actions) -- **GitLab CI** - Using our [CLI command](/deployment/cli) -- **Jenkins** - Using our [CLI command](/deployment/cli) -- **CircleCI** - Using our [CLI command](/deployment/cli) -- **Bitbucket Pipelines** - Using our [CLI command](/deployment/cli) -- **Azure DevOps** - Using our [CLI command](/deployment/cli) -- **Travis CI** - Using our [CLI command](/deployment/cli) -- **Other** - For any other CI/CD tool, you can use our [CLI command](/deployment/cli) +- **GitHub Actions** - [Direct Integration](/framework/deployment/actions) +- **GitLab CI** - Using our [CLI command](/framework/deployment/cli) +- **Jenkins** - Using our [CLI command](/framework/deployment/cli) +- **CircleCI** - Using our [CLI command](/framework/deployment/cli) +- **Bitbucket Pipelines** - Using our [CLI command](/framework/deployment/cli) +- **Azure DevOps** - Using our [CLI command](/framework/deployment/cli) +- **Travis CI** - Using our [CLI command](/framework/deployment/cli) +- **Other** - For any other CI/CD tool, you can use our [CLI command](/framework/deployment/cli) Direct integration with other CI/CD tools is on our roadmap. If you would like diff --git a/framework/digest.mdx b/framework/digest.mdx new file mode 100644 index 00000000..7cc05be4 --- /dev/null +++ b/framework/digest.mdx @@ -0,0 +1,55 @@ +--- +title: "Digest Action for Framework Based Workflows" +sidebarTitle: "Digest action" +--- + +You can use the Digest Engine to collect multiple events to a single message. Learn more about the [Digest Engine](/workflow/digest). + +## Defining a digest step + +```typescript +const digestResult = await step.digest("digest", async () => { + return { + unit: "days", // 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' + amount: 3, // the number of units to digest events for + }; +}); +``` + +## Writing digest content + +In many cases, you will need to access all the digested events payload in order to show the user all or parts of the events included in this digest. + +**For example:** “John and 5 others liked your photo.” + +The digest function returns an array of triggers that have been digested. +You can use this array to perform any necessary actions on the digested triggers. +Like Sending and email, or updating a database. + +```typescript +const { events } = await step.digest("digest-3-days", async () => { + return { + unit: "days", // 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' + amount: 3, // the number of units to digest events for + }; +}); + +await step.email("send-email", async () => { + const eventCount = events.length; + + return { + subject: "Digest Email", + body: `You have ${eventCount} new events`, + }; +}); +``` + + Step controls: At the moment, it is not possible to use digest information in step controls. You can only use it from the code, by creating a custom component for handling digested data. + +The digest step returns an object with events array. Each event in the array has the following properties: + +- **id** - The job id of the digested event +- **time** - The time when the event was triggered +- **payload** - The original payload passed to the event + + Changing the step content after triggering the workflow with digest step will not affect the existing digested events. diff --git a/framework/email-channel.mdx b/framework/email-channel.mdx new file mode 100644 index 00000000..53a9f750 --- /dev/null +++ b/framework/email-channel.mdx @@ -0,0 +1,19 @@ +--- +title: "Email Channel" +sidebarTitle: "Email Channel" +description: "Learn how to configure the Email channel" +--- + +The Email Channel is a critical component for delivering notifications reliably. Whether it’s a password reset, an onboarding email, or an alert about account activity, email remains a trusted medium for reaching users. +Novu simplifies this process, allowing you to focus on implementation rather than infrastructure. + +Learn more about the [Email Channel](/integrations/providers/email/overview). + +```typescript +await step.email('email', async () => { + return { + subject: 'You received a message', + body: 'A new post has been created', + }; +}); +``` \ No newline at end of file diff --git a/framework/endpoint.mdx b/framework/endpoint.mdx new file mode 100644 index 00000000..7ac2b816 --- /dev/null +++ b/framework/endpoint.mdx @@ -0,0 +1,70 @@ +--- +title: "Bridge Endpoint" +--- + + +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**. + +You can view the Bridge Endpoint as a webhook endpoint that Novu will call when it needs to retrieve contextual information for a given subscriber and notification. + +Using the `npx novu init` command creates a Bridge application for you with a Bridge Endpoint ready to go. + + +## The `serve` function + +We offer framework specific wrappers in form of an exported `serve` function that abstracts away: + +- Parsing the incoming request for `GET`, `POST`, `PUT` and `OPTIONS` requests +- HMAC header authentication +- Framework specific response and error handling + +Currently, we offer `serve` functions for the following frameworks: + +- [Next.js](/framework/quickstart/nextjs) +- [Express.js](/framework/quickstart/express) +- [Nuxt](/framework/quickstart/nuxt) +- [h3](/framework/quickstart/h3) +- [Remix](/framework/quickstart/remix) +- [Sveltekit](/framework/quickstart/svelte) + +## Writing a custom `serve` function + +If we currently don't support your framework, you can write a custom `serve` function like the following example: + +```ts +import { type Request, type Response } from "express"; +import { NovuRequestHandler, ServeHandlerOptions } from "@novu/framework"; + +export const serve = (options: ServeHandlerOptions): any => { + const requestHandler = new NovuRequestHandler({ + frameworkName: "express", + ...options, + handler: (incomingRequest: Request, response: Response) => ({ + method: () => incomingRequest.method, + headers: (key) => { + const header = incomingRequest.headers[key]; + return Array.isArray(header) ? header[0] : header; + }, + queryString: (key) => { + const qs = incomingRequest.query[key]; + return Array.isArray(qs) ? qs[0] : qs; + }, + body: () => incomingRequest.body, + url: () => + new URL( + incomingRequest.url, + `https://${incomingRequest.headers.get("host") || ""}` + ), + transformResponse: ({ body, headers, status }) => { + Object.entries(headers).forEach(([headerName, headerValue]) => { + response.setHeader(headerName, headerValue); + }); + + return response.status(status).send(body); + }, + }), + }); + + return requestHandler.createHandler(); +}; +``` diff --git a/framework/in-app-channel.mdx b/framework/in-app-channel.mdx new file mode 100644 index 00000000..10160b60 --- /dev/null +++ b/framework/in-app-channel.mdx @@ -0,0 +1,41 @@ +--- +title: "In-App Channel" +sidebarTitle: "In-App Channel" +description: "Learn how to configure the In-App channel" +--- + +Novu extends beyond traditional notification channels like email, SMS, and push by providing a robust framework for in-app notifications. With Novu, you can build reliable, stateful systems that integrate seamlessly into your applications. + +Learn more about the [In-App Channel](/integrations/providers/in-app/overview). + +```typescript +await step.inApp('inbox', async () => { + return { + subject: 'Welcome to Acme!', + body: 'We are excited to have you on board.', + avatar: 'https://acme.com/avatar.png', + redirect: { + url: 'https://acme.com/welcome', + target: '_blank', + }, + primaryAction: { + label: 'Get Started', + redirect: { + url: 'https://acme.com/get-started', + target: '_self', + } + }, + secondaryAction: { + label: 'Learn More', + redirect: { + url: 'https://acme.com/learn-more', + target: '_self', + } + }, + data: { + customData: 'customValue', + text: payload.text, + }, + }; +}); +``` \ No newline at end of file diff --git a/workflow/introduction.mdx b/framework/introduction.mdx similarity index 87% rename from workflow/introduction.mdx rename to framework/introduction.mdx index 7b477203..babcf0f6 100644 --- a/workflow/introduction.mdx +++ b/framework/introduction.mdx @@ -1,6 +1,7 @@ --- title: "Building notification workflows with the Novu Framework" sidebarTitle: "Overview" +description: "Discover how the Novu Framework empowers you to build, customize, and manage advanced notification workflows with a mix of code and no-code capabilities." --- The Novu framework allows you to build and manage advanced notification workflows with code, and expose no-code controls for non-technical users to modify. @@ -11,9 +12,9 @@ Workflows are the building blocks of your customer notification experience, they Each Novu workflow is composed of 3 main components: -- **Trigger** - The event that will start the workflow -- **Channel Steps** - The delivery method of the notification with the content -- **Action Steps** - Actions that will happen before and after a given channel step is executed. +- **Trigger** - The event that will start the workflow. +- **Channel steps** - The delivery method of the notification with the content. +- **Action steps** - Actions that will happen before and after a given channel step is executed. Let's take a look at a simple example of a workflow that sends an email after one day: @@ -42,16 +43,16 @@ workflow("sample-workflow", async (step) => { The trigger is the event that will start the workflow. In our current example the `sample-workflow` identifier will be used as our trigger id. Workflow identifiers should be unique to your application and should be descriptive of the workflow's purpose. -### Channel Steps +### Channel steps Channel Steps are the delivery methods of the notification. In our example, we have an email Channel Step that will send an email with the subject `Welcome to Novu` and the body `Hello, welcome to Novu!`. Novu's durable workflow execution engine will select the relevant delivery provider configured for this channel and send the notification with the specified content. Novu supports a variety of common notification channels out-of-the-box, including **email**, **SMS**, **push**, **inbox**, and **chat**. -To read more about the full list of parameters, check out the [full SDK reference](/sdks/framework/typescript/steps/introduction). +To read more about the full list of parameters, check out the [full SDK reference](/framework/typescript/steps/overview). -### Action Steps +### Action steps Action Steps are purpose built functions that help you manage the flow of your workflow. In our example, we have a delay Acction Step that will pause the workflow for one day before sending the email. @@ -60,9 +61,9 @@ You can also use Action Steps to perform other tasks such as fetching data from Novu supported the following Action Steps: **delay**, **custom** and **digest**. -## Create a Workflow +## Create a workflow -Here's a bare-bones example of a Workflow to send a notification in response to a trigger: +Here's a bare-bones example of a workflow to send a notification in response to a trigger: ```tsx import { workflow } from "@novu/framework"; @@ -86,7 +87,7 @@ We'll build on top of this basic code block in the following examples below. ## Just-in-time data fetching -You can add any custom logic needed into your steps. For example, you might want to fetch more information about your new user from a database during the Workflow execution. You can achieve this with the following changes: +You can add any custom logic needed into your steps. For example, you might want to fetch more information about your new user from a database during the workflow execution. You can achieve this with the following changes: ```tsx const myWorkflow = workflow( @@ -106,11 +107,11 @@ const myWorkflow = workflow( ); ``` -We call this **just-in-time** notification data fetching. It allows you pull in data from the relevant sources during the Workflow execution, removing the need to store all of your subscriber data in Novu. +We call this **just-in-time** notification data fetching. It allows you pull in data from the relevant sources during the workflow execution, removing the need to store all of your subscriber data in Novu. ## Multi-step workflow -What if you want to send another update to the same user in one week? But you don't want to send the follow-up if the user opted out. We can add more steps to the Workflow to achieve this. +What if you want to send another update to the same user in one week? But you don't want to send the follow-up if the user opted out. We can add more steps to the workflow to achieve this. ```tsx const myWorkflow = workflow( @@ -125,7 +126,7 @@ const myWorkflow = workflow( }); // Wait for 1 week before continuing. After 1 week, Novu will continue - // executing the Workflow from here. + // executing the workflow from here. await step.delay("onboarding-follow-up", async () => ({ amount: 1, unit: "weeks", @@ -137,7 +138,7 @@ const myWorkflow = workflow( async (controls) => { const user = await db.getUser(payload.userId); // The `feedbackUrl` can be updated in Novu Web without changing code. - // This helps you to create re-usable Workflow snippets. + // This helps you to create re-usable workflow snippets. return { body: `Hey ${user.name}! How do you like the product? @@ -178,7 +179,7 @@ const myWorkflow = workflow( ); ``` -With this simple Workflow, we: +With this simple workflow, we: - Sent a new signup email - Waited 1 week @@ -186,9 +187,9 @@ With this simple Workflow, we: That's the flexibility that Novu Framework offers. -Read the section on [Controls](/concepts/controls) next to learn how to expose Novu's no-code editing capabilities to your peers. +Read the section on [Controls](/framework/controls) next to learn how to expose Novu's no-code editing capabilities to your peers. -## Payload Schema +## Payload schema Payload schema defines the payload passed during the `novu.trigger` method. This is useful for ensuring that the payload is correctly formatted and that the data is valid. @@ -227,7 +228,7 @@ workflow( ## Tags -Tags are used to categorize the workflows. They also allow you to filter and group notifications for your [Inbox](/inbox/introduction) tabs. +Tags are used to categorize the workflows. They also allow you to filter and group notifications for your [Inbox](/inbox/overview) tabs. ```tsx workflow( @@ -261,7 +262,7 @@ workflow( ); ``` -### Passing Payload +### Passing a payload Here is an example of the validated payload during trigger: @@ -274,4 +275,4 @@ novu.trigger("comment-on-post", { comment: "Looks good!", }, }); -``` +``` \ No newline at end of file diff --git a/framework/overview.mdx b/framework/overview.mdx new file mode 100644 index 00000000..d19194eb --- /dev/null +++ b/framework/overview.mdx @@ -0,0 +1,46 @@ +--- +title: "Introduction" +sidebarTitle: "Introduction" +description: "Extend Novu by optionally building workflows with Novu Framework." +--- + +import { SvelteIcon } from "/snippets/icons/svelte.mdx"; +import { NestjsIcon } from "/snippets/icons/nestjs.mdx"; +import { ExpressjsIcon } from "/snippets/icons/expressjs.mdx"; +import { LambdaIcon } from "/snippets/icons/lambda.mdx"; +import { NuxtIcon } from "/snippets/icons/nuxt.mdx"; +import { NextjsIcon } from "/snippets/icons/nextjs.mdx"; +import { RemixIcon } from "/snippets/icons/remix.mdx"; +import { H3Icon } from "/snippets/icons/h3.mdx"; +import { FrameworkTerminal } from "/snippets/framework-terminal.mdx"; + +Novu Framework enables you to run a part of the core Novu workflow engine from within your network boundary. This also opens up a powerful new capability: **you can create Novu workflows entirely in code**. This is important because: +- You can inject custom code that does nearly anything you can imagine as part of a Novu workflow +- Your code-based workflow lives alongside your application code in source control +- You can hydrate notification content using local data-sources, reducing what you need to sync outside of your IT boundary + +### What it is and how it works + +Novu Framework is an application and SDK that you run locally, and communicates natively with the Novu Cloud Worker Engine via the Novu API. + +Novu Framework requires a single HTTP webhook-like endpoint (/api/novu or similar) to be exposed by your application. This endpoint is called a **Bridge Endpoint** and is used to receive events from our Worker Engine through an encrypted client-initiated tunnel. + +When enabled, Novu Cloud will call the Bridge Endpoint when it needs to retrieve contextual information for a given subscriber and notification. + +Use the `npx novu init` command to create a sample Bridge application with a built-in Bridge Endpoint. + + + +## Quickstart +To get started with Novu Framework, pick your preferred technology from the list below: + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + diff --git a/framework/push-channel.mdx b/framework/push-channel.mdx new file mode 100644 index 00000000..8ba6cac7 --- /dev/null +++ b/framework/push-channel.mdx @@ -0,0 +1,19 @@ +--- +title: "Push Channel" +sidebarTitle: "Push Channel" +description: "Learn how to configure the Push channel" +--- + +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. + +Learn more about the [Push Channel](/integrations/providers/push/overview). + +```typescript +await step.push('push', async () => { + return { + subject: 'You received a message', + body: 'A new post has been created', + }; +}); +``` \ No newline at end of file diff --git a/quickstart/express.mdx b/framework/quickstart/express.mdx similarity index 100% rename from quickstart/express.mdx rename to framework/quickstart/express.mdx diff --git a/quickstart/h3.mdx b/framework/quickstart/h3.mdx similarity index 100% rename from quickstart/h3.mdx rename to framework/quickstart/h3.mdx diff --git a/quickstart/lambda.mdx b/framework/quickstart/lambda.mdx similarity index 100% rename from quickstart/lambda.mdx rename to framework/quickstart/lambda.mdx diff --git a/quickstart/nestjs.mdx b/framework/quickstart/nestjs.mdx similarity index 100% rename from quickstart/nestjs.mdx rename to framework/quickstart/nestjs.mdx diff --git a/quickstart/nextjs.mdx b/framework/quickstart/nextjs.mdx similarity index 100% rename from quickstart/nextjs.mdx rename to framework/quickstart/nextjs.mdx diff --git a/quickstart/nuxt.mdx b/framework/quickstart/nuxt.mdx similarity index 100% rename from quickstart/nuxt.mdx rename to framework/quickstart/nuxt.mdx diff --git a/quickstart/remix.mdx b/framework/quickstart/remix.mdx similarity index 100% rename from quickstart/remix.mdx rename to framework/quickstart/remix.mdx diff --git a/quickstart/svelte.mdx b/framework/quickstart/svelte.mdx similarity index 100% rename from quickstart/svelte.mdx rename to framework/quickstart/svelte.mdx diff --git a/integrations/schema/json-schema.mdx b/framework/schema/json-schema.mdx similarity index 89% rename from integrations/schema/json-schema.mdx rename to framework/schema/json-schema.mdx index 794ffdbc..083b7135 100644 --- a/integrations/schema/json-schema.mdx +++ b/framework/schema/json-schema.mdx @@ -2,11 +2,11 @@ title: "JSON Schema" --- -JSON Schema can be used to define the [Workflow Payload](/framework/concepts/inputs) and [Step Inputs](/framework/concepts/inputs). -It provides a strongly-typed way to define the structure of the data that is expected by the Workflow or Step. -And also as a contract for changing the Workflow behaviour using the Platform User Interface. +JSON Schema can be used to define the [workflow payload](/framework/controls) and [step inputs](/framework/typescript/steps/overview). +It provides a strongly-typed way to define the structure of the data that is expected by the workflow or Step. +And also as a contract for changing the workflow behaviour using the Platform User Interface. -Learn more about JSON Schema at [json-schema.org](https://json-schema.org/). +Learn more about JSON schema at [json-schema.org](https://json-schema.org/). ## Examples @@ -34,7 +34,7 @@ Learn more about JSON Schema at [json-schema.org](https://json-schema.org/). } ``` -### Nested Array Structure +### Nested array structure ```json { @@ -74,7 +74,7 @@ Learn more about JSON Schema at [json-schema.org](https://json-schema.org/). } ``` -### Reference and Reuse Blocks +### Reference and reuse blocks ```json { @@ -127,7 +127,7 @@ Learn more about JSON Schema at [json-schema.org](https://json-schema.org/). } ``` -### Any Of Schemas +### Any of schemas ```json { @@ -188,7 +188,7 @@ Learn more about JSON Schema at [json-schema.org](https://json-schema.org/). } ``` -### One Of Schema +### One of schema ```json { @@ -214,7 +214,7 @@ Learn more about JSON Schema at [json-schema.org](https://json-schema.org/). } ``` -### If Then Else +### If then else ```json { @@ -272,7 +272,7 @@ Learn more about JSON Schema at [json-schema.org](https://json-schema.org/). } ``` -### Enum Objects +### Enum objects ```json { @@ -328,7 +328,7 @@ Learn more about JSON Schema at [json-schema.org](https://json-schema.org/). } ``` -### Regex Validation +### Regex validation The following example matches a simple North American telephone number with an optional area code: @@ -344,9 +344,9 @@ The following example matches a simple North American telephone number with an o } ``` -## Other Resources +## Other resources - [Examples](https://json-schema.org/learn/miscellaneous-examples) -- [React JSON Schema](https://rjsf-team.github.io/react-jsonschema-form/) -- [JSON Schema Validator](https://www.jsonschemavalidator.net/) -- [JSON Schema Lint](https://jsonschemalint.com/) +- [React JSON schema](https://rjsf-team.github.io/react-jsonschema-form/) +- [JSON schema validator](https://www.jsonschemavalidator.net/) +- [JSON schema lint](https://jsonschemalint.com/) diff --git a/integrations/schema/zod.mdx b/framework/schema/zod.mdx similarity index 95% rename from integrations/schema/zod.mdx rename to framework/schema/zod.mdx index d51685be..25bb2246 100644 --- a/integrations/schema/zod.mdx +++ b/framework/schema/zod.mdx @@ -3,7 +3,7 @@ title: "Integrate Zod with your notification workflows" sidebarTitle: "Zod" --- -Novu Framework allows you to use [Zod](https://zod.dev/) to define the [Control](/concepts/controls) and [Payload](/concepts/payload) schemas for your workflows. +Novu Framework allows you to use [Zod](https://zod.dev/) to define the [Control](/framework/controls) and [Payload](/concepts/payload) schemas for your workflows. ## Add Zod to your project diff --git a/framework/sms-channel.mdx b/framework/sms-channel.mdx new file mode 100644 index 00000000..6874b465 --- /dev/null +++ b/framework/sms-channel.mdx @@ -0,0 +1,17 @@ +--- +title: "SMS Channel" +sidebarTitle: "SMS Channel" +description: "Learn how to configure the SMS channel" +--- + +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. + +Learn more about the [SMS Channel](/integrations/providers/sms/overview). + +```typescript +await step.sms('sms', async () => { + return { + body: 'A new post has been created', + }; +}); +``` \ No newline at end of file diff --git a/workflow/studio.mdx b/framework/studio.mdx similarity index 100% rename from workflow/studio.mdx rename to framework/studio.mdx diff --git a/framework/tags.mdx b/framework/tags.mdx new file mode 100644 index 00000000..a96c66b0 --- /dev/null +++ b/framework/tags.mdx @@ -0,0 +1,58 @@ +--- +title: "Tags: Organizing Your Notifications" +sidebarTitle: "Tags" +description: "Learn how to use tags to personalize notifications in Novu" +--- + +**Tags** act like labels or categories that help you organize and manage notifications in your app. By grouping notifications under specific tags, you can better control how they’re filtered, displayed, or managed by both your app and your users. + +[Learn more about why and how to use tags](/workflow/tags) + +## How to Add Tags to Notifications + +Adding tags to a notification is simple and can be done directly in the workflow configuration. +Here’s an example: + +```javascript +workflow( + "acme-login-alert", + async ({ step, payload }) => { + await step.inApp('inbox', async () => { + return { + subject: 'New Login Detected', + body: 'We noticed a login from a new device or location. If this wasn’t you, change your password immediately.', + }; + }); + }, + { + tags: ['security'], + } +); + +workflow( + "acme-password-change", + async ({ step, payload }) => { + await step.inApp('inbox', async () => { + return { + subject: 'Password Changed', + body: 'Your password was successfully updated. If you didn’t request this, contact support right away.', + }; + }); + }, + { + tags: ['security'], + } +); +``` + +Let’s break it down: +In the above workflows, whenever someone logs in from a new device, or changes their password, the notification is tagged as security. + +**Benefits:** + +- **Filtered Views**: Users can quickly locate security-related notifications in their inbox. +- **Custom Preferences**: Users who only want security alerts can opt in or out of that tag category. + + + + diff --git a/sdks/framework/typescript/client.mdx b/framework/typescript/client.mdx similarity index 95% rename from sdks/framework/typescript/client.mdx rename to framework/typescript/client.mdx index cb6f3c7d..45a58075 100644 --- a/sdks/framework/typescript/client.mdx +++ b/framework/typescript/client.mdx @@ -22,7 +22,7 @@ By default, we will inject a new instance of the `Client` class in your `serve` default="process.env.NODE_ENV !== 'development'" > This bypasses the HMAC signature verification, required for local development - and testing against [Local Studio](/workflow/studio). + and testing against [Local Studio](/framework/studio). ## Environment Variables diff --git a/sdks/framework/typescript/overview.mdx b/framework/typescript/overview.mdx similarity index 82% rename from sdks/framework/typescript/overview.mdx rename to framework/typescript/overview.mdx index c9a10d67..6acf674e 100644 --- a/sdks/framework/typescript/overview.mdx +++ b/framework/typescript/overview.mdx @@ -17,9 +17,9 @@ Our `@novu/framework` SDK is written in Typescript, and we recommend using Types -## Type Safe Workflow Payloads +## Type-safe workflow payloads -When defining a [workflow payload](/framework/concepts/payload) schema, our SDK will automatically infer it to a Typescript interface. +When defining a [workflow payload](/concepts/payload) schema, our SDK will automatically infer it to a Typescript interface. ```typescript import { workflow } from "@novu/framework"; @@ -41,11 +41,11 @@ const myWorkflow = workflow( ); ``` -## Type Safe Steps +## Type safe steps -Similarly, when defining a [step](/framework/concepts/steps) schema, our SDK will automatically infer it to a Typescript interface. +Similarly, when defining a [step](/framework/typescript/steps/overview) schema, our SDK will automatically infer it to a Typescript interface. -## Step Controls +## Step controls Build and define type safe controls to expose no-code editing capabilities to your teammates. diff --git a/sdks/framework/typescript/steps/chat.mdx b/framework/typescript/steps/chat.mdx similarity index 100% rename from sdks/framework/typescript/steps/chat.mdx rename to framework/typescript/steps/chat.mdx diff --git a/sdks/framework/typescript/steps/custom.mdx b/framework/typescript/steps/custom.mdx similarity index 100% rename from sdks/framework/typescript/steps/custom.mdx rename to framework/typescript/steps/custom.mdx diff --git a/sdks/framework/typescript/steps/delay.mdx b/framework/typescript/steps/delay.mdx similarity index 100% rename from sdks/framework/typescript/steps/delay.mdx rename to framework/typescript/steps/delay.mdx diff --git a/sdks/framework/typescript/steps/digest.mdx b/framework/typescript/steps/digest.mdx similarity index 100% rename from sdks/framework/typescript/steps/digest.mdx rename to framework/typescript/steps/digest.mdx diff --git a/sdks/framework/typescript/steps/email.mdx b/framework/typescript/steps/email.mdx similarity index 100% rename from sdks/framework/typescript/steps/email.mdx rename to framework/typescript/steps/email.mdx diff --git a/sdks/framework/typescript/steps/inApp.mdx b/framework/typescript/steps/inApp.mdx similarity index 100% rename from sdks/framework/typescript/steps/inApp.mdx rename to framework/typescript/steps/inApp.mdx diff --git a/sdks/framework/typescript/steps/introduction.mdx b/framework/typescript/steps/overview.mdx similarity index 97% rename from sdks/framework/typescript/steps/introduction.mdx rename to framework/typescript/steps/overview.mdx index 2e864cb1..bf427f05 100644 --- a/sdks/framework/typescript/steps/introduction.mdx +++ b/framework/typescript/steps/overview.mdx @@ -1,5 +1,5 @@ --- -title: "Step Interface" +title: "Step interface" --- @@ -99,7 +99,7 @@ All channels follow the same shared interface: ## Options Object -This is an optional configuration object that defines: [Controls Schema](/framework/concepts/inputs), [Provider Overrides](#provider-overrides), skip and other configurations. +This is an optional configuration object that defines: [Controls Schema](/framework/controls), [Provider Overrides](#provider-overrides), skip and other configurations. - The preferences for the workflow. Read more about [Workflow Channel Preferences](/sdks/framework/typescript/workflow#workflow-channel-preferences). + The preferences for the workflow. Read more about [Workflow Channel Preferences](/concepts/preferences#workflow-channel-preferences). @@ -84,7 +84,7 @@ workflow( - The preferences for the workflow. Read more about [Workflow Channel Preferences](/sdks/framework/typescript/workflow#workflow-channel-preferences). + The preferences for the workflow. Read more about [Workflow Channel Preferences](/concepts/preferences). @@ -159,7 +159,7 @@ This context is passed by the workflow engine to provide contextual information The object that contains all the step functions, read more at [Step - Functions](/sdks/framework/typescript/steps/introduction). + Functions](/framework/typescript/steps/overview). ## Workflow Channel Preferences diff --git a/getting-started/how-novu-works.mdx b/getting-started/how-novu-works.mdx index f4640981..19146021 100644 --- a/getting-started/how-novu-works.mdx +++ b/getting-started/how-novu-works.mdx @@ -1,73 +1,567 @@ --- -title: "How Novu Works" +title: "What is Novu?" --- -Novu was built to provide the most flexible and customizable set of building blocks to deliver modern embedded notification experiences. +Novu is an open-source notification infrastructure platform that greatly reduces the effort and complexity required to implement notifications your users will love, all without the need to build your own notification system. -We can break down the Novu platform into four main components: +We designed Novu with both developers and product teams in mind: it’s easy for developers to implement quickly, and simple for less-technical users to interact with and maintain content with a powerful intuitive dashboard. -- [Novu API](#novu-api) -- [Bridge Endpoint](#bridge-endpoint) -- [Workflow Engine](#workflow-engine) -- [Dashboard](#dashboard) +Novu functions as an abstraction layer between your application and end users, and managed all aspects of notification workflow logic and delivery provider management. - - - +![how-novu-works](/getting-started/media-assets/how-novu-works.png) -## Novu API +--- + +**How does it work?** + +Managing notifications across multiple channels is painful. Each notification delivery provider has their own SDK, authentication methods, and API quirks. This complexity dramatically increases as you add additional logic such as delays, digests/batches, or multi-tiered notification approaches. + + +**Without Novu** +- Learn and maintain different codebases for email, SMS, push, and chat providers +- Handle varying API response formats and error patterns +- Keep track of multiple API keys and credentials +- Build abstraction layers to standardize notification logic +- Deal with provider-specific rate limits and quotas +- Maintain separate content formats and hydration methods for each channel and notification type + + +## API & SDKs + +Novu eliminates these headaches with a unified API. + +Instead of juggling multiple providers' APIs and SDKs, you get a single, consistent interface to control all your notification flows. + + +**With Novu** +- Trigger notifications across any channel +- Manage subscriber profiles and preferences +- Power real-time notification feeds with our [full-stack UI Components libraries](/inbox/overview) +- Handle notification templates and workflows + +And so much more. + +**This is a robust, highly customizable infrastructure layer that sits between your application and the user's devices and channels.** + + +There are two ways to integrate Novu with your application or website: + + + + Use our [server-side SDKs](/sdks/overview) for seamless integration + + + Make direct [HTTP requests](/api-reference/overview) using your environment's API Secret Key + + + +Every request you make is automatically routed to the correct [environment](/concepts/environments), ensuring clean separation between **development** and **production** environments. + +--- + +## Workflows + +Workflows are the core building blocks of Novu's notification system. They enable you to design sophisticated messaging sequences that can span multiple communication channels like in-app, email, SMS, chat, and push. + +Using intuitive logical operators and [action steps](/concepts/workflows#action-step), you create dynamic notification paths that automatically adapt based on your [end user](/additional-resources/glossary#subscribers) preferences and behavior. + + +**Every notification in Novu originates from a workflow trigger, making workflows the central orchestration layer for your entire messaging infrastructure.** + + +Whether you need to send a simple welcome email or implement a complex multi-step notification sequence with digests, delays, fallbacks, and conditional logic, workflows provide the foundation for managing these communications effectively. + +![novu-workflows](/getting-started/media-assets/novu-workflow.png) + +In the code snippets below, you can see how an API request looks like to trigger a workflow. + + + +```bash cURL +curl -X POST https://api.novu.co/v1/events/trigger \ + -H "Authorization: ApiKey " \ + -H "Content-Type: application/json" \ + -d '{ + "name": "", + "to": { + "subscriberId": "", + "email": "john@doemail.com", + "firstName": "John", + "lastName": "Doe" + }, + "payload": { + "name": "Hello World", + "organization": { + "logo": "https://happycorp.com/logo.png" + } + } + }' +``` + +```javascript Node.js +import { Novu } from "@novu/node"; + +const novu = new Novu(""); + +await novu.trigger("", { + to: { + subscriberId: "", + email: "john@doemail.com", + firstName: "John", + lastName: "Doe", + }, + payload: { + name: "Hello World", + organization: { + logo: "https://happycorp.com/logo.png", + }, + }, +}); +``` + +```python Python +from novu.api import EventApi + +url = "https://api.novu.co" +api_key = "" + +novu = EventApi(url, api_key).trigger( + name="", # This is the Workflow ID. It can be found on the workflow page. + recipients="", # The subscriber ID can be gotten from the dashboard. + payload={}, # Your custom Novu payload goes here +) +``` + +```java Java +import co.novu.common.base.Novu; +import co.novu.api.common.SubscriberRequest; +import co.novu.api.events.requests.TriggerEventRequest; +import co.novu.api.events.responses.TriggerEventResponse; + +public class Main { + public static void main(String[] args) { + String apiKey = ""; + + Novu novu = new Novu(apiKey); + + SubscriberRequest subscriberRequest = new SubscriberRequest(); + subscriberRequest.setEmail(""); + subscriberRequest.setFirstName(""); + subscriberRequest.setLastName(""); + subscriberRequest.setPhone(""); + subscriberRequest.setAvatar(""); + subscriberRequest.setSubscriberId(""); + + TriggerEventRequest triggerEventRequest = new TriggerEventRequest(); + triggerEventRequest.setName(""); + triggerEventRequest.setTo(subscriberRequest); + triggerEventRequest.setPayload(Collections.singletonMap("", "")); + + TriggerEventResponse response = novu.triggerEvent(triggerEventRequest); + } +} +``` + +```php PHP +use Novu\SDK\Novu; + +$novu = new Novu(); + +$novu->triggerEvent([ + 'name' => '', + 'payload' => ['customVariables' => 'Hello'], + 'to' => [ + 'subscriberId' => '', + 'phone' => '07983882186' + ] +])->toArray(); +``` + +```ruby Ruby +require 'novu' + +client = Novu::Client.new('') + +payload = { + 'name' => '', + 'payload' => { # optional + 'first-name' => 'Adam' # optional + }, + 'to' => { + 'subscriberId' => '' + }, + 'transactionId' => '89kjfke9893' #optional +} + +client.trigger_event(payload) +``` + +```go Go +package main + +import ( + "context" + "fmt" + novu "github.com/novuhq/go-novu/lib" + "log" +) + +func main() { + subscriberID := "" + apiKey := "" + eventId := "" + + ctx := context.Background() + to := map[string]interface{}{ + "lastName": "Doe", + "firstName": "John", + "subscriberId": subscriberID, + "email": "john@doemail.com", + } + + payload := map[string]interface{}{ + "name": "Hello World", + "organization": map[string]interface{}{ + "logo": "https://happycorp.com/logo.png", + }, + } + + data := novu.ITriggerPayloadOptions{To: to, Payload: payload} + novuClient := novu.NewAPIClient(apiKey, &novu.Config{}) + + resp, err := novuClient.EventApi.Trigger(ctx, eventId, data) + + if err != nil { + log.Fatal("novu error", err.Error()) + return + } +} +``` + +```net Net +using Novu.DTO; +using Novu.Models; +using Novu; + +var novuConfiguration = new NovuClientConfiguration +{ + /** + * Defaults to https://api.novu.co/v1 + */ + Url = "https://novu-api.my-domain.com/v1", + ApiKey = "12345", +}; + +var novu = new NovuClient(novuConfiguration); + +public class OnboardEventPayload +{ + [JsonProperty("username")] + public string Username { get; set; } + + [JsonProperty("welcomeMessage")] + public string WelcomeMessage { get; set; } +} + +var onboardingMessage = new OnboardEventPayload +{ + Username = "jdoe", + WelcomeMessage = "Welcome to novu-dotnet" +}; + +var payload = new EventTriggerDataDto() +{ + EventName = "onboarding", + To = { SubscriberId = "subscriberId" }, + Payload = onboardingMessage +}; + +var trigger = await novu.Event.Trigger(payload); +``` + + -The Novu API is responsible for triggering notifications, managing subscribers, powering the [Inbox Component](/inbox/introduction), and more. -This is a restful service that you can access using our [server-side SDKs](/sdks/nodejs) or directly via [HTTP](/api-reference/overview) using the generated API Secret Key associated with your [environment](/concepts/environments). +--- + +To trigger a notification workflow process in Novu, you must specify the intended subscriber(s). +**This is a fundamental concept in Novu because it determines the routing of your notifications.** + +## Subscribers + +Subscribers are in most cases users in your application who receive notifications through various channels. -## Workflow Engine +The subscriber is identified through one of two methods: -Once an event is [triggered](/concepts/trigger), it will be persisted on our database and pushed to the workflow queue, which will be picked by the workflow engine for processing. -The workflow engine is responsible for fanning out the generated notifications to multiple [subscribers](/concepts/subscribers) and topics, scheduling [delayed events](/workflow/delay), and retrying failed jobs, handling [subscriber preferences](/concepts/preferences) and more. +- A `subscriber_id` - this uniquely identifies a specific user in your system (similar to how each user has a unique user_id in a database) +- A `topic_id` - this represents a channel or category that multiple subscribers can opt into (like a subscription group) -## Bridge Endpoint -The bridge endpoint is an HTTP endpoint that is powered by the [Novu Framework SDK](/sdks/framework/typescript/overview) and should be [deployed](/deployment/syncing) in your own infrastructure. -Bridge endpoint is responsible for multiple aspects of the notification delivery process: + +**When you trigger workflows for subscribers, Novu maintains a cache of their notification-related data, including:** -- Defining workflows and their steps -- Abstracting the content of the notification -- Exposing No-Code controls to the Dashboard for no-code modifications to content and configuration -- Executing advanced logic such as: - - Fetching data from external APIs - - Hydrating just-in-time subscriber and topic information - - Decision making for delivery based on custom rules +- Required contact information (email, phone number) +- Profile details (avatar URL) +- Platform-specific tokens (push notifications, webhooks) +- Custom properties (plan type, user role, timezone) + -### Bridge Endpoint execution phases +Below is a detailed breakdown of the subscriber object: -#### Build phase +```json +{ + // Core Identifiers + "_id": "NOVU_GENERATED_SUBSCRIBER_ID", + "_organizationId": "NOVU_GENERATED_ORG_ID", + "_environmentId": "NOVU_GENERATED_ENV_ID", -When [building new workflows](/workflow/introduction), you will be using the [Novu Framework SDK](/sdks/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](/workflow/studio) companion app. + // Basic Information + "firstName": "John", + "lastName": "Doe", + "email": "john.doe@org.com", + "phone": "+98712345670", + "avatar": "AVATAR_URL", -#### Sync phase + // Custom Data + "data": { + "custom_key_1": "custom_value_1", + "custom_key_2": "custom_value_2" + }, + + // Communication Channels + "channels": [ + { + // Firebase Cloud Messaging configuration + "credentials": { + "deviceTokens": ["token1", "token2"] + }, + "_integrationId": "NOVU_GENERATED_INTEGRATION_ID", + "providerId": "fcm" + }, + { + // Discord configuration + "credentials": { + "webhookUrl": "URL" + }, + "_integrationId": "NOVU_GENERATED_INTEGRATION_ID", + "providerId": "discord" + } + ], + + // System Fields + "deleted": false, + "createdAt": "2022-10-13T17:40:53.231Z", + "updatedAt": "2022-10-13T17:41:53.238Z", + "__v": 0, + "isOnline": false, + "lastOnlineAt": "2022-10-13T17:41:53.238Z", + "avatar": "AVATAR_URL", + "id": "NOVU_GENERATED_SUBSCRIBER_ID" +} +``` + +--- -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. +## Channels -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](/concepts/controls). +To deliver notifications to subscribers, you need to configure a [channel](/additional-resources/glossary#channels). -#### Execution phase +A channel in Novu is a configured delivery method for sending notifications to subscribers. +Each channel connects to a specific delivery [provider](/additional-resources/glossary#providers) that handles the actual notification delivery. -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. +**Sending notifications with Novu:** -## Dashboard + + + Novu allows you to set up multiple notification delivery providers and integrate them into your notification workflows. + + Each [channel](/workflow/channel-steps) corresponds to a configured provider that you can use to deliver notifications in production. + + + Use these channels individually or combine them in workflows for multi-channel notification delivery. + + + Make an API call or use a `cURL` command to trigger your workflow using a `subscriber_id`. + + -The Dashboard is a managed user interface for managing the workflow controls, connecting integrations, debugging workflow execution, and more. -Each control created in the code workflow definition will generate a corresponding UI element in the Dashboard editor, any changes to those controls will be overriding the default values defined in the code. + +For example, you might configure an email channel using SendGrid as the provider and an SMS channel using Twilio. These channels can be used independently or together in workflows to achieve multi-channel delivery. + -## FAQ +Here's an overview of our supported channels and providers: - - Currently we only support Typescript and Javascript based runtimes for creating workflows. - - - Currently only code based workflows are supported. The team is currently working on a no-code solution for building workflows powered by an ejectable code engine. - + + Send emails through leading providers including [Amazon SES](https://aws.amazon.com/ses/), [Mailersend](https://www.mailersend.com/), [Mailgun](https://www.mailgun.com/), [Mailjet](https://www.mailjet.com/), [Mailtrap](https://mailtrap.io/), [Mandrill](https://mandrillapp.com/), [Postmark](https://postmarkapp.com/), [Resend](https://resend.com/), [Sendgrid](https://sendgrid.com/), [SMTP](https://en.wikipedia.org/wiki/Simple_Mail_Transfer_Protocol), and [Sparkpost](https://www.sparkpost.com/). + + [Learn more about email channel →](https://docs.novu.co/channels/email) + + + + Deliver SMS messages through trusted providers including [Africa's Talking](https://africastalking.com/), [Amazon SNS](https://aws.amazon.com/sns/), [Mailersend](https://www.mailersend.com/), [MessageBird](https://messagebird.com/), [Plivo](https://www.plivo.com/), [Sinch](https://www.sinch.com/), [Telnyx](https://telnyx.com/), [Twilio](https://www.twilio.com/), and [Vonage](https://www.vonage.com/). + + [Learn more about SMS channel →](https://docs.novu.co/channels/sms) + + + + Send push notifications across major platforms including [Apple Push Notification Service](https://developer.apple.com/notifications/) for iOS, [Expo](https://expo.dev/) for React Native, and [Firebase Cloud Messaging](https://firebase.google.com/products/cloud-messaging) for Android. + + [Learn more about Push channel →](https://docs.novu.co/channels/push) + + + + Integrate with popular messaging platforms including [Discord](https://discord.com/), [Microsoft Teams](https://www.microsoft.com/teams), [Slack](https://slack.com/), [Telegram](https://telegram.org/), and [WhatsApp](https://www.whatsapp.com/). + + [Learn more about Chat channel →](https://docs.novu.co/channels/chat) + + + + Build native notification experiences with our real-time notification feed API, ready-to-use UI components, and custom integration options for seamless implementation in your application. + + [Learn more about In-app channel →](https://docs.novu.co/channels/in-app) + + +--- + +## Templates + +Novu allows you to design notification templates using an intuitive combination of a template editor and the Liquid templating language to create dynamic, customizable notification templates. + +**This unified approach solves two common challenges:** + + + + Consolidate templating languages into a single system, removing the complexity of managing different syntaxes for different providers. + + A single templating language provides consistency across your communication channels without the need for constant adjustments. + + Novu’s built-in engine works seamlessly across email, SMS, push, chat, and in-app notifications. + + Define variables like `{{subscriber.firstName}}` or `{{payload.orderTotal}}` once, and let Novu automatically handle the rest. + + + Manage notification content templates in a dedicated control center, where teams can: + + - Edit templates using an intuitive notification template editor + - Test notifications with actual subscriber data to ensure accuracy + - Switch between channels (email, SMS, push) while keeping content and hydration consistent + - Set up translation variations for different languages + - Allow non-technical resources to adjust and update content without ever breaking workflow logic + + + +--- + +## Actions + +Adding action steps (or functions) to your workflows are a powerful way to create more complex and unique notification experiences for your users. + +Each workflow can combine multiple action steps to model complex logic that creates better notification experiences. You can combine the following action steps with any number of channel steps to create personalized notifications for your users: + + ### Digest + Digest actions combine multiple notifications into a single, consolidated message. This helps prevent notification fatigue and provides better context for your users. + + - Group related notifications within a specified time window + - Customize aggregation logic and formatting + + [Learn more about Digest action →](https://docs.novu.co/workflows/actions/digest) + + ### Delay + Delay actions introduce controlled waiting periods between steps in your workflow. This enables better timing and sequencing of notifications. + + - Set precise delay durations (seconds to months) + - Support for cron-style scheduling + + [Learn more about Delay action →](https://docs.novu.co/workflows/actions/delay) + + ### Custom + Custom actions allow you to integrate specialized business logic directly into your notification workflows while maintaining workflow durability and state management. + + - Execute arbitrary code within the workflow context + - Can serve as a trigger for other workflows + - Pass data from your application's database into the workflow + + [Learn more about Custom action →](https://docs.novu.co/workflows/actions/custom) + +--- + +## Step Conditions + +In addition to combining channel steps and action steps to create complex workflows, you can augment these steps with additional logic based on the subscriber, inputs from your application, or the status of previous workflow steps. These are called step conditions. + + **Coming Soon...** + +Step conditions are powerful rules that determine when a workflow executes channel and action steps. + +They evaluate trigger data, subscriber properties, and previous step outcomes to create personalized user experiences. + +**Step conditions enable you to:** + +- Skip sending an email if a subscriber has already viewed an in-app message +- Display in-app notifications only to users on specific plans (e.g., `subscriber.data.plan === "pro"`) +- Control timing by executing delay steps based on trigger notification payload values (e.g., `if delay === true`) + +Step conditions automatically respect subscriber communication preferences, including: + +- Preferred notification channels (email, SMS, in-app, etc.) +- Preferred times to receive communications +- Frequency and volume settings + +--- + +## Preferences + +Empower the end users and subscribers to decide what, when, and how they want to receive notifications. + +In Novu, each workflow run is executed on behalf of a subscriber, and each subscriber can specify their preferences to receive notifications across a number of different criteria: +- channel types +- individual workflows +- workflow categories + +![preferences](/getting-started/media-assets/preferences.png) + +Novu automatically enforces user communication [preferences](/concepts/preferences) during workflow execution, while giving developers full flexibility to customize how these preferences are displayed and which options are available to users. + +--- + +## Next Steps + +### Build something + +If you want to start by adding Novu to your existing system, you can check out our quick start guide to implement your first workflow. + + + Learn how to integrate Novu with your backend codebase. + + +### Keep learning + +While the workflow engine is at the heart of Novu, our goal is to build a complete notification system for our customers. + +**Here is an overview of some of the more-advanced concepts and features Novu has to offer:** + + + + Explore our full-stack UI components libraries for building in-app notifications. + + + Extend your workflows past the UI to accomplish any use case imaginable. + + + Use our SDK to integrate Novu with your backend codebase. + + + Manage multiple tenants within an organization. + + + Manage localized versions of your notification templates. + + + Use our local studio to design and test your notification templates. + + + Manage multiple environments based on your application's deployment stages. + + + diff --git a/getting-started/introduction.mdx b/getting-started/introduction.mdx index 099115f1..e49866bd 100644 --- a/getting-started/introduction.mdx +++ b/getting-started/introduction.mdx @@ -1,104 +1,59 @@ --- -title: "What is Novu" -description: "Novu is a full-stack (UI Components, API, and Framework) open source notification infrastructure platform for building, managing, delivering, and monitoring all types of end-user notifications." +title: "What is Novu?" +description: "Learn more about what Novu does and how it helps power your product notifications." --- -import { FrameworkTerminal } from "/snippets/framework-terminal.mdx"; -import { SvelteIcon } from "/snippets/icons/svelte.mdx"; -import { NestjsIcon } from "/snippets/icons/nestjs.mdx"; -import { ExpressjsIcon } from "/snippets/icons/expressjs.mdx"; -import { LambdaIcon } from "/snippets/icons/lambda.mdx"; -import { NuxtIcon } from "/snippets/icons/nuxt.mdx"; -import { NextjsIcon } from "/snippets/icons/nextjs.mdx"; -import { RemixIcon } from "/snippets/icons/remix.mdx"; -import { H3Icon } from "/snippets/icons/h3.mdx"; +Novu is an open-source notification infrastructure designed to help you implement notifications your users will love, without the effort of building and maintaining your own in-house notifications system. - Novu is a developer-first product built for engineers looking to deliver a notifications platform for products. Novu simplifies the complexities of notification management for developers who can then empower the product and marketing teams that need to edit and maintain notification content and copy. Novu supports a variety of common notification channels out-of-the-box, including **Email**, **SMS**, **Push**, **Inbox**, and **Chat**. +Novu is designed with both developers and product teams in mind: it’s easy for developers to implement quickly, and simple for less-technical users to maintain with our intuitive dashboard. -The [Novu Cloud Platform](https://dashboard.novu.co) provides an intuitive internal user interface, embeddable UI end-user components, and a code-first workflow capability. +You also can reffer to it as a **Communication Infrastructure Layer (CIL)**, which is a layer that sits between your application and the user's devices and channels. - +![how-novu-works](/getting-started/media-assets/how-novu-works.png) +At Novu, we’re redefining how you engage users with notifications. +Our platform offers the most flexible and customizable set of tools to deliver modern, seamless, and highly personalized notification experiences. -## Quick start +Whether you're sending alerts, updates, or tailored messages, Novu enables you to design notification flows that adapt to your users' preferences, across any channel, with ease. -Start building with Novu by following our Quick Start guides. These guides provide step-by-step instructions for integrating Novu into your application. +We can break down the Novu platform into the following blocks: - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - + -## Notification types + + The Novu API allows you to seamlessly integrate a comprehensive notification infrastructure into your product. It's the only RESTful API you'll need to manage notifications across all channels. + + + + In Novu, notifications are sent through workflows. Each workflow serves as a container for the logic and templates associated with a specific type of notification in your system. + -Novu supports different notification types, including user-generated and machine-generated notifications. + + Subscribers typically refer to users in your application. As workflows are triggered for subscribers, Novu stores the necessary data to send notifications across various platforms. + -### Machine generated + + Channels in Novu represent the specific providers you've configured to send notifications, such as email, SMS, or push. + -- Triggered by some automated action—think a container pod scaling event. -- Notify one or more end users (which can be internal users, of course!). -- Often can be voluminous, so digests are helpful. + + Workflows can include multiple action steps, enabling complex logic to create richer and more personalized notification experiences. + -### Product notifications + + Each workflow run is executed on behalf of a subscriber, and each subscriber can specify their preferences to receive notifications across a number of different criteria: channel types, individual workflows, and workflow categories. + -- Triggered by end-user interactions and events within your product. -- Notify one or more subscribers. -- Typically transactional, such as order updates, password resets, account verifications, or login/OTP codes. -- Can also be used to provide product updates, such as new features or bug fixes. + + Novu offers a collection of full-stack UI components that are customizable and can be easily embedded into your application. + -### Key differences + + The Dashboard provides an interface for managing workflows, notification templates, integrations, debugging, and more. + -- Product notifications are triggered by user activity, while promotional notifications are sent at the discretion of the marketer. -- Product notifications are typically more transactional in nature, while promotional notifications are more marketing-oriented. -- Product notifications are often sent to all subscribers, while promotional notifications can be targeted to specific audiences. + + The Novu Framework is the underlying layer that allows you to build and manage advanced notification workflows with code, while providing no-code options for non-technical users to customize. + -## Who is Novu for? - -How you use and get started with Novu depends on your role. While it’s initially implemented by engineering and development teams, Novu unifies everyone in an organization that authors, creates, sends, manages, and measures results from notifications being sent to end users. Novu empowers engineers to deliver notification platforms for product teams. - -### Novu for engineers - -Novu empowers developers and engineering teams to quickly deliver a fully extensible notifications platform for product teams to create captivating notification experiences. - -We provide the following proven stack for developers to simply integrate notifications into their products: - -- **[Code-first Notification Framework](/sdks/framework/typescript/overview)** Opinionated, yet flexible, Framework for building and managing notification workflows. -- **[JSON Schema Based](/api-reference/overview)** Controls to craft a no-code visual editor to enable non-technical team members to modify content and behaviour. -- **[Prebuilt, customisable UI components](/inbox/introduction)** for in-app user notification feeds and preference experiences. -- **[Integration with multiple delivery providers](/integrations/providers/introduction)**, allowing you to continue using your preferred vendors with Novu. -- **[Scalable, reliable Novu Cloud SaaS infrastructure](https://dashboard.novu.co)** developed from scratch to meet the demands of high-volume notification delivery and storage (think hundreds of millions of notifications). -- **Observability** for delving into the lifecycle of a notification's success or failure. Eliminate guesswork of how, when, and why a user receives a notification. -- **Comprehensive documentation**, implementation guides, recipes and illustrative examples. -- **Compliance and security** for safely managing your data. -- **Open source** provides transparency you can trust, cultivates community contributions for fast improvement, and enables you to deploy and self-host a Novu instance into any environment of your choosing. - -Notification content can be written in a variety of common content tooling, including [React](/integrations/react-email), [Vue-email](/integrations/vue-email), MJML, and more. Content can also be customized and hydrated using any datasource. - -### Novu for product teams - -We are well aware of the friction that often exists between engineering and product teams, and have built features that allow product teams to customize notification experiences easily and safely—without the risk of breaking important integrations and logic. - -Product teams can craft beautiful notification content and campaigns in any content framework of their choice. - -{/* Since we're speaking to both engineering and product in this section of the documentation, we should address product teams directly instead of using third-person "them" */} -- Modify and manage notification UIs that engineers have built via the Novu Framework. -- Gain valuable insights into user engagement with notifications via logs and analytics. -- Use your preferred notification content editors. -- Craft impactful notification messaging, verbiage, and cadences. -- Run experiments to improve user experience without requiring engineering effort. - -### Novu for end users - -Once implemented, most end users will not be aware that it’s Novu behind the scenes, other than that they now receive notifications where and when they expect them. - -The [Inbox Component](/inbox/introduction) is an embeddable component that, when included in your app, enables users to view and set their own notification preferences--such as channel, language, timezone, and more. - -Novu ensures fast delivery and beautiful notification experiences for end users regardless of the channels involved. - -With Novu, your app users receive instant notifications via **email**, **Inbox alerts**, **SMS**, **push notifications**, and **chat**. + \ No newline at end of file diff --git a/getting-started/media-assets/add-steps.png b/getting-started/media-assets/add-steps.png new file mode 100644 index 00000000..a83f063a Binary files /dev/null and b/getting-started/media-assets/add-steps.png differ diff --git a/getting-started/media-assets/application-identifier.png b/getting-started/media-assets/application-identifier.png new file mode 100644 index 00000000..f9f36508 Binary files /dev/null and b/getting-started/media-assets/application-identifier.png differ diff --git a/getting-started/media-assets/how-novu-works.png b/getting-started/media-assets/how-novu-works.png new file mode 100644 index 00000000..eea61143 Binary files /dev/null and b/getting-started/media-assets/how-novu-works.png differ diff --git a/getting-started/media-assets/in-app-template-example.png b/getting-started/media-assets/in-app-template-example.png new file mode 100644 index 00000000..d9f921f4 Binary files /dev/null and b/getting-started/media-assets/in-app-template-example.png differ diff --git a/getting-started/media-assets/notification-template.png b/getting-started/media-assets/notification-template.png new file mode 100644 index 00000000..4d78fddf Binary files /dev/null and b/getting-started/media-assets/notification-template.png differ diff --git a/getting-started/media-assets/novu-workflow.png b/getting-started/media-assets/novu-workflow.png new file mode 100644 index 00000000..ba6e5b0d Binary files /dev/null and b/getting-started/media-assets/novu-workflow.png differ diff --git a/getting-started/media-assets/preferences.png b/getting-started/media-assets/preferences.png new file mode 100644 index 00000000..37781771 Binary files /dev/null and b/getting-started/media-assets/preferences.png differ diff --git a/getting-started/media-assets/preview-notification.png b/getting-started/media-assets/preview-notification.png new file mode 100644 index 00000000..c57a7f6f Binary files /dev/null and b/getting-started/media-assets/preview-notification.png differ diff --git a/getting-started/media-assets/switch-to-production.png b/getting-started/media-assets/switch-to-production.png new file mode 100644 index 00000000..96909df9 Binary files /dev/null and b/getting-started/media-assets/switch-to-production.png differ diff --git a/getting-started/media-assets/sync-workflow-success.png b/getting-started/media-assets/sync-workflow-success.png new file mode 100644 index 00000000..715f267e Binary files /dev/null and b/getting-started/media-assets/sync-workflow-success.png differ diff --git a/getting-started/media-assets/sync-workflow.png b/getting-started/media-assets/sync-workflow.png new file mode 100644 index 00000000..8cbf5b48 Binary files /dev/null and b/getting-started/media-assets/sync-workflow.png differ diff --git a/getting-started/media-assets/test-workflow-inbox.png b/getting-started/media-assets/test-workflow-inbox.png new file mode 100644 index 00000000..a2797885 Binary files /dev/null and b/getting-started/media-assets/test-workflow-inbox.png differ diff --git a/getting-started/media-assets/test-workflow.png b/getting-started/media-assets/test-workflow.png new file mode 100644 index 00000000..2b72a8d8 Binary files /dev/null and b/getting-started/media-assets/test-workflow.png differ diff --git a/getting-started/media-assets/trigger-snippet.png b/getting-started/media-assets/trigger-snippet.png new file mode 100644 index 00000000..9a861c58 Binary files /dev/null and b/getting-started/media-assets/trigger-snippet.png differ diff --git a/getting-started/media-assets/trigger-tab.png b/getting-started/media-assets/trigger-tab.png new file mode 100644 index 00000000..5f2f612d Binary files /dev/null and b/getting-started/media-assets/trigger-tab.png differ diff --git a/getting-started/non-technical.mdx b/getting-started/non-technical.mdx index e3b9831a..b2013280 100644 --- a/getting-started/non-technical.mdx +++ b/getting-started/non-technical.mdx @@ -1,17 +1,17 @@ --- title: "No-Code tools to manage your notifications" -sidebarTitle: "For Non-Developers" +sidebarTitle: "For non-developers" description: "Change notification messaging, verbiage, and cadence without requiring engineering's help by using the Novu Dashboard UI." --- Novu Framework was designed to bridge the gap between developers and non-developers in the team. - **Developers** - Define and abstract away complex logic, data manipulation, hydration, html, and etc... -- **Non-Developers** - Use the Novu Dashboard UI to control the content and behavior of the notifications using [Controls](/concepts/controls). +- **Non-Developers** - Use the Novu Dashboard UI to control the content and behavior of the notifications using [controls](/framework/controls). -## How to modify Controls? +## How to modify controls? -Controls are modified directly in the [Novu Dashboard UI](https://dashboard.novu.co), under the 'Step controls' tab of the Workflow editor page. +Controls are modified directly in the [Novu Dashboard UI](https://dashboard.novu.co), under the 'Step controls' tab of the **Workflow Editor** page. Upon saving the changes, the new Control values will be used in the notification sent to your subscribers. ## Dynamic payload data @@ -24,13 +24,13 @@ Dynamic data passed as part of the trigger payload can be easily used inside of A control can be as broad as `content` or as specific as `2fa_code_title_color`. This allows you to change the content of the notification without needing to touch the code. -### Change Digest or Delay frequency +### Change digest or delay frequency Controls can be used for controlling any aspect of the step configuration, for example: - Delay amount - Digest length -- Digest type (Daily, Weekly, Monthly) +- Digest type (daily, weekly, monthly) - etc... Read more about [digest strategies and how to prevent notification fatigue.](https://novu.co/blog/digest-notifications-best-practices-example/) diff --git a/getting-started/quickstart.mdx b/getting-started/quickstart.mdx new file mode 100644 index 00000000..2bc87092 --- /dev/null +++ b/getting-started/quickstart.mdx @@ -0,0 +1,359 @@ +--- +title: "Quickstart" +description: "Learn how to quickly get started with Novu." +mode: "full" +--- + +Before you can start integrating Novu into your application, you need to create a Novu account and set up a new workflow in the Novu Dashboard. This guide walks you through those steps. + + + + + [Create a new account](https://dashboard.novu.co/signup) on Novu Cloud or [sign in](https://dashboard.novu.co/login) if you already have an account. + + + + Our SDKs support [most major programming languages](/sdks/overview), making it easy to get started. Is your preferred language missing? [Reach out to us!](https://novu.co/contact) + ```bash + npm install @novu/node + ``` + + + + + To start, set the `NOVU_API_KEY` environment variable in your application. + You can find your public and secret API keys in the **Developer** section of the Novu dashboard. Since this step is for backend integration, be sure to use the **secret key**. + + For security, always define your API key as an environment variable and avoid committing it to source control. + ```bash + NOVU_API_KEY= "example_key_abcdefg1234567890" + ``` + + + + Navigate through the toggles to create your first custom workflow. + + + + Create a new workflow by clicking on the **Create Workflow** button in the workflows page. + - Give your workflow a name (e.g. "User Onboarding"). + - **Workflow identifier** will be generated automatically (e.g. `user-onboarding`). + - Add **tags** (optional) : Tags are a great way to classify and filter workflows for you, and your users. + - Add a **description** (optional) : Add a description to help you and your team understand the purpose of the workflow. + + + + + Every notification workflow starts with at least one [**channel step**](/workflow/channel-steps). To add a step, click the **Plus** button (**+**) in the Workflow Editor. + + + Add steps to your workflow + + + 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. + + + + **In-app** notifications are delivered directly inside your application via an Inbox or custom integration. + + [Learn more about the In-App channel step](integrations/providers/in-app/overview) + + + **Email** is ideal for sending promotional or transactional messages. + + [Learn more about the Email channel step](integrations/providers/email/overview) + + + **SMS** excels at delivering OTPs, alerts, and two-factor authentication codes. + + [Learn more about the SMS channel step](integrations/providers/sms/overview) + + + **Web Push** and **Mobile Push** notifications are perfect for time-sensitive updates. + + [Learn more about the Push channel step](integrations/providers/push/overview) + + + **Chat** notifications integrate with platforms like **Slack**, **Microsoft Teams**, **WhatsApp**, **Telegram**, and **Discord**. + + [Learn more about the Chat channel step](integrations/providers/chat/overview) + + + + **Delay** steps allow you to pause for a specified time before proceeding to the next step. + + [Learn more about the Delay action step](workflow/delay) + + + **Digest** steps group notifications and send them later based on defined logic. + + [Learn more about the Digest action step](workflow/digest) + + + **Custom** steps enable you to add tailored logic to your workflow using the **[Novu Framework](/framework/overview)**. + + [Learn more about the Custom action step](/workflow/custom) + + + + + + + Once you’ve added a channel step, you can customize the notification content. + + Click **"Configure Channel Step Template"** in the channel's edit view to open the [Notification Template Editor](/workflow/template-editor) and start editing. + + + Configure channel step template + + + 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. + + + **Here is an example of an In-App notification template:** + + **Title** + ```json + You’ve Got a New Task Assigned! + ``` + **Body** + ```json + Hey {{subscriber.firstName}}, you've been assigned to a new task: {{payload.task_id.title}} + The deadline is {{payload.task_id.dueDate}}. Click below to view the details and get started. + ``` + **Button Text** + ```json + View Task + ``` + **Redirect URL** + ```json + {{payload.task_id.url}} + ``` + + + + + + Preview your notification by clicking the **Preview** button in the **Configure Template** section of the workflow editor. + + + Preview notification + + + + + You can test your workflow in the editor by clicking the **Test Workflow** button in the workflow editor. + + + Test workflow + + + + [**In-app**](/integrations/providers/in-app/overview) channel is the only channel that doesn't require any credentials to be configured in the [**Subscriber** object](/concepts/subscribers). + + If you have [Email](/integrations/providers/email/overview), [SMS](/integrations/providers/sms/overview), [Push](/integrations/providers/push/overview) or [Chat](/integrations/providers/chat/overview) channels steps in your workflow, you need to ensure that you have the necessary credentials configured in the **Subscriber** object. + + - [Learn more about the Subscriber object](/concepts/subscribers) + - [Learn more about how to add credentials to the Subscriber object](/api-reference/subscribers/update-subscriber-credentials) + + + If you have the **In-app** channel step in your workflow, you can test your workflow in the editor with the default subscriber_id, you will see the notification in the **Inbox** section of the Novu dashboard. + + + Test workflow inbox + + + + + Before leaving the Workflow Editor and heading back to your backend, navigate to the **`Trigger`** tab. + + Here, you can grab a sample payload to use when calling Novu's API. + + + Trigger Tab + + + 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}}" + } + } + ``` + + + **Note:** The payload is optional, and can be used to pass additional information to the workflow. + + + At the bottom of the page, you can grab the workflow trigger snippet and add it to your backend. + + + Workflow trigger snippet + + + 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) + + + + + + + + + Each workflow is created with a unique identifier that can be used to trigger the workflow, visit the Trigger page to view the trigger instructions. + + + **Each trigger consists of 3 main parts:** + - **Workflow identifier**: The unique identifier of the workflow to trigger. + - **Subscriber ID**: The unique identifier of the subscriber to trigger the workflow for, this can be a user id, email or any unique identifier. + - **Payload**: The payload to pass to the workflow, this is optional and can be used to pass additional information to the workflow. + + + In this example, we're using the [**Node.js SDK**](/sdks/nodejs) to trigger the workflow. But the same can be done with any of the [SDKs](/sdks/overview). + + Add the trigger snippet to your backend and call the trigger function with the **Workflow identifier**, **Subscriber ID** and **Payload**. + + + ```javascript Node.js + import { Novu } from '@novu/node'; + + const novu = new Novu(process.env['NOVU_SECRET_KEY']); + + novu.trigger('test', { // Workflow Identifier + to: { + subscriberId: '625f3fe55a55980017dd63fd' // Subscriber ID + }, + payload: { // Payload + task_id: { + title: '{{payload.task_id.title}}', + dueDate: '{{payload.task_id.dueDate}}', + url: '{{payload.task_id.url}}' + } + } + }); + ``` + + ```bash Curl + curl -X POST 'https://api.novu.co/v1/events/trigger' \ + -H 'Authorization: ApiKey NOVU_SECRET_KEY' \ + -H 'Content-Type: application/json' \ + -d '{ + "name": "test", + "to": { + "subscriberId": "625f3fe55a55980017dd63fd" + }, + "payload": { + "task_id": { + "title": "{{payload.task_id.title}}", + "dueDate": "{{payload.task_id.dueDate}}", + "url": "{{payload.task_id.url}}" + } + } + }' + ``` + + +**Execute the trigger call from your backend.** + + + If you have the **In-app** channel step in your workflow, you should see the notification in the **Inbox** section of the Novu dashboard. + + + + + + Novu users logically separated environments to control the roll-out of your notifications. When you're happy with the way your workflows work and look, you just need to promote them to production to start sending notifications to your real users. + + + + 1. Navigate to the **Workflows** page, click on the 3 dots button on the right side of the workflow you want to promote and click the **Sync to Production** button. + + Sync workflow + + You should see a success message and the workflow will be synced to production. + + Sync workflow success + + + + + At the top of the page, you should see a dropdown to switch from the Development to the production environment. + + Switch to production + + + Once you have switched to the Production environment, you should see the workflows you have synced to production. + + + You are also able to test your workflows in the Production environment by clicking the **Test Workflow** button in the workflow editor. + + + + + Be sure to update your application’s environment variables to point to your Novu Production environment API **Secret Keys**. + + + You can find your **Secret Keys** in the **Developer** section of the Novu dashboard. + + + + + + If you are using the **in-app** channel, you need to update your **Application Identifier** to point to your Novu Production environment **Application Identifier**. + + + You can find your **Application Identifier** in the **Developers** section of the Novu dashboard. + + + + Update Application Identifier + + + + + + + + + + If you have any questions or run into issues as you build with our product, we hope you’ll let us know! Email us at support@novu.co, or join our [Discord community](https://discord.gg/novu) and we’ll be more than happy to assist you. + + + + +**Now that you triggered your first workflow, learn more about the advanced features and concepts of Novu.** + + + + Explore our full-stack UI components libraries for building in-app notifications. + + + Extend Novu Workflows with code, and accomplish literally any advanced use case imaginable. + + + For more advanced use cases, use our SDK to integrate Novu with your backend codebase. + + + Manage multiple tenants within an organization. + + + Manage localized versions of your notification templates. + + + Use our local studio with Novu Framework to design and test your notification templates. + + + Manage multiple environments based on your application's deployment stages. + + + diff --git a/help/account-management.mdx b/help/account-management.mdx index cb0e9617..3cb019f5 100644 --- a/help/account-management.mdx +++ b/help/account-management.mdx @@ -23,7 +23,7 @@ If you want to change your account email, please reach out to us at support@novu If you created your Novu account using Github, and you change your email in Github, it will not be reflected in Novu. When you login to Novu using the new Github email, a new account will be created. Please email support@novu.co to update your email address. ### How do I create a new Organization? -A new organization can be created by writing something in the dropdown in the left bottom corner of the dashboard. As soon you start writing something, an add option will apear. This dropdown can also be used to switch between [organizations](/getting-started/concepts#organization). One organization's data is not visible to other organization members. +A new organization can be created by writing something in the dropdown in the left bottom corner of the dashboard. As soon you start writing something, an add option will apear. This dropdown can also be used to switch between Organizations. One organization's data is not visible to other organization members. ### How to change organization name? We are working on account management feature currently so this option is not available in UI as of now. If you want to change your current organization name, [rename organization api](/api-reference/organizations/rename-organization) can be used. if you face any issue in using api or need any help any changing the organization name, please reach out to us at support@novu.co. diff --git a/help/channels/email.mdx b/help/channels/email.mdx index d032ce48..abcac4a2 100644 --- a/help/channels/email.mdx +++ b/help/channels/email.mdx @@ -8,15 +8,15 @@ import ContactSupportSnippet from "/snippets/contact-support.mdx"; ### How to override default values of Email? -All values (from, to, subject, body, etc.) can be overridden by using the `overrides` option while triggering the workflow. Please see our [email overrides documentation](/channels-and-providers/email/overview#sending-email-overrides) for more details. +All values (from, to, subject, body, etc.) can be overridden by using the `overrides` option while triggering the workflow. Please see our [email overrides documentation](/integrations/providers/email/overview) for more details. ### Sending HTML as the value of a variable HTML content as a value of step variable can be sent by replacing the double curly braces `{{}}` variable with triple curly braces `{{{}}}` variable. For example, `{{{htmlContent}}}`. -### I have multiple Email Providers or integrations active, how do I associate them to a Workflow? +### I have multiple Email Providers or integrations active, how do I associate them to a workflow? -There can be more than one active email integrations of same or different providers. However only one email integration can be primary at one time per environment. To use a different email integration than your primary integration, the integrationIdentifier field of email overrides can be used. Read about using [different email integration](/channels-and-providers/email/overview#using-different-email-integration) for more details. +There can be more than one active email integrations of same or different providers. However only one email integration can be primary at one time per environment. To use a different email integration than your primary integration, the integrationIdentifier field of email overrides can be used. Read about using [different email integration](/integrations/providers/email/overview#using-different-email-integration) for more details. ### Why am I getting the error “message content could not be generated”? @@ -28,7 +28,7 @@ Novu recommends not to use subscriber attributes as step variables. Instead, use ### How to use Provider templates in place of email content? -Currently, we support external Provider template support for [sendgrid](/channels-and-providers/email/sendgrid#using-sendgrid-template) and [mailersend](/channels-and-providers/email/mailersend#using-mailersend-template) only. +Currently, we support external Provider template support for [sendgrid](/integrations/providers/email/sendgrid) and [mailersend](/integrations/providers/email/mailersend) only. ### Can I retrieve only Email content? diff --git a/help/channels/in-app.mdx b/help/channels/in-app.mdx index f286118f..d1f89a60 100644 --- a/help/channels/in-app.mdx +++ b/help/channels/in-app.mdx @@ -10,20 +10,20 @@ import ContactSupportSnippet from "/snippets/contact-support.mdx"; To configure your In-App notifications, you must use the In-App integration from our integration store. -To display in-app notifications to users, any SDKs in our [client library](/notification-center/introduction) can be used. Every library requires `applicationIdentifier` and `subscriberId` to fetch notifications. Currently, only one `applicationIdentifier` is supported per environment per organization. +To display in-app notifications to users, any SDKs in our [client library](/inbox/overview) can be used. Every library requires `applicationIdentifier` and `subscriberId` to fetch notifications. Currently, only one `applicationIdentifier` is supported per environment per organization. Feel free to reach out to us at support@novu.co if you have speicific requirements of multiple `applicationIdentifier` per organization. ### Issues with a redirect URL -To redirect to specified redirect url on clicking the in-app notification, notification click event should be handled in client side code. Here is an example in [React](/notification-center/client/react/get-started#onnotificationclick). +To redirect to specified redirect url on clicking the in-app notification, notification click event should be handled in client side code. Here is an example in [React](/inbox/react/get-started). ### Changing the default colors of the Notification Center -Styling of your Inbox can be customized using the [styles](/notification-center/client/react/customization#customization-using-styles-prop) prop. If you want to customize only a single component, you can use [available](/notification-center/client/react/customization#popovernotificationcenter-customization) props. +Styling of your Inbox can be customized using the [styles](/inbox/react/styling#customization-hierarchy) prop. If you want to customize only a single component, you can use [available](/inbox/react/styling#appearance-prop) props. ### Additional Security for In-App Notifications -To add an extra layer of security, we recommend using our HMAC encryption feature to eliminate subscriber impersonation Checkout [HMAC](/notification-center/client/react/get-started#hmac-encryption) section for more details. +To add an extra layer of security, we recommend using our HMAC encryption feature to eliminate subscriber impersonation Checkout [HMAC](/inbox/react/production#hmac-encryption) section for more details. diff --git a/help/channels/push.mdx b/help/channels/push.mdx index a024a4d3..3ce7fcb7 100644 --- a/help/channels/push.mdx +++ b/help/channels/push.mdx @@ -8,7 +8,7 @@ import ContactSupportSnippet from "/snippets/contact-support.mdx"; ### Can I send a Desktop Push notification? -Yes, Desktop Push Notifications can be sent by using a Web Push Notification. It is supported with almost all [push channel](/channels-and-providers/push/overview) providers. +Yes, Desktop Push Notifications can be sent by using a Web Push Notification. It is supported with almost all [push channel](/integrations/providers/push/overview) providers. ### Why am I getting the error “unexpected provider” with FCM? diff --git a/help/channels/sms.mdx b/help/channels/sms.mdx index e29b0146..82578261 100644 --- a/help/channels/sms.mdx +++ b/help/channels/sms.mdx @@ -14,6 +14,6 @@ This error occurs when a Subscriber is missing `phone` attribute. To fix this er First, ensure a custom sendername (sender id or from) is allowed with your Provider. Some countries expect to verify the sender name before using it. -You can change the default sender name for SMS by using [overrides](/channels-and-providers/sms/overview#sending-sms-overrides) field while triggering the workflow. +You can change the default sender name for SMS by using [overrides](/integrations/providers/sms/overview) field while triggering the workflow. diff --git a/help/observability.mdx b/help/observability.mdx index 527cde9a..77733aa4 100644 --- a/help/observability.mdx +++ b/help/observability.mdx @@ -8,7 +8,7 @@ import ContactSupportSnippet from "/snippets/contact-support.mdx"; ### My Subscribers have preferences set, but the Activity Feed is showing Triggers as being sent. -The Activity Feed is a place each event (Workflow Trigger) is listed. If a Subscriber has a preference to not receive notifications through a certain channel, Novu’s system will adhere to that. However, this is still a valid Trigger as the fanout occurs before preferences are accommodated. +The Activity Feed is a place each event (workflow trigger) is listed. If a Subscriber has a preference to not receive notifications through a certain channel, Novu’s system will adhere to that. However, this is still a valid Trigger as the fanout occurs before preferences are accommodated. ### What does "step filtered by subscriber preferences" mean in the logs? diff --git a/help/orchestration.mdx b/help/orchestration.mdx index db562b72..e76ee745 100644 --- a/help/orchestration.mdx +++ b/help/orchestration.mdx @@ -20,7 +20,7 @@ Yes, Digest supports conditions and can be applied to your Digest step. If the T ### Can a Subscriber control the Digest duration and time? -Not currently. The Digest duration can be changed at the Workflow level only and is applied to all subscribers that Workflow is triggered to. If you have an identified use case for this, please let us know at support@novu.co. +Not currently. The Digest duration can be changed at the workflow level only and is applied to all subscribers that workflow is triggered to. If you have an identified use case for this, please let us know at support@novu.co. ## Delay diff --git a/help/others.mdx b/help/others.mdx index fb05f60f..214b0ade 100644 --- a/help/others.mdx +++ b/help/others.mdx @@ -8,4 +8,4 @@ If some changes are pending to promote for the same workflow, then Novu merges s ### Getting CORS error with the API -Novu APIs are developed to be used on the server side. If you are using the API from the browser, you will get a CORS error. You can use the API from the server side or checkout our [client-side libraries](/notification-center/introduction) to fetch in-app notifications. +Novu APIs are developed to be used on the server side. If you are using the API from the browser, you will get a CORS error. You can use the API from the server side or checkout our [client-side libraries](/sdks/overview#web-and-mobile-sdks) to fetch in-app notifications. diff --git a/help/overview.mdx b/help/overview.mdx index 819d5d52..e343cd77 100644 --- a/help/overview.mdx +++ b/help/overview.mdx @@ -51,7 +51,7 @@ At our Help Center, we're dedicated to provide comprehensive support to ensure y > Observability, metrics, analytics, and more. - + Others help topics. diff --git a/help/user-management.mdx b/help/user-management.mdx index f767c4fa..101177c4 100644 --- a/help/user-management.mdx +++ b/help/user-management.mdx @@ -8,7 +8,7 @@ icon: "users" ### 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](/subscribers/subscribers). +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? @@ -16,23 +16,23 @@ No, it is not necessary to use subscriberId as same as userId. You can use any u ### 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](/subscribers/subscribers). +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](/subscribers/subscribers#1-ahead-of-trigger) or [inline of trigger](/subscribers/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. +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](/subscribers/subscribers#bulk-subscriber-creation). +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](/subscribers/subscribers#subscriber-attributes) can be added while creating a new Subscriber. +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](/subscribers/preferences). +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? diff --git a/inbox/headless/api-reference.mdx b/inbox/headless/api-reference.mdx index d70b72ed..6b58ef77 100644 --- a/inbox/headless/api-reference.mdx +++ b/inbox/headless/api-reference.mdx @@ -132,7 +132,7 @@ You can disable this behaviour and the cache by setting the `useCache` parameter Workflow tags can be used to filter notifications where at least one specified tag matches. Read more about how can you define [workflow - tags](/workflow/introduction#tags). + tags](/workflow/overview#tags). Filter notifications based on their read status. If not provided, all read/unread notifications will be returned. @@ -194,7 +194,7 @@ You can also pass multiple filters to fetch the different notifications counts. Workflow tags can be used to count notifications where at least one specified tag matches. Read more about how can you define [workflow - tags](/workflow/introduction#tags). + tags](/workflow/overview#tags). Count notifications based on their read status. If not provided, all @@ -359,7 +359,7 @@ Method marks all notifications as read. Notifications can be filtered by tags. Workflow tags can be used to filter notifications, and organize them into different groups. Read more about how can you define [workflow - tags](/workflow/introduction#tags). + tags](/workflow/overview#tags). #### Usage @@ -379,7 +379,7 @@ Method marks all notifications as archived. Notifications can be filtered by tag Workflow tags can be used to filter notifications, and organize them into different groups. Read more about how can you define [workflow - tags](/workflow/introduction#tags). + tags](/workflow/overview#tags). #### Usage @@ -399,7 +399,7 @@ Method marks all read notifications as archived. Notifications can be filtered b Workflow tags can be used to filter notifications, and organize them into different groups. Read more about how can you define [workflow - tags](/workflow/introduction#tags). + tags](/workflow/overview#tags). #### Usage diff --git a/inbox/headless/get-started.mdx b/inbox/headless/get-started.mdx index c46d8602..9ce550a1 100644 --- a/inbox/headless/get-started.mdx +++ b/inbox/headless/get-started.mdx @@ -44,7 +44,7 @@ const novu = new Novu({ ``` -Read more about [HMAC Encryption](/react/advanced-configuration#hmac-encryption). +Read more about [HMAC Encryption](/inbox/react/production#hmac-encryption). ```typescript import { Novu } from "@novu/js"; diff --git a/inbox/introduction.mdx b/inbox/overview.mdx similarity index 97% rename from inbox/introduction.mdx rename to inbox/overview.mdx index 46628735..733209c0 100644 --- a/inbox/introduction.mdx +++ b/inbox/overview.mdx @@ -1,5 +1,6 @@ --- -title: 'Overview' +title: 'Inbox Overview' +sideBarTitle: 'Overview' description: "Learn more about Novu's Inbox component." --- diff --git a/inbox/react-native/quickstart.mdx b/inbox/react-native/quickstart.mdx index 5fdb5ce3..7dd681ca 100644 --- a/inbox/react-native/quickstart.mdx +++ b/inbox/react-native/quickstart.mdx @@ -113,7 +113,7 @@ function YourCustomInbox() { Now that you have the inbox component added to your application, you can trigger an Inbox notification to see it in action. - To create your first workflow, follow our [quickstart guide](/quickstart/overview). + To create your first workflow, follow our [quickstart guide](/getting-started/quickstart). diff --git a/inbox/react/components/inbox.mdx b/inbox/react/components/inbox.mdx index b26ed167..38624781 100644 --- a/inbox/react/components/inbox.mdx +++ b/inbox/react/components/inbox.mdx @@ -182,7 +182,7 @@ function Novu() { Customize the notification item by passing a render function to the `renderNotification` prop. You can access the notification object and render the notification item as per your requirements. The `notification.data` property allows you acessing the custom information while rendering notification item. -You can check how to pass it with the Novu Framework in-app step output [here](/sdks/framework/typescript/steps/inapp#in-app-step-output). +You can check how to pass it with the Novu Framework in-app step output [here](/framework/typescript/steps/inApp). ```tsx import { Inbox } from '@novu/react'; @@ -227,7 +227,7 @@ function Novu() { ## Filter visible preferences You can customize the visible preferences by passing the `preferencesFilter` prop to the Inbox component, allowing you to display only relevant preferences to your users. -The filtering works by matching the workflow [tags](/workflow/introduction#tags) field with the specified filter `tags` value, showing workflows that contain at least one associated tag. +The filtering works by matching the workflow [tags](/workflow/overview#tags) field with the specified filter `tags` value, showing workflows that contain at least one associated tag. Additionally, you can combine tags from different workflows to create a tailored preferences view. ```tsx diff --git a/inbox/react/components/overview.mdx b/inbox/react/components/overview.mdx index 4c4a92d6..465b548e 100644 --- a/inbox/react/components/overview.mdx +++ b/inbox/react/components/overview.mdx @@ -12,7 +12,7 @@ The Inbox is composed of the following sub-components that you can use to build - [\](/inbox/react/components/preferences) - Used to display the preferences modal. - [\](/inbox/react/components/inbox-content) - Usage with a custom popover. -The internal UI and styles for those components can be modified using the [`appearance`](/inbox/react/components/styling#appearance) prop. +The internal UI and styles for those components can be modified using the [`appearance`](/inbox/react/styling#appearance-prop) prop. diff --git a/inbox/react/get-started.mdx b/inbox/react/get-started.mdx index 7444af53..03a8ceac 100644 --- a/inbox/react/get-started.mdx +++ b/inbox/react/get-started.mdx @@ -1,7 +1,7 @@ --- title: 'React Get Started' sidebarTitle: 'Quickstart' -description: 'Learn how to add novu powered In-App Inbox to your React app' +description: 'Learn how to add a Novu-Powered In-App Inbox to your React app' --- Novu provides the `@novu/react` package that helps to add a fully functioning Inbox to your web application in minutes. Let's see how easily you can use it in your application. @@ -117,7 +117,7 @@ function Novu() { Now that you have the inbox component added to your application, you can trigger an Inbox notification to see it in action. - To create your first workflow, follow our [quickstart guide](/quickstart/overview). + To create your first workflow, follow our [quickstart guide](/getting-started/quickstart). diff --git a/inbox/react/migration-guide.mdx b/inbox/react/migration-guide.mdx index a3d7bb89..b3c75cab 100644 --- a/inbox/react/migration-guide.mdx +++ b/inbox/react/migration-guide.mdx @@ -4,7 +4,7 @@ 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." --- - [@novu/react](/inbox/react/get-started) Inbox react component and [@novu/js](/inbox/headless/get-started) headless package is compatible with [@novu/framework](/workflow/introduction) based workflows only. With old UI based workflows, our old [@novu/notification-center](https://v0.x-docs.novu.co/notification-center/client/react/get-started) component should be used. + [@novu/react](/inbox/react/get-started) Inbox react component and [@novu/js](/inbox/headless/get-started) headless package is compatible with [@novu/framework](/workflow/overview) based workflows only. With old UI based workflows, our old [@novu/notification-center](https://v0.x-docs.novu.co/notification-center/client/react/get-started) component should be used. The `@novu/react` package introduces a more flexible and customizable way to display notifications in your application. 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 Inbox version. @@ -29,7 +29,7 @@ The `@novu/react` package introduces several breaking changes compared to the `@ ### Styling -- The `styles` props is replaced by an enchanced and easy to use `appearance` prop to customize the appearance of the notification components. For more information on `appearance` customization visit [here](customization#appearance-prop). +- The `styles` props is replaced by an enchanced and easy to use `appearance` prop to customize the appearance of the notification components. For more information on `appearance` customization visit [here](/inbox/react/styling). ### Notification @@ -636,7 +636,7 @@ function Novu() { export default Novu; ``` -For more information on `appearance` customization visit [here](customization#appearance-prop). +For more information on `appearance` customization visit [here](/inbox/react/styling). ## Multiple Tabs Support @@ -646,7 +646,7 @@ Organize notifications into different categories using tabs by leveraging the ta - Old Implementation -After defining the feeds on the Workflow UI, you were able to filter notifications based on the feedIdentifier. +After defining the feeds on the workflow UI, you were able to filter notifications based on the feedIdentifier. ```tsx import { @@ -778,7 +778,7 @@ export default Novu; ## HMAC Encryption -The process remains the same as before. See the detailed guide [here](advanced-configuration#hmac-encryption). +The process remains the same as before. See the detailed guide [here](/inbox/react/production#hmac-encryption). ## Handling Notifications diff --git a/inbox/react/multiple-tabs.mdx b/inbox/react/multiple-tabs.mdx index c485e5bc..0b0c156f 100644 --- a/inbox/react/multiple-tabs.mdx +++ b/inbox/react/multiple-tabs.mdx @@ -11,7 +11,7 @@ Define the `tabs` prop to display multiple tabs in the Inbox component. Each tab object should include a `label` and `filter` properties. The `label` property represents the text displayed on the specific tab. The `filter` property is an object that serves as the "filter criteria" for the notifications displayed in the list. The filter should include the `tags` which is an array of strings. -The notifications are filtered and matched by comparing the [workflow](/workflow/introduction#tags) `tags` field with the tab `filter.tags` array. Each notification is a part of a specific [workflow](/concepts/workflows). You can combine tags from different workflows to create a customized tab experience. +The notifications are filtered and matched by comparing the [workflow](/workflow/overview#tags) `tags` field with the tab `filter.tags` array. Each notification is a part of a specific [workflow](/concepts/workflows). You can combine tags from different workflows to create a customized tab experience. The example below demonstrates how to define multiple tabs in the Inbox component. @@ -50,5 +50,5 @@ function InboxNovu() { Here tab `filter.tags` are taken from workflow tags. Tags can be configured in - options field of [workflow](/sdks/framework/typescript/workflow). + options field of [workflow](/framework/typescript/workflow). diff --git a/inbox/react/styling.mdx b/inbox/react/styling.mdx index 8913f089..665c15eb 100644 --- a/inbox/react/styling.mdx +++ b/inbox/react/styling.mdx @@ -293,7 +293,7 @@ await step.inApp("inbox", async () => { Currently we only support bold text. We are working on adding more text formatting options in the future. -You can learn more about the Novu Framework in-app step [here](/sdks/framework/typescript/steps/inapp). +You can learn more about the Novu Framework in-app step [here](/framework/typescript/steps/inApp). ## Render Notification Component diff --git a/integrations/overview.mdx b/integrations/overview.mdx index 32b73dd4..9821b3b8 100644 --- a/integrations/overview.mdx +++ b/integrations/overview.mdx @@ -27,22 +27,22 @@ You can find the list of available integrations for each channel: Integrate with chat platforms - + Manage in-app notification center ## Framework integrations -Those integrations are available for the [Novu Framework SDK](/sdks/framework/typescript/overview), and can be used to build custom notification workflows with your own runtime logic. +Those integrations are available for the [Novu Framework SDK](/framework/typescript/overview), and can be used to build custom notification workflows with your own runtime logic. - + Use any content framework to build your notification content - + Validate your notification logic with JSON schema diff --git a/integrations/providers/chat/adding-chat.mdx b/integrations/providers/chat/adding-chat.mdx new file mode 100644 index 00000000..3c5b53df --- /dev/null +++ b/integrations/providers/chat/adding-chat.mdx @@ -0,0 +1,139 @@ +--- +title: "Adding Chat Channel" +sidebarTitle: "Adding Chat Channel" +description: "Learn how to add the Chat channel to your application" +--- + +import { MissingProvider } from "/snippets/missing-provider.mdx"; + +Chat channels allow you to deliver instant, contextual messages to your subscribers via their preferred chat platform and apps. + + + + + +The Chat channel is not enabled by default. To use it, configure a provider like Slack, Discord, or others. + + +1. Go to the Novu Dashboard and click **"Integrations"** on the left sidebar +2. Click **"Add a provider"** +3. Locate the **Chat** channel and select the provider you want to use and click **"Next"** +4. Select for which environment you want to add the Provider +5. (Optional) Add Conditions to activate the provider only under certain conditions, **useful for tenant-based providers** +6. Click **"Create"** +7. Add your Chat provider credentials: + Each chat provider requires defferent type of credentials. There are few providers which does not require any credentials example: `Discord` + - Provider-specific credentials such as API key / Auth token, Client ID, Client Secret, or password +8. Save the configuration by clicking **"Update"** + + + + + + + 1. Go to the Novu Dashboard and click **"Workflows"** on the left sidebar. + 2. Click the **"Add a Workflow"** button. + 3. Add a step and select **"Chat"** as the channel. + 4. Configure the Chat content: + - Message body (e.g., `{{subscriber.firstName}}, your order {{orderId}} has shipped.`). + - Dynamic placeholders for personalized content. + 5. Optionally, set fallback channels to ensure reliable delivery if Chat fails. + + + + + +Novu’s server-side SDKs make integrating Novu’s REST APIs straightforward, letting you focus on implementing workflows without dealing with repetitive code. + + + + + + +Ensure your Chat configuration is working correctly by testing the setup. + +1. Go to the Novu Dashboard, navigate to the **"Workflows"** section, and locate your configured workflow. +2. Click **"Test Workflow"** and provide sample data, such as a phone number or dynamic variables. +3. Verify delivery in the Novu Logs or your Chat provider’s dashboard. + + + + + + +## Sending chat message + +Steps to send a chat message using Novu:- + +1. Add a chat provider integration to your Novu account from the integration store. Enter credentials if required and save the integration. Follow corresponding provider documentation to get the required credentials. +2. Create a new subscriber + +> Step 2 can be skipped if you already have a subscriber. You can use the `subscriberId` of an existing subscriber. + +3. [Update](/integrations/providers/chat/overview#update-credential-webhookurl) the subscriber credential `webhookUrl` for this provider and integration. + +4. Create a new [worklow](/workflow/overview) or use an existing workflow. Add chat channel and [write content](/content-creation-design/notification-content-creation#chat) for the message. + +5. Trigger this workflow to above `subscriberId` using trigger identifier + +6. Check the chat provider if message is received. + +## Update credential webhookUrl + + + +```javaScript +import { + Novu, + ChatProviderIdEnum +} from '@novu/node'; + +const novu = new Novu(""); + +await novu.subscribers.setCredentials('subscriberId', ChatProviderIdEnum.Slack, { +webhookUrl: "", +}); + +``` + + +```bash +curl -L -X PUT 'https://api.novu.co/v1/subscribers//credentials' \ +-H 'Content-Type: application/json' \ +-H 'Accept: application/json' \ +-H 'Authorization: ApiKey ' \ +-d '{ + "providerId": "slack", + "credentials": { + "webhookUrl": "" + }, + "integrationIdentifier": "slack-MnGLxp8uy" +}' +``` + + + + +Checkout the [API reference](/api-reference/subscribers/update-subscriber-credentials) for more details. + + + {" "} + Integration identifier is similar to Provider identifier but it is different than + Provider Id. It is unique for each integration. You can find the `integrationIdentifier` + in the integration store page.{" "} + + +## Common errors + +Common erros and reason of those errors while sending chat messages using Novu. + +1. Subscriber does not have a configured channel. + - if the subscriber does not have credentials set up for any of the chat provider. +2. Webhook URL for the chat channel is missing. + - `webhookUrl` field is null, undefined or not set. Check using [get subscriber api](/api-reference/subscribers/get-subscriber). +3. Subscriber does not have an active integration. + - if subscriber have credentials set but integration is either not active or deleted for this credential. + + + + diff --git a/integrations/providers/chat/overview.mdx b/integrations/providers/chat/overview.mdx index 50bf9dd9..381d1d7d 100644 --- a/integrations/providers/chat/overview.mdx +++ b/integrations/providers/chat/overview.mdx @@ -1,92 +1,36 @@ --- -title: "Chat Channel Overview" +title: "Overview" sidebarTitle: "Overview" description: "Learn the process of configuring and using chat providers with Novu" --- -import { MissingProvider } from "/snippets/missing-provider.mdx"; +Novu brings chat notifications into your development workflow, giving you a unified way to manage messaging across platforms and apps. Whether you're working with tools like Slack or Microsoft Teams or apps like WhatsApp, Telegram, and Discord, Novu lets you integrate, manage, and scale chat notifications without unnecessary complexity. -Novu can be used to deliver chat messages to your customers using a unified delivery API. You can easily integrate your favorite chat provider using the built-in integration store. +The Chat channel provides: -## Configuring chat providers +- **Cross-Platform Integration**: A single system to handle messaging platforms (e.g., Slack, Teams) and apps (e.g., WhatsApp, Telegram, Discord) +- **Scalability at Its Core**: Designed to handle high-frequency messaging without breaking a sweat +- **Effortless Configuration**: Minimal setup, maximum control over your chat notification workflows -To configure a chat provider, you need to add a new integration to your Novu account. You can do this by navigating to the integration store and clicking on the **Add a provider** button and then select the chat provider you want to configure. You can find the [integration store](https://dashboard.novu.co/integrations?utm_campaign=docs-chat-overview) in the left sidebar of the Novu dashboard. +## Key Features -Each chat provider requires defferent type of credentials. There are few providers which does not require any credentials example: `Discord` +- **Platform and App Agnostic**: Supports workplace messaging platforms (Slack, Teams) and consumer apps (Discord, WhatsApp, Telegram) without additional overhead +- **Dynamic Content Handling**: Inject real-time, user-specific data into messages with simple APIs +- **Provider Independence**: Easily switch between chat providers or use multiple simultaneously +- **Delivery Monitoring**: Full visibility into delivery status, failures, and message engagement +- **Fallback Logic**: Automate retries and backup providers to ensure messages are delivered +- **Reusable Message Templates**: Standardize message structure across your channels +- **Developer-Centric APIs**: Clean, intuitive endpoints to plug notifications directly into your backend -## Sending chat message +## Messaging Platforms vs. Messaging Apps -Steps to send a chat message using Novu:- +- **Messaging Platforms** (e.g., Slack, Teams): Ideal for structured, workplace communication. Use these to notify teams or users in collaborative environments +- **Messaging Apps** (e.g., WhatsApp, Telegram, Discord): Best for consumer-facing messaging. Engage users directly through personal or group chats -1. Add a chat provider integration to your Novu account from the integration store. Enter credentials if required and save the integration. Follow corresponding provider documentation to get the required credentials. -2. Create a new subscriber +## Common Use Cases -> Step 2 can be skipped if you already have a subscriber. You can use the `subscriberId` of an existing subscriber. - -3. [Update](/channels-and-providers/chat/overview#update-credential-webhookurl) the subscriber credential `webhookUrl` for this provider and integration. - -4. Create a new [worklow](/workflows/notification-workflows) or use an existing workflow. Add chat channel and [write content](/content-creation-design/notification-content-creation#chat) for the message. - -5. Trigger this workflow to above `subscriberId` using trigger identifier - -6. Check the chat provider if message is received. If not, check the logs in [activity feed](/activity-feed/introduction) for for any errors. - -## Update credential webhookUrl - - - -```javaScript -import { - Novu, - ChatProviderIdEnum -} from '@novu/node'; - -const novu = new Novu(""); - -await novu.subscribers.setCredentials('subscriberId', ChatProviderIdEnum.Slack, { -webhookUrl: "", -}); - -``` - - -```bash -curl -L -X PUT 'https://api.novu.co/v1/subscribers//credentials' \ --H 'Content-Type: application/json' \ --H 'Accept: application/json' \ --H 'Authorization: ApiKey ' \ --d '{ - "providerId": "slack", - "credentials": { - "webhookUrl": "" - }, - "integrationIdentifier": "slack-MnGLxp8uy" -}' -``` - - - - -Checkout the [API reference](/api-reference/subscribers/update-subscriber-credentials) for more details. - - - {" "} - Integration identifier is similar to Provider identifier but it is different than - Provider Id. It is unique for each integration. You can find the `integrationIdentifier` - in the integration store page.{" "} - - -## Common errors - -Common erros and reason of those errors while sending chat messages using Novu. - -1. Subscriber does not have a configured channel. - - if the subscriber does not have credentials set up for any of the chat provider. -2. Webhook URL for the chat channel is missing. - - `webhookUrl` field is null, undefined or not set. Check using [get subscriber api](/api-reference/subscribers/get-subscriber). -3. Subscriber does not have an active integration. - - if subscriber have credentials set but integration is either not active or deleted for this credential. - - - - +- **Team Notifications**: Deliver updates to Slack channels or Teams users without needing complex integrations +- **Customer Engagement**: Notify users on apps like Telegram or WhatsApp with real-time updates or alerts +- **System Alerts**: Push critical system or workflow notifications to technical teams via chat platforms +- **Event Reminders**: Send timely reminders for meetings, webinars, or deadlines +- **Community Notifications**: Manage announcements, updates, or discussions in platforms like Discord diff --git a/integrations/providers/chat/whats-app.mdx b/integrations/providers/chat/whats-app.mdx index 3c24681a..542c62d7 100644 --- a/integrations/providers/chat/whats-app.mdx +++ b/integrations/providers/chat/whats-app.mdx @@ -8,22 +8,22 @@ description: "Learn about how to use WhatsApp for chat notifications" To integrate WhatsApp Business with Novu, You will have to create a facebook developer app and obtain the necessary credentials. -### Step 1: Create a Facebook Developer App +### Step 1: Create a Facebook developer app Visit the [Facebook Developer Portal](https://developers.facebook.com/apps/) and create a new app. Select "Other" for "What do you want your app to do?" and select "Business" for "Select an app type". -### Step 2: Setup WhatsApp Product +### Step 2: Setup WhatsApp product On the App Setup page, click on "Set Up" under the "WhatsApp" product. You will need to create or add a Facebook Business Account to your app. -### Step 3: Send a Sandbox Message +### Step 3: Send a sandbox message Copy the following pieces and paste them in the Novu WhatsApp Business integration settings: -- Temporary Access Token - Access API token Field -- Phone Number ID - Phone Number Identification Field +- Temporary access token - Access API token field +- Phone Number ID - Phone number identification field It's important to note that the test credentials for whatsapp cannot be used @@ -31,14 +31,14 @@ Copy the following pieces and paste them in the Novu WhatsApp Business integrati for review to obtain production credentials. -### Step 4: Add a Test Phone Number +### Step 4: Add a test phone number -You can add a test phone number to the sandbox by clicking on the "Add Phone Number" button. +You can add a test phone number to the sandbox by clicking on the **"Add Phone Number"** button. This number can be used to test your integration with Novu before submitting for a review. ### Step 5: Send a test notification from Novu -You can now create a new Workflow with a "Chat" node, and add your content. Save your workflow, and click on "Trigger Notification" Button. +You can now create a new workflow with a "chat" node, and add your content. Save your workflow, and click on **"Trigger Notification"** button. In the to field, specify the phone number you added in the sandbox, and click on "Send Notification". @@ -68,9 +68,9 @@ and in the `overrides` field, add the following: For test credentials you can only used the built in Whats App Template. -## Going to Production +## Going to production -### Register a Business Phone Number +### Register a business phone number To go live you will need to add a real business phone number and submit your app for review. Follow the [Facebook Instructions](https://developers.facebook.com/docs/whatsapp/cloud-api/get-started/add-a-phone-number) on how to proceed. @@ -80,7 +80,7 @@ Follow the [Facebook Instructions](https://developers.facebook.com/docs/whatsapp Follow the [Facebook Instructions](https://developers.facebook.com/docs/whatsapp/business-management-api/get-started/) on how to generate a permanent access token. Depending on your use case. -### Create a WhatsApp Template +### Create a WhatsApp template You will need to create a WhatsApp Template to send notifications to your customers. Create a template in the [Business Manager](https://business.facebook.com/wa/manage/message-templates) and submit it for review. After your template is approved, you can use the `template_name` to send notifications to your customers. diff --git a/integrations/providers/email/adding-email.mdx b/integrations/providers/email/adding-email.mdx new file mode 100644 index 00000000..d717f97f --- /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" +--- + +The Email channel enables you to send email notifications to users for events like password resets, onboarding, or system alerts. + + + + + +By default, the Email channel is enabled and cofigured with Novu's default provider. If it is disabled, notifications sent to this channel will not be processed. + + +1. Go to the Novu Dashboard and click **"Integrations"** on the left sidebar +2. Click **"Add a provider"** +3. Locate the **Email** channel and select the provider you want to use and click **"Next"** +4. Select for which environment you want to add the Provider +5. (Optional) Add Conditions to activate the provider only under certain conditions, **useful for tenant-based providers** +6. Click **"Create"** +7. Add your Email provider credentials: + - **From**: Displayed as the sender of the email (ensure compliance with local regulations) + - **Sender Name**: The name that will be used to send the email + - Provider-specific credentials such as API key / Auth token, Account SID, username, or password +8. Save the configuration by clicking **"Update"** + + + + + + + 1. Go to the Novu Dashboard and click **"Workflows"** on the left sidebar. + 2. Click the **"Add a Workflow"** button. + 3. Add a step and select **"Email"** as the channel. + 4. Configure the email content, such as subject, message body, and any dynamic variables. + + + + + +Novu’s server-side SDKs make integrating Novu’s REST APIs straightforward, letting you focus on implementing workflows without dealing with repetitive code. + + + + + + +Ensure your configuration is working by sending a test notification. + + 1. Go to the Novu Dashboard, navigate to the "Workflows" section, and locate your configured workflow. + 2. Click **"Test Workflow"** and provide sample data (e.g., user ID, email address). + 3. Verify the email delivery in the Novu Logs or your email provider dashboard. + + \ No newline at end of file diff --git a/integrations/providers/email/overview.mdx b/integrations/providers/email/overview.mdx index 3f1504fc..bcff3d72 100644 --- a/integrations/providers/email/overview.mdx +++ b/integrations/providers/email/overview.mdx @@ -1,12 +1,30 @@ --- -title: "E-mail Provider Integrations" +title: "Overview" sidebarTitle: "Overview" -description: "Learn the process of configuring email providers with Novu" +description: "Learn how to configure the Email channel" --- +The Email Channel is a critical component for delivering notifications reliably. Whether it’s a password reset, an onboarding email, or an alert about account activity, email remains a trusted medium for reaching users. +Novu simplifies this process, allowing you to focus on implementation rather than infrastructure. + +## Key Features + +- **Multi-Provider Support**: Integrate any major provider like SendGrid, SES, or Mailgun. +- **Failover Mechanisms**: Automatically retry with a backup provider to ensure reliability. +- **Customizable Templates**: Leverage templates with dynamic placeholders to personalize messages. +- **Delivery Insights (Coming Soon)**: Track delivery status, open rates, and more in the Novu dashboard. + +## Common Use Cases + +- **Transactional Emails**: Password resets, account verification, purchase confirmations +- **System Alerts**: Security notifications, system updates +- **Engagement Emails**: Onboarding, reminders, promotional updates + + + import { MissingProvider } from "/snippets/missing-provider.mdx"; -Novu can be used to deliver email messages to your customers using a unified delivery API. You can easily integrate your favorite email provider using the built-in integration store. +Novu can be used to deliver email messages to your subscribers using a unified delivery API. You can easily integrate your favorite email provider using the built-in integration store. ## Configuring email providers 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..cd2a5da1 --- /dev/null +++ b/integrations/providers/in-app/adding-in-app.mdx @@ -0,0 +1,44 @@ +--- +title: "Adding In-App Channel" +sidebarTitle: "Adding In-App Channel" +description: "Learn how to add the In-App channel to your application" +--- + +The In-App channel allows you to display notifications, messages, and other content directly within your application's interface. + + + + + +By default, the In-App channel is enabled. If it is disabled, you will not be able to send notifications to this channel. + + +1. Go to the Novu Dashboard and click "Integrations" on the left sidebar +2. Click "Channels" on the left sidebar +3. Enable the In-App channel + + + + 1. Go to the Novu Dashboard and click "Workflows" on the left sidebar +2. Click **"Add a Workflow"** button +3. Select "In-App" as the channel + + +Novu’s server-side SDKs streamline the integration of Novu’s REST APIs, eliminating boilerplate code and reducing development effort when adding Novu to your server-side application. + + + + + + + + +Novu's client-side SDKs simplify integration into your applications, offering powerful tools to customize and scale in-app notification experiences effortlessly, all while supporting multi-channel capabilities. + + + + + + + + diff --git a/integrations/providers/in-app/media-assets/component_composition.png b/integrations/providers/in-app/media-assets/component_composition.png new file mode 100644 index 00000000..8b88dac2 Binary files /dev/null and b/integrations/providers/in-app/media-assets/component_composition.png differ diff --git a/integrations/providers/in-app/overview.mdx b/integrations/providers/in-app/overview.mdx new file mode 100644 index 00000000..27065ba5 --- /dev/null +++ b/integrations/providers/in-app/overview.mdx @@ -0,0 +1,52 @@ +--- +title: "Overview" +sidebarTitle: "Overview" +description: "Learn how to configure the in-app channel" +--- + +Novu extends beyond traditional notification channels like email, SMS, and push by providing a robust framework for in-app notifications. With Novu, you can build reliable, stateful systems that integrate seamlessly into your applications. + +The inbox component and SDKs give you tools to create fully customizable, in-app notification experiences, including: + +- Inboxes +- Floating feeds +- Toasts +- Banners + +These components are designed to integrate cleanly into your architecture while being flexible enough to adapt to any design system or interaction model. + +![In-App Channel](/integrations/providers/in-app/media-assets/component_composition.png) + +## Key features + +- **Real-time updates:** Use WebSockets to push notifications instantly +- **Stateful Management:** Handle read/unread states, archiving, and user interaction seamlessly +- **Developer-first customization:** Components are built to be modified at every layer, from UI to behavior +- **Multi-platform support:** Consistent APIs across web and mobile SDKs +- **Integration-ready:** Plug into your existing backend with minimal effort +- **Actionable notifications:** Add clickable actions to notifications to drive user engagement + +## Common use cases + +- **User activity notifications:** Display updates like mentions, comments, or approvals in real time +- **System alerts:** Notify users of status changes, outages, or important updates directly in your application +- **Workflow tracking:** Keep users informed on task progress, deadlines, or assigned work +- **Collaboration tools:** Enable notification feeds for shared projects or team activities + +## Available SDKs + + + + Build notification interfaces with Novu's prebuilt UI components and React hooks for web applications + + + Build fully custom notification UIs for iOS and Android apps using Novu's React Native hooks SDK + + + A lightweight, standalone package for building custom notification interfaces with essential API methods and real-time WebSocket connections + + + +## Try It Out + +Explore the [Inbox Playground →](https://inbox.novu.co) \ No newline at end of file diff --git a/integrations/providers/push/adding-push.mdx b/integrations/providers/push/adding-push.mdx new file mode 100644 index 00000000..8e1ded72 --- /dev/null +++ b/integrations/providers/push/adding-push.mdx @@ -0,0 +1,147 @@ +--- +title: "Adding Push Channel" +sidebarTitle: "Adding push channel" +description: "Learn how to add the push channel to your application" +--- + +import { MissingProvider } from "/snippets/missing-provider.mdx"; + + + + To send push notifications using Novu, you need to set up a provider in the integration store. + + 1. Go to the Novu Dashboard and click **"Integrations"** on the left sidebar + 2. Locate your desired push provider and configure it with the required credentials + 3. Ensure the provider is enabled + + + + + Add push notifications to a new or existing workflow. + + 1. Navigate to the **"Workflows"** section in the Novu Dashboard + 2. Click **"Add a Workflow"** or select an existing workflow + 3. Add a step and choose **"Push"** as the channel + 4. Configure the push step by adding static or dynamic content such as title, message body, and variables + + + + + For push notifications to reach the right subscribers, store provider-specific device tokens or identifiers. + + - Follow your provider’s documentation to obtain device tokens + - Use Novu’s subscriber management features to add these tokens to the subscriber profiles + + + + + Before triggering workflows, ensure your provider configuration is complete. + + - Refer to your push provider's documentation to confirm all required steps are correctly set up + - Double-check any provider-specific settings in the integration store + + + + + Test the push workflow to ensure everything is working as expected + + 1. Go to the **"Workflows"** section in the Novu Dashboard and select your configured workflow + 2. Use the **"Test Workflow"** option + 3. Verify the push notification delivery in Novu Logs or the push provider’s dashboard + + + + + +## Supported providers + +- [Firebase Cloud Messaging (FCM)](/integrations/providers/push/fcm) +- [Expo push](/integrations/providers/push/expo-push) +- [Apple push notification Service](/integrations/providers/push/apns) +- [OneSignal](/integrations/providers/push/onesignal) +- [Pushpad](/integrations/providers/push/pushpad) +- [Push webhook](/integrations/providers/push/push-webhook) + +Novu supports multiple active providers for push channel. + + + + + +## Managing push device tokens + +To send push notifications to subscribers, you need to store device tokens or identifiers in subscriber profiles. These tokens are unique identifiers that help push notification providers deliver messages to the correct devices. Each provider has its own method for obtaining and storing device tokens. + +Novu offers to ways of keeping your device tokens in sync with subscriber profiles: + +- Just-in-time: Pass device tokens in the payload when triggering a workflow. Novu will automatically update subscriber profiles with the new device tokens. +- Manual: Update subscriber profiles with device tokens using the Novu set credentials API. + +### Just-in-time + +When triggering a workflow, you can pass the `channels` array on the subscriber object with the device tokens for the push provider of your choice. Here is an example with fcm: + +```typescript +novu.trigger("workflow-id", { + to: { + subscriberId: "subscriber-id", + channels: [ + { + providerId: "fcm", + credentials: { + deviceTokens: ["token-1", "token-2"], + }, + }, + ], + }, + payload: {}, +}); +``` + +### Manual + +Use the Novu Set Credentials API to update subscriber profiles with device tokens. You can read more about the API in the [API Reference](/api-reference/subscribers/update-subscriber-credentials) or the [FCM Example](/integrations/providers/push/fcm#setting-device-token) + +## Frequently Asked Questions + +### How to remove one device token from subscriber credentials? + +To remove a device token from subscriber credentials, you need to get the current device tokens from subscriber credentials, remove all `deviceTokens`, remove the token you want to remove and then update the subscriber credentials with new device tokens. + + + +```ts +import { Novu, PushProviderIdEnum } from '@novu/node'; + +const novu = new Novu(''); + +// fetch subscriber details +const subscriber = await novu.subscribers.get('subscriberId'); + +// get current device tokens from subscriber credentials for the provider +const currentDeviceTokens = subsciber.data.data.channels.find( +// \_integrationId can also be checked in place of providerId ; +(channel) => channel.providerId === PushProviderIdEnum.FCM, +).credentials.deviceTokens; + +// remove all device tokens +await this.novu.subscribers.setCredentials( +'subscriberId', +PushProviderIdEnum.FCM, +{ deviceTokens: [] }, +); + +// remove the token you want to remove +const newDeviceTokens = currentDeviceTokens.filter( +(token) => token !== 'token-to-be-removed', +); + +// update subscriber credentials with new device tokens +await this.novu.subscribers.setCredentials( +'subscriberId', +PushProviderIdEnum.FCM, +{ deviceTokens: newDeviceTokens }, +); +``` + + diff --git a/integrations/providers/push/overview.mdx b/integrations/providers/push/overview.mdx index c09f5366..95e0105a 100644 --- a/integrations/providers/push/overview.mdx +++ b/integrations/providers/push/overview.mdx @@ -1,120 +1,23 @@ --- -title: "Push Channel Introduction" +title: "Overview" sidebarTitle: "Overview" -description: "Learn how to send push notifications with Novu using external providers like FCM, Expo etc." +description: "Learn how to configure the Push channel" --- -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. -Push notifications are short, targeted messages delivered to a user's device or browser, often through mobile apps or websites. They serve as a powerful communication tool, offering real-time updates, reminders, and personalized content. Push notifications can range from news alerts and social media updates to promotional offers and important app notifications. +Novu simplifies the process by offering a unified API that supports multiple push notification providers, enabling reliable and efficient message delivery. -These messages are designed to engage users and keep them informed about relevant events or activities, even when they are not actively using an app or browsing a website. They play a crucial role in user engagement and retention for businesses and organizations, as they can re-engage users and prompt them to take specific actions. +## Key Features -Novu can be used to deliver push notifications to your customers devices using a unified delivery API. Both Mobile and Web push notifications are supported. +- **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 -## Using push channel with Novu +## Common Use Cases -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) - -Novu supports multiple active providers for push channel. - - - - - -## Managing push device tokens - -To send push notifications to subscribers, you need to store device tokens or identifiers in subscriber profiles. These tokens are unique identifiers that help push notification providers deliver messages to the correct devices. Each provider has its own method for obtaining and storing device tokens. - -Novu offers to ways of keeping your device tokens in sync with subscriber profiles: - -- Just-in-time: Pass device tokens in the payload when triggering a workflow. Novu will automatically update subscriber profiles with the new device tokens. -- Manual: Update subscriber profiles with device tokens using the Novu Set Credentials API. - -### Just-in-time - -When triggering a workflow, you can pass the `channels` array on the subscriber object with the device tokens for the push provider of your choice. Here is an example with fcm: - -```typescript -novu.trigger("workflow-id", { - to: { - subscriberId: "subscriber-id", - channels: [ - { - providerId: "fcm", - credentials: { - deviceTokens: ["token-1", "token-2"], - }, - }, - ], - }, - payload: {}, -}); -``` - -### Manual - -Use the Novu Set Credentials API to update subscriber profiles with device tokens. You can read more about the API in the [API Reference](/api-reference/subscribers/update-subscriber-credentials) or the [FCM Example](/channels-and-providers/push/fcm#setting-device-token) - -## Frequently Asked Questions - -### How to remove one device token from subscriber credentials? - -To remove a device token from subscriber credentials, you need to get the current device tokens from subscriber credentials, remove all deviceTokens, remove the token you want to remove and then update the subscriber credentials with new device tokens. - - - -```ts -import { Novu, PushProviderIdEnum } from '@novu/node'; - -const novu = new Novu(''); - -// fetch subscriber details -const subscriber = await novu.subscribers.get('subscriberId'); - -// get current device tokens from subscriber credentials for the provider -const currentDeviceTokens = subsciber.data.data.channels.find( -// \_integrationId can also be checked in place of providerId ; -(channel) => channel.providerId === PushProviderIdEnum.FCM, -).credentials.deviceTokens; - -// remove all device tokens -await this.novu.subscribers.setCredentials( -'subscriberId', -PushProviderIdEnum.FCM, -{ deviceTokens: [] }, -); - -// remove the token you want to remove -const newDeviceTokens = currentDeviceTokens.filter( -(token) => token !== 'token-to-be-removed', -); - -// update subscriber credentials with new device tokens -await this.novu.subscribers.setCredentials( -'subscriberId', -PushProviderIdEnum.FCM, -{ deviceTokens: newDeviceTokens }, -); - -``` - - - -``` +- **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 \ No newline at end of file diff --git a/integrations/providers/sms/adding-sms.mdx b/integrations/providers/sms/adding-sms.mdx new file mode 100644 index 00000000..a1cd15f3 --- /dev/null +++ b/integrations/providers/sms/adding-sms.mdx @@ -0,0 +1,134 @@ +--- +title: "Adding SMS Channel" +sidebarTitle: "Adding SMS Channel" +description: "Learn how to add the SMS channel to your application" +--- + +import { MissingProvider } from "/snippets/missing-provider.mdx"; + + + + + +The SMS channel is not enabled by default. To use it, configure a provider like Twilio, Nexmo, or others, and ensure compliance with country-specific restrictions for sender IDs (`from`). + + +1. Go to the Novu Dashboard and click **"Integrations"** on the left sidebar +2. Click **"Add a provider"** +3. Locate the **SMS** channel and select the provider you want to use and click **"Next"** +4. Select for which environment you want to add the Provider +5. (Optional) Add Conditions to activate the provider only under certain conditions, **useful for tenant-based providers** +6. Click **"Create"** +7. Add your SMS provider credentials: + - **From**: Displayed as the sender of the SMS (ensure compliance with local regulations) + - Provider-specific credentials such as API key / Auth token, Account SID, username, or password +8. Save the configuration by clicking **"Update"** + + + + + + + 1. Go to the Novu Dashboard and click **"Workflows"** on the left sidebar. + 2. Click the **"Add a Workflow"** button. + 3. Add a step and select **"SMS"** as the channel. + 4. Configure the SMS content: + - Message body (e.g., `{{userName}}, your order {{orderId}} has shipped.`). + - Dynamic placeholders for personalized content. + 5. Optionally, set fallback channels to ensure reliable delivery if SMS fails. + + + + + +Novu’s server-side SDKs make integrating Novu’s REST APIs straightforward, letting you focus on implementing workflows without dealing with repetitive code. + + + + + + +Ensure your SMS configuration is working correctly by testing the setup. + +1. Go to the Novu Dashboard, navigate to the **"Workflows"** section, and locate your configured workflow. +2. Click **"Test Workflow"** and provide sample data, such as a phone number or dynamic variables. +3. Verify delivery in the Novu Logs or your SMS provider’s dashboard. + + + + + + Some countries have strict restriction of using verified `from` sender id + (name). Kindly check country and provider specific requirements first. + + +## Sending SMS overrides + +The overrides field supports a `sms` property and `from`, `to`, `content` field overrides. This allows you to send a message to a different recipient, from a different sender, or with a different content. + +```javascript +import { Novu } from '@novu/node'; + +const novu = new Novu(''); + +novu.trigger('', { + to: { + subscriberId: '', + } + overrides: { + sms: { + to: '+123012345678', + from: 'Novu Team', + content: 'This SMS message is from overrides' + }, + }, +}); +``` + +## Using different SMS integration + +In Novu integration store, multiple SMS channel type provider integrations can be active at the same time. But only one provider integration can be primary at a time. This primary integration will be used as a provider to deliver the SMS by default. If you want to use a different active provider integration then you can use the `integrationIdentifier` sms overrides field. + +If there are 4 active SMS integrations with these identifiers:- + +1. twilio-abcdef +2. twilio-ghijkl +3. firetext-abcdef +4. infobip-abcdef + +Here, if `twilio-abcdef` is primary integration and you want to use `infobip-abcdef` with this trigger then you can use `integrationIdentifier` sms overrides field as below:- + + + +```javascript +import { Novu } from '@novu/node'; + +const novu = new Novu(''); + +novu.trigger('', { + to: { + subscriberId: '', + }, + overrides: { + sms: { + integrationIdentifier: 'infobip-abcdef', + }, + }, +}); + +``` + + + + Integration identifier is similar to Provider identifier but it is different than Provider Id. It is unique for each integration. You can find the `integrationIdentifier` in the integration store page. + +## Common errors + +Common errors and reason for these errors while sending sms messages using Novu. + +1. Subscriber does not have a configured channel. + - if the `from` field is missing / null / undefined. + + + + diff --git a/integrations/providers/sms/overview.mdx b/integrations/providers/sms/overview.mdx index 19b57497..a27b2880 100644 --- a/integrations/providers/sms/overview.mdx +++ b/integrations/providers/sms/overview.mdx @@ -1,93 +1,29 @@ --- -title: "SMS Channel Overview" +title: "Overview" sidebarTitle: "Overview" -description: "Learn the process of configuring and using sms providers with Novu" +description: "Learn how to configure the SMS channel" --- -import { MissingProvider } from "/snippets/missing-provider.mdx"; +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. -Novu can be used to deliver sms messages to your customers using a unified delivery API. You can easily integrate your favorite sms provider using the built-in integration store. +With the SMS channel, you can: -## Configuring SMS providers +- **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 -When creating a SMS provider integration you will be asked to provide additional fields alongside the provider-specific credentials: +## Key Features -- **From** - Will be displayed as the sender of the SMS +- **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 -Additional credentials can be API key, username, password or other provider specific credentials. +## Common Use Cases - - Some countries have strict restriction of using verified `from` sender id - (name). Kindly check country and provider specific requirements first. - - -## Sending SMS Overrides - -The overrides field supports a `sms` property and `from`, `to`, `content` field overrides. This allows you to send a message to a different recipient, from a different sender, or with a different content. - -```javascript -import { Novu } from '@novu/node'; - -const novu = new Novu(''); - -novu.trigger('', { - to: { - subscriberId: '', - } - overrides: { - sms: { - to: '+123012345678', - from: 'Novu Team', - content: 'This SMS message is from overrides' - }, - }, -}); -``` - -## Using different SMS integration - -In Novu integration store, multiple SMS channel type provider integrations can be active at the same time. But only one provider integration can be primary at a time. This primary integration will be used as a provider to deliver the SMS by default. If you want to use a different active provider integration then you can use the `integrationIdentifier` sms overrides field. - -If there are 4 active SMS integrations with these identifiers:- - -1. twilio-abcdef -2. twilio-ghijkl -3. firetext-abcdef -4. infobip-abcdef - -Here, if `twilio-abcdef` is primary integration and you want to use `infobip-abcdef` with this trigger then you can use `integrationIdentifier` sms overrides field as below:- - - - -```javascript -import { Novu } from '@novu/node'; - -const novu = new Novu(''); - -novu.trigger('', { - to: { - subscriberId: '', - }, - overrides: { - sms: { - integrationIdentifier: 'infobip-abcdef', - }, - }, -}); - -``` - - - - Integration identifier is similar to Provider identifier but it is different than Provider Id. It is unique for each integration. You can find the `integrationIdentifier` in the integration store page. - -## Common errors - -Common errors and reason for these errors while sending sms messages using Novu. - -1. Subscriber does not have a configured channel. - - if the `from` field is missing / null / undefined. - - - - +- **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/segment.mdx b/integrations/segment.mdx index 049d8b68..6c2ca05f 100644 --- a/integrations/segment.mdx +++ b/integrations/segment.mdx @@ -152,7 +152,7 @@ For example, if you rename this function `onIdentify`, it listens for “Identif Now let's learn how to send a payload to Novu based on the `onTrack` event function: -To successfully send a payload to Novu, triggering the appropriate [workflow](/getting-started/concepts#workflow) and delivering it to the correct customer, please ensure that you provide the following information: +To successfully send a payload to Novu, triggering the appropriate [workflow](/concepts/workflows) and delivering it to the correct customer, please ensure that you provide the following information: 1. Novu's Workflow Identifier. 2. Subscriber ID (Please ensure that the Subscriber ID is both unique and consistent across all of your databases). diff --git a/legacy-guides/FCM-iOS-Novu/how-to-send-PUSH-notifications-to-iOS-devices-with-FCM-using-Novu.mdx b/legacy-guides/FCM-iOS-Novu/how-to-send-PUSH-notifications-to-iOS-devices-with-FCM-using-Novu.mdx index e9d64621..2f1ae55c 100644 --- a/legacy-guides/FCM-iOS-Novu/how-to-send-PUSH-notifications-to-iOS-devices-with-FCM-using-Novu.mdx +++ b/legacy-guides/FCM-iOS-Novu/how-to-send-PUSH-notifications-to-iOS-devices-with-FCM-using-Novu.mdx @@ -10,7 +10,7 @@ To complete this tutorial, 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 an iOS project - [Firebase](https://firebase.google.com/) account -- [Novu](https://dashboard.novu.co/?utm_campaign=docs-gs-guides-fcm-ios) account +- [Novu](https://dashboard.novu.co/?utm_campaign=docs-gs-legacy-guides-fcm-ios) account - [Xcode](https://developer.apple.com/xcode/) installed on your machine ## Create an iOS app @@ -24,25 +24,25 @@ Your bundle identifier will be generated here — you will use this later when c Select **SwiftUI** as your interface and **Swift** as your language. - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} 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. @@ -51,29 +51,29 @@ 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 @@ -81,52 +81,52 @@ Let's create a new Firebase project inside of the console. 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. @@ -134,22 +134,22 @@ Copy this https://github.com/firebase/firebase-ios-sdk URL and then go to 'File` Paste that URL in the top right. - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} We must add the initialization code to the `AppDelegates.swift` file. @@ -159,7 +159,7 @@ Let's import the "FirebaseCore" dependency by adding `import FirebaseCore` to th Then, we will copy `firebaseapp.configure()` and place it in `didFinishLaunchingWithOptions` method. - {" "} + {" "} ```Swift @@ -208,19 +208,19 @@ class AppDelegate: UIResponder, UIApplicationDelegate { Click 'Next' and continue to the console. - {" "} + {" "} - {" "} + {" "} 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 @@ -228,7 +228,7 @@ Let's build and run our project and see if we get Firebase log messages in the c 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). @@ -236,64 +236,64 @@ 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. @@ -369,16 +369,16 @@ extension AppDelegate: UNUserNotificationCenterDelegate { To do this, we must first set the `Messaging.messaging().delegate = self` inside the `didFinishLaunchingWithOptions` method. - {" "} + {" "} - {" "} + {" "} We will now add a 'Messaging' delegate extension to `AppDelegate.swift` file. - {" "} + {" "} ```Swift @@ -505,7 +505,7 @@ extension AppDelegate: MessagingDelegate { 3. We must declare a `gcmMessageIDKey` inside of `AppDelegate`. We can define this as a `string` variable. - {" "} + {" "} ```Swift @@ -651,13 +651,13 @@ extension AppDelegate: MessagingDelegate { ## Adding app capabilities - {" "} + {" "} Click on the plus sign (+) and select `Background Modes`. - {" "} + {" "} **Select the following options:** @@ -667,25 +667,25 @@ Click on the plus sign (+) and select `Background Modes`. - 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 @@ -693,67 +693,67 @@ It will ask if you want to receive notifications, and we will allow it. 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. @@ -787,19 +787,19 @@ Make sure your service account key JSON content contains these fields: ``` - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} ## Creating a workflow @@ -815,20 +815,20 @@ Workflow creation is for streamlining automated notifications, enabling teams to - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} @@ -838,7 +838,7 @@ Workflow creation is for streamlining automated notifications, enabling teams to Creating a subscriber in Novu refers to the process of establishing a subscriber entity within the Novu platform. 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 that individual. - {" "} + {" "} @@ -868,12 +868,12 @@ Creating a subscriber in Novu refers to the process of establishing a subscriber ``` - + - + @@ -881,7 +881,7 @@ Creating a subscriber in Novu refers to the process of establishing a subscriber Here, you can locate the Provider_Identifier. - + ```JSON @@ -926,7 +926,7 @@ curl --location --request POST 'https://api.novu.co/v1/events/trigger' \ ``` - {" "} + {" "} ## Dynamic Content @@ -939,7 +939,7 @@ Now, we will determine the content when calling the API. That way, we could insert values through the payload of the API call. - {" "} + {" "} 2. Add a 'payload' object to the API call. @@ -963,7 +963,7 @@ curl --location --request POST 'https://api.novu.co/v1/events/trigger' \ ``` - {" "} + {" "} ## Sound of a notification @@ -1054,19 +1054,19 @@ You’ll then use a content extension to download the image and add it to the no In Xcode, go to File ▸ New ▸ Target…. Search for Notification Service Extension and select Next. Set a name and configure it to add to your main project. - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} 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. @@ -1075,16 +1075,16 @@ Open your app’s project settings and select the name you picked for the extent 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. @@ -1168,7 +1168,7 @@ class NotificationService: UNNotificationServiceExtension { Let's **rebuild** our app again! - {" "} + {" "} When making the API call, we should include: @@ -1211,10 +1211,10 @@ curl --location --request POST 'https://api.novu.co/v1/events/trigger' \ ``` - {" "} + {" "} - {" "} + {" "} ## Sending actionable notifications @@ -1517,7 +1517,7 @@ curl --location --request POST "https://api.novu.co/v1/events/trigger" \ ``` - {" "} + {" "} ## Additional resources diff --git a/legacy-guides/add-digest-to-email-notifications.mdx b/legacy-guides/add-digest-to-email-notifications.mdx index c5557441..89d04f83 100644 --- a/legacy-guides/add-digest-to-email-notifications.mdx +++ b/legacy-guides/add-digest-to-email-notifications.mdx @@ -1,20 +1,19 @@ --- title: "How to Add Digest to Email Notifications" -description: "Leverage the digest functionality to send 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). +You can find the entire code(frontend as well as backend) for this app [here](https://github.com/novuhq/digest-email-app). - If, instead, you want to add digest to in-app notifications, we have a guide - for that as well. Take a - look [here](/guides/add-digest-to-inapp-notifications). + If, instead, you want to add digest to in-app notifications, we have a guide for that as well. Take a look [here](/legacy-guides/add-digest-to-inapp-notifications). -### What is a Digest Notification? + +### What is a digest notification? Often 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. @@ -22,17 +21,17 @@ 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? +### 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.novu.co/workflows?utm_campaign=docs-digests). If you want to learn more about it, [this](/getting-started/concepts#digest) is a great place to start. +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.novu.co/workflows?utm_campaign=docs-digests). If you want to learn more about it, [this](/workflow/digest) is a great place to start. Let’s see it in action now! -# Add Digest Notification To An App +# Add digest notification to an application To get started with this, you need the following: -- A Novu account. [Sign up for free](http://dashboard.novu.co/?utm_campaign=docs-gs-digests) if you don’t have one yet. +- A Novu account. [Sign up for free](http://dashboard.novu.co/?utm_campaign=docs-gs-digests) if you don’t have one yet. - A working React development environment. # Workflow setup in Novu @@ -40,8 +39,8 @@ To get started with this, you need the following: 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: +2. Click **"Workflows"** on the left sidebar of your Novu dashboard. +3. Click the **"Create Workflow"** button on the top right: {" "} diff --git a/legacy-guides/add-digest-to-inapp-notifications.mdx b/legacy-guides/add-digest-to-inapp-notifications.mdx index 04f12d4a..5ca4b8f1 100644 --- a/legacy-guides/add-digest-to-inapp-notifications.mdx +++ b/legacy-guides/add-digest-to-inapp-notifications.mdx @@ -35,8 +35,8 @@ To get started with this, you need the following: 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: +2. Click **"Workflows"** on the left sidebar of your Novu dashboard. +3. Click the **"Create Workflow"** button on the top right: {" "} @@ -146,7 +146,7 @@ await novu.subscribers.identify("aa234u787", { }); ``` -Here, we’re creating a subscriber with the `subscriberID` of `aa234u787.` You can read more about subscribers [here](/subscribers/subscribers). +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: diff --git a/legacy-guides/cookbook/introduction.mdx b/legacy-guides/cookbook/introduction.mdx index f3cafada..a04ec299 100644 --- a/legacy-guides/cookbook/introduction.mdx +++ b/legacy-guides/cookbook/introduction.mdx @@ -189,4 +189,4 @@ await novu.trigger('slack', { where `chatMsg` is a payload variable in the workflow editor. -Follow the [full guide](/guides/slack-guide) on how to send Slack notifications using Novu. +Follow the [full guide](/legacy-guides/slack-guide) on how to send Slack notifications using Novu. diff --git a/legacy-guides/discord-guide.mdx b/legacy-guides/discord-guide.mdx index 661afae0..5f0f06ec 100644 --- a/legacy-guides/discord-guide.mdx +++ b/legacy-guides/discord-guide.mdx @@ -23,8 +23,8 @@ Setting up Discord is fairly straightforward. You just need the `webhook Url`. I {" "} -2. Right-click the channel and select “Edit Channel”. - +2. Right-click the channel and select **“Edit Channel”**. + {" "} 3. Select Integrations -> Webhooks -> Create Webhook @@ -45,20 +45,20 @@ In this part, we'll set up a workflow that will be triggered when we send a noti {" "} 2. Goto the [Novu Web Dashboard](https://dashboard.novu.co/workflows?utm_campaign=docs-discordnotifications). -3. Click on the 'Add a workflow' button and select 'Blank workflow' from the dropdown. +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. - +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. +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. {" "} Whatever is placed inside double braces is a variable. -6. Click the 'Get Snippet' button, copy the trigger code and keep it somewhere. We'll need this to trigger this workflow. +6. Click the **"Get Snippet"** button, copy the trigger code and keep it somewhere. We'll need this to trigger this workflow. {" "} 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 index f088ebf1..968947af 100644 --- 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 @@ -10,7 +10,7 @@ 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.novu.co/?utm_campaign=docs-gs-guides-fcm-flutter) account. +- [Novu](https://dashboard.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. @@ -276,37 +276,37 @@ Now, run the Flutter app. Your device should be connected to your machine to ena In your Firebase project, navigate to `Engage` section and click on `Messaging`. - {" "} + {" "} 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! @@ -317,16 +317,16 @@ You should see the notification on your device! ## Sign Up on Novu -Let's use Novu to fire push notifications via FCM. First, sign up on [Novu Cloud](https://dashboard.novu.co)?utm_campaign=docs-gs-guides-fc-flutter. +Let's use Novu to fire push notifications via FCM. First, sign up on [Novu Cloud](https://dashboard.novu.co)?utm_campaign=docs-gs-legacy-guides-fc-flutter. - {" "} + {" "} 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`. @@ -334,10 +334,10 @@ You can also do this by heading straight to the `Integrations Store`. Click on ` ## Connect FCM as a Push Channel provider - {" "} + {" "} - {" "} + {" "} You only need to configure FCM with Novu with the Firebase Service Accounts private key. @@ -371,19 +371,19 @@ Make sure your service account key JSON content contains these fields: ``` - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} ## Create a Notification Workflow @@ -397,20 +397,20 @@ This ensures consistent platform notifications and allows dynamic adjustments fo - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} - {" "} + {" "} @@ -424,7 +424,7 @@ A subscriber is essentially the recipient of the notifications sent through Novu You can see the list of subscribers in the `Subscribers` section of the Novu dashboard. - {" "} + {" "} @@ -460,7 +460,7 @@ You can see the list of subscribers in the `Subscribers` section of the Novu das Here, you can locate the Provider_Identifier. - + ```JSON diff --git a/legacy-guides/framework-guides/framework-mjml.mdx b/legacy-guides/framework-guides/framework-mjml.mdx index 2d4482a6..53501da8 100644 --- a/legacy-guides/framework-guides/framework-mjml.mdx +++ b/legacy-guides/framework-guides/framework-mjml.mdx @@ -381,6 +381,6 @@ 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/framework-mjml). -Once you've built the workflow, you might want read one of [our other guides](/guides/framework-guides/product) on how to empower product teams to manage notification workflows. +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/framework-nuxt-vuemail.mdx b/legacy-guides/framework-guides/framework-nuxt-vuemail.mdx index 01368285..1b9ff27e 100644 --- a/legacy-guides/framework-guides/framework-nuxt-vuemail.mdx +++ b/legacy-guides/framework-guides/framework-nuxt-vuemail.mdx @@ -493,4 +493,4 @@ export const myWorkflow = workflow('hello-world', async ({ step, payload }) => { - No longer limited by notification content editors and systems. The more, the merrier! - Now an IFTTT (If-This-Then-That) pro engineer! - Once you've built the workflow, you might want read one of [our other guides](/guides/framework-guides/product) on how to empower product teams to manage notification workflows. Have fun, and share your use case on Discord with us! + 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. Have fun, and share your use case on Discord with us! diff --git a/legacy-guides/framework-guides/framework-react-email.mdx b/legacy-guides/framework-guides/framework-react-email.mdx index d17de12f..48000b67 100644 --- a/legacy-guides/framework-guides/framework-react-email.mdx +++ b/legacy-guides/framework-guides/framework-react-email.mdx @@ -548,7 +548,7 @@ Creating workflows with Novu Framework is a breeze. Here are a couple of other e 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](/guides/framework-guides/product) on how to empower product teams to manage notification workflows. +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 diff --git a/legacy-guides/framework-guides/framework-remix.mdx b/legacy-guides/framework-guides/framework-remix.mdx index 4451cb30..cea03670 100644 --- a/legacy-guides/framework-guides/framework-remix.mdx +++ b/legacy-guides/framework-guides/framework-remix.mdx @@ -318,7 +318,7 @@ On the top right(as seen in the image above) of the Novu Dev Studio, you can syn ### 6. Send a Notification -Trigger a notification using the recently deployed workflow either via your [Novu Cloud dashboard](https://dashboard.novu.co) or [code](/quickstarts/react#trigger-a-notification). +Trigger a notification using the recently deployed workflow either via your [Novu Cloud dashboard](https://dashboard.novu.co). ```js import { Novu } from "@novu/node"; @@ -332,4 +332,4 @@ novu.trigger("new-signup", { }); ``` -Once you've built the workflow, you might want read one of [our other guides](/guides/framework-guides/product) on how to empower product teams to manage notification workflows. +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/framework-svelte.mdx b/legacy-guides/framework-guides/framework-svelte.mdx index 8fd0572b..aae44522 100644 --- a/legacy-guides/framework-guides/framework-svelte.mdx +++ b/legacy-guides/framework-guides/framework-svelte.mdx @@ -314,6 +314,6 @@ On the top right of the Novu Dev Studio, you can sync to Novu Cloud when you're ### 6. Send a Notification -Trigger a notification using the recently deployed workflow either via your [Novu Cloud dashboard](https://dashboard.novu.co) or [code](/quickstarts/react#trigger-a-notification). +Trigger a notification using the recently deployed workflow either via your [Novu Cloud dashboard](https://dashboard.novu.co) or [code](/inbox/react/get-started). -Once you've built the workflow, you might want read one of [our other guides](/guides/framework-guides/product) on how to empower product teams to manage notification workflows. +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 index e7fdceff..7fd01ee9 100644 --- a/legacy-guides/framework-guides/otp.mdx +++ b/legacy-guides/framework-guides/otp.mdx @@ -325,6 +325,6 @@ 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](/guides/framework-guides/product) on how to empower product teams to manage notification workflows. +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/headless-notification-center-guide.mdx b/legacy-guides/headless-notification-center-guide.mdx index 3e06ec96..032cc460 100644 --- a/legacy-guides/headless-notification-center-guide.mdx +++ b/legacy-guides/headless-notification-center-guide.mdx @@ -33,14 +33,14 @@ To get started with this you need: Once, you have signed up for Novu and have a dev environment, 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: +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 + 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: @@ -52,7 +52,7 @@ Once, you have signed up for Novu and have a dev environment, follow the steps b {" "} - The `In-app` node allows you to further customize the notifications that will + 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: @@ -64,11 +64,11 @@ Once, you have signed up for Novu and have a dev environment, follow the steps b 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. +- **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: @@ -222,7 +222,7 @@ Here, we've memoized the `fetchNotifications` to optimize performance and passed You can refer to the entire context [here](https://github.com/novuhq/novu-headless-demo-app/blob/main/frontend/src/context/NotificationContext.js) for a better understanding. -We've also used several methods related to the Headless Notification Center package. You can find the complete list [here.](/notification-center/client/headless/api-reference) +We've also used several methods related to the Headless Notification Center package. You can find the complete list [here.](/inbox/headless/get-started) The methods that we've used in our app are `markNotificationsAsRead`, `deleteNotification`, and `markAllMessagesAsRead`. They are as follows: @@ -280,7 +280,7 @@ const markAllMessagesAsRead = (feedId) => { You can view the entire API reference - [here](/notification-center/client/headless/api-reference) and pick up the + [here](/inbox/headless/get-started) and pick up the methods that you'd like to use for your specific requirements. @@ -458,6 +458,6 @@ Finally, we've used some css to style the app to our liking. You can see that [h If you've followed everything till here, you'll end up with an app like the following: 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.](/demos/introduction) +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 index d9905034..9b6b6bbb 100644 --- a/legacy-guides/novu-fcm-react-native-android.mdx +++ b/legacy-guides/novu-fcm-react-native-android.mdx @@ -206,7 +206,7 @@ We'll need a workflow to trigger notifications to our user's devices. Follow the If you're doing this for the first time, you'll need to get your service account key from the [Firebase Console](https://console.firebase.google.com/). Read more about it in our - [FCM provider docs.](https://docs.novu.co/channels-and-providers/push/fcm) + [FCM provider docs.](https://docs.novu.co/integrations/providers/push/fcm) 2. Now, we need to create a workflow that we'll trigger from our app to send notifications. Head over to [workflows in the Novu Web Dashboard](https://dashboard.novu.co/workflows?utm_campaign=docs-guides-fcm-android) and click on the 'Add a workflow' button. diff --git a/legacy-guides/novu-fcm-web.mdx b/legacy-guides/novu-fcm-web.mdx index 470bca56..d94b366e 100644 --- a/legacy-guides/novu-fcm-web.mdx +++ b/legacy-guides/novu-fcm-web.mdx @@ -47,7 +47,7 @@ We'll need a workflow to trigger notifications to our user's devices. Follow the If you're doing this for the first time, you'll need to get your service account key from the [Firebase Console](https://console.firebase.google.com/). Read more about it in our - [FCM provider docs.](https://docs.novu.co/channels-and-providers/push/fcm) + [FCM provider docs.](https://docs.novu.co/integrations/providers/push/fcm) 2. Now, we need to create a workflow that we'll trigger from our app to send notifications. Head over to [workflows in the Novu Web Dashboard](https://dashboard.novu.co/workflows?utm_campaign=docs-guides-fcm-web) and click on the 'Add a workflow' button. @@ -220,9 +220,9 @@ await novu.subscribers.identify(process.env.NOVU_SUB_ID, { }); ``` -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.](/subscribers/subscribers). +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/channels-and-providers/push/fcm#set-device-token): +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( diff --git a/legacy-guides/usecases/centralized-multiple-legacy-implementations.mdx b/legacy-guides/usecases/centralized-multiple-legacy-implementations.mdx index 2022e6a0..7cb8b0ff 100644 --- a/legacy-guides/usecases/centralized-multiple-legacy-implementations.mdx +++ b/legacy-guides/usecases/centralized-multiple-legacy-implementations.mdx @@ -7,7 +7,7 @@ If you're coming from a medium or large team with multiple implementations of se - Install Novu's SDK (according to your preferred tech). - Connect your existing delivery providers to Novu. -- [Migrate your users to subscribers](/subscribers/subscribers#import-subscribers) on Novu either via Cloud or on-prem. +- [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 index 88171549..01833636 100644 --- a/legacy-guides/usecases/debug-notifications.mdx +++ b/legacy-guides/usecases/debug-notifications.mdx @@ -18,5 +18,3 @@ You can filter through channels, workflows, emails, subscribers and transactions - -[Explore more about Novu’s Activity Feed](/activity-feed/introduction) diff --git a/legacy-guides/usecases/digest-multiple-events.mdx b/legacy-guides/usecases/digest-multiple-events.mdx index 352f41a2..de20b33c 100644 --- a/legacy-guides/usecases/digest-multiple-events.mdx +++ b/legacy-guides/usecases/digest-multiple-events.mdx @@ -11,4 +11,4 @@ Novu ships with a built-in digest engine that handles batching and digesting mul -[Explore more about Novu's Digest Feature](/workflows/digest) +[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 index 4391fa6d..7220da89 100644 --- a/legacy-guides/usecases/embedded-notification-center.mdx +++ b/legacy-guides/usecases/embedded-notification-center.mdx @@ -13,4 +13,4 @@ It's available as a drop-in component for React, Vue and Angular apps. For non-s 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](/notification-center/introduction) +[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 index dc24e262..afd8f013 100644 --- a/legacy-guides/usecases/introduction.mdx +++ b/legacy-guides/usecases/introduction.mdx @@ -14,42 +14,42 @@ The common use cases for using Novu are highlighted below: title="Managing multiple delivery providers in one place" icon="circle-1" color="#ea5a0c" - href="/use-cases/multiple-delivery-providers" + href="/legacy-guides/usecases/multiple-delivery-providers" > diff --git a/mint.json b/mint.json index ce6ee64c..e2067d63 100644 --- a/mint.json +++ b/mint.json @@ -1,21 +1,29 @@ { "$schema": "https://mintlify.com/schema.json", + "theme": "venus", "name": "Novu", "logo": { "dark": "/logo/logo-dark-bg.svg", "light": "/logo/logo-light-bg.svg" }, + "modeToggle": { + "default": "light" + }, "openapi": "https://api.novu.co/openapi.json", "favicon": "/favicon.png", + "colors": { - "primary": "#0055ff", - "light": "#00d5ff", - "dark": "#0055ff", + "primary": "#03a9ca", + "light": "#03a9ca", + "dark": "#03a9ca", "background": { "dark": "#000000", "light": "#ffffff" } }, + "background": { + "style": "windows" + }, "feedback": { "thumbsRating": true, "suggestEdit": true, @@ -33,30 +41,46 @@ ], "topbarCtaButton": { "name": "Get Started", - "url": "https://dashboard.novu.co/?utm_campaign=docs_top_bar_gs" + "url": "https://dashboard.novu.co/?utm_campaign=docs_top_bar_gs", + "style": "pill", + "arrow": true }, - "anchors": [], - "tabs": [ + "codeBlock": { + "mode": "auto" + }, + "anchors": [ { - "name": "", - "url": "inbox" + "name": "Platform", + "icon": "book", + "url": "platform" }, { - "name": "Integrations", - "url": "integrations" + "name": "Framework", + "icon": "code", + "url": "framework" }, - { - "name": "API Reference", - "url": "api-reference" + "name": "API reference", + "icon": "rectangle-terminal", + "url": "/api-reference" }, { - "name": "SDKs", - "url": "sdks" + "name": "SDKs and libraries", + "icon": "code", + "url": "/sdks" + } + ], + "primaryTab": { + "name": "Platform" + }, + "tabs": [ + { + "name": "UI components", + "url": "inbox" }, { - "name": "Recipes", - "url": "recipes" + "name": "Framework", + "url": "framework" }, { "name": "Community", @@ -65,32 +89,44 @@ ], "navigation": [ { - "group": "Getting Started", + "group": "Get started", "pages": [ - "getting-started/introduction", "getting-started/how-novu-works", - "getting-started/non-technical" + "getting-started/quickstart" + ] + }, + { + "group": "Get started", + "pages": [ + "framework/overview", + { + "group": "Quickstart", + "pages": [ + "framework/quickstart/nextjs", + "framework/quickstart/express", + "framework/quickstart/remix", + "framework/quickstart/nestjs", + "framework/quickstart/svelte", + "framework/quickstart/nuxt", + "framework/quickstart/h3", + "framework/quickstart/lambda" + ] + } ] }, { - "group": "Quickstart", + "group": "Concepts", "pages": [ - "quickstart/overview", - "quickstart/nextjs", - "quickstart/express", - "quickstart/remix", - "quickstart/nestjs", - "quickstart/svelte", - "quickstart/nuxt", - "quickstart/h3", - "quickstart/lambda" + "framework/studio", + "framework/endpoint", + "framework/controls" ] }, { "group": "Concepts", "pages": [ "concepts/workflows", - "concepts/controls", + "concepts/notifications", "concepts/trigger", "concepts/subscribers", "concepts/endpoint", @@ -102,23 +138,135 @@ ] }, { - "group": "Architecture", - "pages": ["architecture/introduction", "architecture/diagrams"] - }, - { - "group": "Build Workflows", + "group": "Build workflows", "pages": [ - "workflow/introduction", - "workflow/studio", - "workflow/content", + "workflow/overview", + "workflow/how-to/build-a-workflow", + "workflow/template-editor", "workflow/digest", "workflow/delay", - "workflow/custom" + "workflow/custom", + "workflow/tags", + "workflow/step-conditions", + "workflow/channel-steps" + ] + }, + { + "group": "Channels", + "pages": [ + { + "group": "In-App", + "icon": "bell", + "pages": [ + "integrations/providers/in-app/overview", + "integrations/providers/in-app/adding-in-app" + ] + }, + { + "group": "Email", + "icon": "envelope", + "pages": [ + "integrations/providers/email/overview", + "integrations/providers/email/adding-email", + { + "group": "Providers", + "pages": [ + "integrations/providers/email/sendgrid", + "integrations/providers/email/amazon-ses", + "integrations/providers/email/postmark", + "integrations/providers/email/resend", + "integrations/providers/email/sendinblue", + "integrations/providers/email/mailersend", + "integrations/providers/email/mailgun", + "integrations/providers/email/mailjet", + "integrations/providers/email/infobip", + "integrations/providers/email/mailtrap", + "integrations/providers/email/mandrill", + "integrations/providers/email/netcore", + "integrations/providers/email/outlook365", + "integrations/providers/email/braze", + "integrations/providers/email/sparkpost", + "integrations/providers/email/plunk", + "integrations/providers/email/custom-smtp" + ] + } + ] + }, + { + "group": "SMS", + "icon": "message-sms", + "pages": [ + "integrations/providers/sms/overview", + "integrations/providers/sms/adding-sms", + { + "group": "Providers", + "pages": [ + "integrations/providers/sms/twilio", + "integrations/providers/sms/sms77", + "integrations/providers/sms/africas-talking", + "integrations/providers/sms/azure", + "integrations/providers/sms/bulk-sms", + "integrations/providers/sms/messagebird", + "integrations/providers/sms/simpletexting", + "integrations/providers/sms/infobip", + "integrations/providers/sms/sendchamp", + "integrations/providers/sms/aws-sns", + "integrations/providers/sms/nexmo", + "integrations/providers/sms/plivo", + "integrations/providers/sms/telnyx", + "integrations/providers/sms/termii", + "integrations/providers/sms/firetext", + "integrations/providers/sms/gupshup", + "integrations/providers/sms/clickatell" + ] + } + ] + }, + { + "group": "Push", + "icon": "mobile", + "pages": [ + "integrations/providers/push/overview", + "integrations/providers/push/adding-push", + { + "group": "Providers", + "pages": [ + "integrations/providers/push/fcm", + "integrations/providers/push/apns", + "integrations/providers/push/expo-push", + "integrations/providers/push/onesignal", + "integrations/providers/push/pushpad", + "integrations/providers/push/push-webhook", + "integrations/providers/push/pusher-beams" + ] + } + ] + }, + { + "group": "Chat", + "icon": "comments", + "pages": [ + "integrations/providers/chat/overview", + "integrations/providers/chat/adding-chat", + { + "group": "Providers", + "pages": [ + "integrations/providers/chat/discord", + "integrations/providers/chat/slack", + "integrations/providers/chat/ms-teams", + "integrations/providers/chat/zulip", + "integrations/providers/chat/whats-app" + ] + } + ] + } ] }, { - "group": "", - "pages": ["inbox/introduction"] + "group": "Get Started", + "pages": [ + "inbox/overview" + ] }, { "group": "React", @@ -156,12 +304,15 @@ }, { "group": "Headless", - "icon": "headless", - "pages": ["inbox/headless/get-started", "inbox/headless/api-reference"] + "icon": "js", + "pages": [ + "inbox/headless/get-started", + "inbox/headless/api-reference" + ] }, { "group": "React Native", - "icon": "react", + "icon": "mobile", "pages": [ "inbox/react-native/quickstart", { @@ -176,28 +327,47 @@ } ] }, + { + "group": "Build workflows", + + "pages": [ + "framework/overview", + "framework/tags", + "framework/digest", + "framework/delay", + "framework/custom", + "framework/in-app-channel", + "framework/email-channel", + "framework/push-channel", + "framework/sms-channel", + "framework/chat-channel" + ] + }, { "group": "Deploy", "pages": [ - "deployment/syncing", - "deployment/production", + "framework/deployment/syncing", + "framework/deployment/production", { "group": "Platforms", - "pages": ["deployment/cli", "deployment/actions"] + "pages": [ + "framework/deployment/cli", + "framework/deployment/actions" + ] } ] }, { - "group": "Welcome", + "group": "Get Started", "pages": [ - "community/introduction", + "community/overview", "community/project-differences" ] }, { "group": "Self Hosting Novu", "pages": [ - "community/self-hosting-novu/introduction", + "community/self-hosting-novu/overview", "community/self-hosting-novu/deploy-with-docker", "community/self-hosting-novu/telemetry" ] @@ -223,29 +393,31 @@ ] }, { - "group": "", - "pages": ["sdks/overview"] - }, - { - "group": "Framework Typescript SDK", + "group": "SDK Reference", "pages": [ - "sdks/framework/typescript/overview", - "sdks/framework/typescript/client", - "sdks/framework/typescript/workflow", - "sdks/framework/typescript/steps/introduction", - "sdks/framework/typescript/steps/email", - "sdks/framework/typescript/steps/inApp", - "sdks/framework/typescript/steps/sms", - "sdks/framework/typescript/steps/push", - "sdks/framework/typescript/steps/chat", - "sdks/framework/typescript/steps/digest", - "sdks/framework/typescript/steps/delay", - "sdks/framework/typescript/steps/custom" + "framework/typescript/overview", + "framework/typescript/client", + "framework/typescript/workflow", + { + "group": "Steps", + "pages": [ + "framework/typescript/steps/overview", + "framework/typescript/steps/email", + "framework/typescript/steps/inApp", + "framework/typescript/steps/sms", + "framework/typescript/steps/push", + "framework/typescript/steps/chat", + "framework/typescript/steps/digest", + "framework/typescript/steps/delay", + "framework/typescript/steps/custom" + ] + } ] }, { - "group": "Rest API SDK", + "group": "SDKs", "pages": [ + "sdks/overview", "sdks/nodejs", "sdks/php", "sdks/laravel", @@ -259,11 +431,31 @@ }, { "group": "Account", - "pages": ["account/authentication", "account/sso", "account/billing"] + "pages": [ + "account/authentication", + "account/sso", + "account/billing" + ] }, { "group": "Additional Resources", "pages": [ + { + "group": "Recipes", + "icon": "notebook", + "pages": [ + "recipes/workflows/introduction", + "recipes/workflows/otp", + "recipes/workflows/password-reset", + "recipes/workflows/recent-login", + "recipes/workflows/invoice-receipt", + "recipes/workflows/shipping-confirmation", + "recipes/workflows/feedback-reviews", + "recipes/workflows/multi-workflow-digest", + "recipes/workflows/translations", + "integrations/segment" + ] + }, "additional-resources/security", "additional-resources/idempotency", "additional-resources/data-migrations", @@ -271,7 +463,7 @@ ] }, { - "group": "", + "group": "API Reference", "pages": [ "api-reference/overview", "api-reference/rate-limiting", @@ -343,7 +535,7 @@ ] }, { - "group": "Workflow Overrides", + "group": "Workflow overrides", "pages": [ "api-reference/workflow-overrides/create-workflow-overrides", "api-reference/workflow-overrides/get-workflow-overrides", @@ -406,8 +598,10 @@ ] }, { - "group": "Execution Details", - "pages": ["api-reference/execution-details/get-execution-details"] + "group": "Execution details", + "pages": [ + "api-reference/execution-details/get-execution-details" + ] }, { "group": "Feeds", @@ -451,124 +645,27 @@ ] }, { - "group": "", - "pages": ["integrations/overview"] - }, - - { - "group": "Providers", + "group": "Integrations", "pages": [ - "integrations/providers/default-providers", - { - "group": "Email", - "icon": "envelope", - "pages": [ - "integrations/providers/email/overview", - "integrations/providers/email/sendgrid", - "integrations/providers/email/amazon-ses", - "integrations/providers/email/postmark", - "integrations/providers/email/resend", - "integrations/providers/email/sendinblue", - "integrations/providers/email/mailersend", - "integrations/providers/email/mailgun", - "integrations/providers/email/mailjet", - "integrations/providers/email/infobip", - "integrations/providers/email/mailtrap", - "integrations/providers/email/mandrill", - "integrations/providers/email/netcore", - "integrations/providers/email/outlook365", - "integrations/providers/email/braze", - "integrations/providers/email/sparkpost", - "integrations/providers/email/plunk", - "integrations/providers/email/custom-smtp" - ] - }, { - "group": "SMS", - "icon": "message-sms", + "group": "Content", "pages": [ - "integrations/providers/sms/overview", - "integrations/providers/sms/twilio", - "integrations/providers/sms/sms77", - "integrations/providers/sms/africas-talking", - "integrations/providers/sms/azure", - "integrations/providers/sms/bulk-sms", - "integrations/providers/sms/messagebird", - "integrations/providers/sms/simpletexting", - "integrations/providers/sms/infobip", - "integrations/providers/sms/sendchamp", - "integrations/providers/sms/aws-sns", - "integrations/providers/sms/nexmo", - "integrations/providers/sms/plivo", - "integrations/providers/sms/telnyx", - "integrations/providers/sms/termii", - "integrations/providers/sms/firetext", - "integrations/providers/sms/gupshup", - "integrations/providers/sms/clickatell" + "framework/content/react-email", + "framework/content/vue-email", + "framework/content/svelte-email", + "framework/content/remix-react-email" ] }, { - "group": "Push", - "icon": "mobile", - "pages": [ - "integrations/providers/push/overview", - "integrations/providers/push/fcm", - "integrations/providers/push/apns", - "integrations/providers/push/expo-push", - "integrations/providers/push/onesignal", - "integrations/providers/push/pushpad", - "integrations/providers/push/push-webhook", - "integrations/providers/push/pusher-beams" - ] - }, - { - "group": "Chat", - "icon": "comments", + "group": "Schema", "pages": [ - "integrations/providers/chat/overview", - "integrations/providers/chat/discord", - "integrations/providers/chat/slack", - "integrations/providers/chat/ms-teams", - "integrations/providers/chat/zulip", - "integrations/providers/chat/whats-app" + "framework/schema/zod", + "framework/schema/json-schema" ] } ] - }, - { - "group": "Content", - "pages": [ - "integrations/content/react-email", - "integrations/content/vue-email", - "integrations/content/svelte-email", - "integrations/content/remix-react-email" - ] - }, - - { - "group": "Schema", - "pages": ["integrations/schema/zod", "integrations/schema/json-schema"] - }, - { - "group": "Workflows", - "pages": [ - "recipes/workflows/introduction", - "recipes/workflows/otp", - "recipes/workflows/password-reset", - "recipes/workflows/recent-login", - "recipes/workflows/invoice-receipt", - "recipes/workflows/shipping-confirmation", - "recipes/workflows/feedback-reviews", - "recipes/workflows/multi-workflow-digest", - "recipes/workflows/translations" - ] - }, - { - "group": "Trigger Integrations", - "pages": ["integrations/segment"] } ], - "backgroundImage": "/background.png", "redirects": [ { "source": "/api/client-libraries", @@ -684,7 +781,7 @@ }, { "source": "/notification-center/introduction", - "destination": "/inbox/introduction" + "destination": "/inbox/overview" }, { "source": "/sdks/introduction", @@ -711,13 +808,39 @@ "destination": "/guides/workflows/introduction" } ], - "footerSocials": { - "twitter": "https://twitter.com/novuhq", - "github": "https://github.com/novuhq", - "linkedin": "https://www.linkedin.com/company/novuco" + "footer": { + "socials": { + "twitter": "https://twitter.com/novuhq", + "github": "https://github.com/novuhq", + "linkedin": "https://www.linkedin.com/company/novuco", + "discord": "https://discord.gg/novu", + "youtube": "https://www.youtube.com/@novuhq" + }, + "links": [ + { + "title": "Learn", + "links": [ + { + "label": "Blog", + "url": "https://novu.co/blog" + }, + { + "label": "Changelog", + "url": "https://roadmap.novu.co/changelog" + }, + { + "label": "Roadmap", + "url": "https://roadmap.novu.co" + } + ] + } + ] }, "api": { - "baseUrl": ["https://api.novu.co", "https://eu.api.novu.co"], + "baseUrl": [ + "https://api.novu.co", + "https://eu.api.novu.co" + ], "auth": { "method": "key", "name": "Authorization", @@ -742,4 +865,4 @@ "metadata": { "og:image": "https://novu.co/images/social-preview.jpg" } -} +} \ No newline at end of file diff --git a/quickstart/overview.mdx b/quickstart/overview.mdx deleted file mode 100644 index dc3cb217..00000000 --- a/quickstart/overview.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: "Quickstart" -sidebarTitle: "Overview" -description: "Start building with Novu by following our Quick Start guides. These guides provide step-by-step instructions for integrating Novu into your application." ---- - -import { SvelteIcon } from "/snippets/icons/svelte.mdx"; -import { NestjsIcon } from "/snippets/icons/nestjs.mdx"; -import { ExpressjsIcon } from "/snippets/icons/expressjs.mdx"; -import { LambdaIcon } from "/snippets/icons/lambda.mdx"; -import { NuxtIcon } from "/snippets/icons/nuxt.mdx"; -import { NextjsIcon } from "/snippets/icons/nextjs.mdx"; -import { RemixIcon } from "/snippets/icons/remix.mdx"; -import { H3Icon } from "/snippets/icons/h3.mdx"; - -Getting started with Novu is easy. - -### What to expect -Following the Quickstart directions will create a sample Novu application in your framework of choice, including two pre-built workflows: -- InApp (for use with [Inbox](/inbox/introduction)) -- Email - -Each sample application includes instructions for triggering your sample workflow, so you'll be able to send a sample notification in minutes. - -To start, navigate to a new working directory that you'll likely end up syncing to Git, then pick your framework of choice. Have fun! - -{/* Todo: add a picture of the sample app webpage */} - - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - diff --git a/recipes/workflows/introduction.mdx b/recipes/workflows/introduction.mdx index 67cb0c16..a7f3581f 100644 --- a/recipes/workflows/introduction.mdx +++ b/recipes/workflows/introduction.mdx @@ -4,7 +4,7 @@ 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 +## Workflow examples This directory consists of drop-in working projects of different types of notification workflows you can use. @@ -12,23 +12,23 @@ Each directory is a batteries-included Novu Nextjs app that you can simply clone - + Send One-Time Passwords (OTP) without worrying about email reputation scores. - - Let users "Reset Password" or "Forgot Username" + + Let users "Reset Password" or "Forgot Username". - - Suspicious activity? Inform your users of recent login attempts + + Suspicious activity? Inform your users of recent login attempts. - + Send invoices or receipts after a transaction is processed. - + Let buyers know when their order has shipped, complete with tracking number. - - Reviews are the lifeblood of any business. Remind and incentivize your buyers to leave a review + + Reviews are the lifeblood of any business. Remind and incentivize your buyers to leave a review. diff --git a/recipes/workflows/invoice-receipt.mdx b/recipes/workflows/invoice-receipt.mdx index d59e6d7f..bef0a612 100644 --- a/recipes/workflows/invoice-receipt.mdx +++ b/recipes/workflows/invoice-receipt.mdx @@ -1,9 +1,9 @@ --- title: "Invoice Receipt" -description: "Send invoices or receipts immediately after a user purchases" +description: "Send invoices or receipts immediately after a user purchases." --- -## Intro +## Introduction Invoices and receipts require custom fields such as the order number, billing details, and objects purchased which must be dynamically fetched from the database. The use of step controls and the payload schema simplifies the fetching of that unique data. @@ -17,7 +17,7 @@ Invoices and receipts require custom fields such as the order number, billing de /> -## Code Example +## Code example ```javascript import { workflow } from '@novu/framework'; @@ -25,7 +25,7 @@ import { renderAppleReceiptEmail } from '../emails/apple-receipt'; import { zodControlSchema, jsonSchema, zodPayloadSchema } from './schemas'; /** - * Apple Receipt Workflow + * Apple Receipt workflow */ export const appleReceipt = workflow( "Apple Receipt", diff --git a/recipes/workflows/multi-workflow-digest.mdx b/recipes/workflows/multi-workflow-digest.mdx index a6a9be48..a3fd6a96 100644 --- a/recipes/workflows/multi-workflow-digest.mdx +++ b/recipes/workflows/multi-workflow-digest.mdx @@ -1,6 +1,6 @@ --- title: "Multi Workflow Digest Summary" -sidebarTitle: "Multi Workflow Digest" +sidebarTitle: "Multi-workflow digest" description: "Send a digest notification email by batching different types of notifications from multiple workflows" --- @@ -10,9 +10,9 @@ This example demonstrates how to send a digest notification email by batching di **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) +Source Code on GitHub: [Multi-workflow digest](https://github.com/novuhq/examples/tree/main/novu-workflows/react/multi-workflow-digest) -Sync the changes from local studio before triggering the workflows using backend SDKs or API. Read more about [sync](/deployment/syncing). +Sync the changes from local studio before triggering the workflows using backend SDKs or API. Read more about [sync](framework/deployment/syncing). diff --git a/recipes/workflows/scaffold.mdx b/recipes/workflows/scaffold.mdx index bc6da167..ee0b67e2 100644 --- a/recipes/workflows/scaffold.mdx +++ b/recipes/workflows/scaffold.mdx @@ -122,8 +122,3 @@ export const SlackVerificationOTP = workflow( ``` npm run dev ``` - - -  If you're ready to start integrating in your .NET app, jump straight to - our [.NET quickstart.](/quickstarts/.NET) - diff --git a/recipes/workflows/translations.mdx b/recipes/workflows/translations.mdx index 5ea1247e..68a5b2b1 100644 --- a/recipes/workflows/translations.mdx +++ b/recipes/workflows/translations.mdx @@ -1,7 +1,7 @@ --- title: 'Translations' sidebarTitle: 'Translations' -description: 'Translate notification content to different languages using i18n' +description: 'Translate notification content to different languages using i18n.' --- Translations allow you to seamlessly adapt your notification workflows to different languages and automatically apply them based on your users locale. Translations enhance engagement, personalize the user experience, and enables you to expand your market reach. diff --git a/sdks/angular.mdx b/sdks/angular.mdx index 6ff50c08..5c972aed 100644 --- a/sdks/angular.mdx +++ b/sdks/angular.mdx @@ -10,11 +10,4 @@ icon: "angular" ```javascript npm install @novu/notification-center-angular -``` - - -  If you're ready to start integrating in your Angular app, jump straight to - our [Angular quickstart](/quickstarts/angular) - - -Learn more about usage of the [Angular Component in detail.](/notification-center/client/angular) +``` \ No newline at end of file diff --git a/sdks/client/headless/api-reference.mdx b/sdks/client/headless/api-reference.mdx new file mode 100644 index 00000000..20dc1f49 --- /dev/null +++ b/sdks/client/headless/api-reference.mdx @@ -0,0 +1,5 @@ +--- +title: "Headless SDK Reference" +icon: "js" +sidebarTitle: "Headless" +--- diff --git a/sdks/client/react-native/api-reference.mdx b/sdks/client/react-native/api-reference.mdx new file mode 100644 index 00000000..ee68d550 --- /dev/null +++ b/sdks/client/react-native/api-reference.mdx @@ -0,0 +1,5 @@ +--- +title: "React Native SDK Reference" +icon: "mobile" +sidebarTitle: "React Native" +--- diff --git a/sdks/client/react/api-reference.mdx b/sdks/client/react/api-reference.mdx new file mode 100644 index 00000000..272a77f8 --- /dev/null +++ b/sdks/client/react/api-reference.mdx @@ -0,0 +1,5 @@ +--- +title: "React SDK Reference" +icon: "react" +sidebarTitle: "React" +--- diff --git a/sdks/dotnet.mdx b/sdks/dotnet.mdx index 1ba3e1e4..7a133426 100644 --- a/sdks/dotnet.mdx +++ b/sdks/dotnet.mdx @@ -14,11 +14,6 @@ Novu's .NET SDK provides simple, yet comprehensive notification management, and dotnet add package Novu ``` - -  If you're ready to start integrating in your .NET app, jump straight to - our [.NET quickstart.](/quickstarts/.NET) - - ## Usage ```dotnet diff --git a/sdks/go.mdx b/sdks/go.mdx index d332ac82..09c45e77 100644 --- a/sdks/go.mdx +++ b/sdks/go.mdx @@ -19,11 +19,6 @@ Novu's Go SDK provides simple, yet comprehensive notification management, and de go get github.com/novuhq/go-novu ``` - -  If you're ready to start integrating in your Go app, jump straight to our [Go - quickstart.](/quickstarts/go) - - ## Usage ```go diff --git a/sdks/introduction.mdx b/sdks/introduction.mdx index 9cd65371..affc852d 100644 --- a/sdks/introduction.mdx +++ b/sdks/introduction.mdx @@ -16,38 +16,17 @@ description: "You can interface with Novu's API either over REST, or via librari The Client side libraries and components helps to add a fully functional notification center to your application. - - Embed a real-time notification center component in your Vue application. - - + Embed a real-time notification center component in your React application. Embed a real-time notification center component in your Angular application. - - Embed a real-time notification center component in your JavaScript - application. - - - Embed a real-time notification center inside an iframe using our embedded - script. - Embed a notification system into any framework or vanilla JavaScript project, without being constrained by our default UI or dependencies. @@ -102,7 +81,7 @@ The Server side libraries helps to trigger notifications and interact with all o } color="#dc2626" - href="/quickstarts/kotlin" + href="/sdks/kotlin" > Connect your Kotlin app to Novu via the Kotlin SDK. @@ -118,7 +97,7 @@ The Server side libraries helps to trigger notifications and interact with all o } color="#dc2626" - href="/quickstarts/ruby" + href="/sdks/ruby" > diff --git a/sdks/java.mdx b/sdks/java.mdx index f09f9449..8b484cb1 100644 --- a/sdks/java.mdx +++ b/sdks/java.mdx @@ -36,11 +36,6 @@ implementation 'co.novu:novu-java:{latest-version}' Sync your project, and you should have the artifacts downloaded. - -  If you're ready to start integrating in your Java app, jump straight to - our [Java quickstart.](/quickstarts/java) - - ## Usage ```java diff --git a/sdks/kotlin.mdx b/sdks/kotlin.mdx index 3087b3ed..2bad7bf3 100644 --- a/sdks/kotlin.mdx +++ b/sdks/kotlin.mdx @@ -37,11 +37,6 @@ implementation ("co.novu:novu-kotlin:{use-latest-version}") //Kotlin Sync your project, and you should have the artifacts downloaded. - -  If you're ready to start integrating in your Kotlin app, jump straight to - our [Kotlin quickstart.](/quickstarts/kotlin) - - ## Usage ```kotlin diff --git a/sdks/nodejs.mdx b/sdks/nodejs.mdx index 97baad9c..eb937286 100644 --- a/sdks/nodejs.mdx +++ b/sdks/nodejs.mdx @@ -14,11 +14,6 @@ Novu's Node.js SDK provides simple, yet comprehensive notification management, a npm install @novu/node ``` - -  If you're ready to start integrating in your Node.js app, jump straight to - our [Nodejs quickstart.](/quickstarts/nodejs) - - ## Usage ```javascript diff --git a/sdks/overview.mdx b/sdks/overview.mdx index 48002584..a1e7f2ca 100644 --- a/sdks/overview.mdx +++ b/sdks/overview.mdx @@ -5,19 +5,6 @@ description: "Learn more about Novu SDKs" ## Server-side SDKs -### Framework SDK - -The Framework SDK is a TypeScript library that allows you to build notification workflows and execute them in your own runtime environment. - - - - - - - - While triggering notifications is supported in all SDKs, creating and managing notification workflows is only supported in the Framework Typescript SDK. - - ### API SDKs Novu's server-side SDKs simplify the integration with Novu's REST APIs. @@ -44,6 +31,19 @@ Novu's server-side SDKs simplify the integration with Novu's REST APIs. +### Framework SDK + +The Framework SDK is a TypeScript library that allows you to build notification workflows and execute them in your own runtime environment. + + + + + + + + While triggering notifications is supported in all SDKs, creating and managing notification workflows is only supported in the Framework Typescript SDK. + + ## Web and Mobile SDKs Novu provides the following web client SDKs to enable integrations with Novu's prebuilt UI components, allowing you to easily add notification functionality to your applications without handling complex notification logic manually. diff --git a/sdks/php.mdx b/sdks/php.mdx index 682ccd48..4c951b1b 100644 --- a/sdks/php.mdx +++ b/sdks/php.mdx @@ -18,11 +18,6 @@ Novu's PHP SDK provides simple, yet comprehensive notification management, and d composer require unicodeveloper/novu ``` - -  If you're ready to start integrating in your PHP app, jump straight to - our [PHP quickstart.](/quickstarts/php) - - ## Usage ```php diff --git a/sdks/python.mdx b/sdks/python.mdx index 8f337521..22400cca 100644 --- a/sdks/python.mdx +++ b/sdks/python.mdx @@ -4,8 +4,6 @@ description: "Connect a Python application to Novu" icon: "python" --- - - This SDK is built and maintained by our community and might not be up to date with the latest Novu features. We are currently working on a new official SDK for Python. @@ -24,11 +22,6 @@ pip install novu poetry add novu ``` - -  If you're ready to start integrating in your Python app, jump straight to - our [Python quickstart.](/quickstarts/python) - - ## Usage ```python @@ -40,7 +33,7 @@ api_key = "" # You can sign up on https://dashboard.novu.co to get your API key from https://dashboard.novu.co/settings novu = EventApi(url, api_key).trigger( - name="digest-workflow-example", # This is the Workflow ID. It can be found on the workflow page. + name="digest-workflow-example", # This is the oorkflow ID. It can be found on the workflow page. recipients="", # The subscriber ID can be gotten from the dashboard. payload={}, # Your custom Novu payload goes here ) diff --git a/sdks/ruby.mdx b/sdks/ruby.mdx index 7b046e9b..7b702749 100644 --- a/sdks/ruby.mdx +++ b/sdks/ruby.mdx @@ -18,11 +18,6 @@ Novu's Ruby SDK provides simple, yet comprehensive notification management, and gem install novu ``` - -  If you're ready to start integrating in your Ruby app, jump straight to - our [Ruby quickstart.](/quickstarts/ruby) - - ## Usage ```ruby diff --git a/sdks/vue.mdx b/sdks/vue.mdx deleted file mode 100644 index 3835f91d..00000000 --- a/sdks/vue.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: "Vue library" -description: "Novu’s Vue library provides a Vue component wrapper over the Notification Center Web that you can use to integrate the notification center into your Vue application. " -icon: "vuejs" ---- - -[Explore the source code on GitHub](https://github.com/novuhq/novu/tree/next/packages/notification-center-vue) - -## Installation - -```javascript -npm install @novu/notification-center-vue -``` - - -  If you're ready to start integrating in your Vue app, jump straight to the - [Vue quickstart.](/quickstarts/vue) - - -Learn more about usage of the [Vue Component in detail.](/notification-center/client/vue) diff --git a/snippets/components.mdx b/snippets/components.mdx new file mode 100644 index 00000000..c017ed64 --- /dev/null +++ b/snippets/components.mdx @@ -0,0 +1,9 @@ +export const HeroCard = ({ img, title, description, href }) => { + return ( + + +

{title}

+

{description}

+ + ) +} \ No newline at end of file diff --git a/snippets/hooks/use-notifications-content.mdx b/snippets/hooks/use-notifications-content.mdx index bc3c2f1a..d7ea4cdf 100644 --- a/snippets/hooks/use-notifications-content.mdx +++ b/snippets/hooks/use-notifications-content.mdx @@ -11,7 +11,7 @@ Any action performed on a notification instance, like marking it as read, will o Workflow tags can be used to filter notifications, and organize them into different groups. Read more about how can you define [workflow - tags](/workflow/introduction#tags). + tags](/workflow/overview#tags). Filter notifications based on their read status. If not provided, all diff --git a/snippets/inbox/headless/api-reference/novu-params.mdx b/snippets/inbox/headless/api-reference/novu-params.mdx index abdd49e9..a9e730b3 100644 --- a/snippets/inbox/headless/api-reference/novu-params.mdx +++ b/snippets/inbox/headless/api-reference/novu-params.mdx @@ -13,7 +13,7 @@ `subscriberHash` is a unique identifier for the subscriber. It is used for HMAC encryption. Read more about [HMAC - Encryption](/react/advanced-configuration#hmac-encryption). + Encryption](/inbox/react/production#hmac-encryption). diff --git a/snippets/quickstart/deploy.mdx b/snippets/quickstart/deploy.mdx index 2a5bc2b9..c2e87de5 100644 --- a/snippets/quickstart/deploy.mdx +++ b/snippets/quickstart/deploy.mdx @@ -1,6 +1,6 @@ Once you have finished refining your first workflow, it’s time to sync your local changes to Novu Cloud. Novu recommends deploying your workflows similarly to how you will deploy the features that generate those notifications using your CI/CD pipeline or our CLI command. - Read more about [syncing your changes to the cloud](/deployment/production). + Read more about [syncing your changes to the cloud](/framework/deployment/production). diff --git a/snippets/quickstart/next-steps.mdx b/snippets/quickstart/next-steps.mdx index 6f1cca13..245741f8 100644 --- a/snippets/quickstart/next-steps.mdx +++ b/snippets/quickstart/next-steps.mdx @@ -1,7 +1,7 @@ ## Next Steps - + Learn how to build workflows with the Novu Framework. Learn more about the Novu Framework SDK - + Add the Inbox component to your application with our front-end SDK. - + Deploy your workflows to Development and Production diff --git a/snippets/quickstart/start-studio.mdx b/snippets/quickstart/start-studio.mdx index b1805134..c250bd6b 100644 --- a/snippets/quickstart/start-studio.mdx +++ b/snippets/quickstart/start-studio.mdx @@ -1,5 +1,5 @@ - The [Local Studio](/workflow/studio) is where you will build your notification workflows and craft the controls that will be + The [Local Studio](/framework/studio) is where you will build your notification workflows and craft the controls that will be exposed for your non-technical peers to maintain after your workflow is pushed to your Development or Production environments. @@ -17,6 +17,6 @@ The `dev` command is your go-to command whenever you want to build and preview your changes before syncing to cloud. By default, it will start a secure tunnel that our durable cloud workflow engine will - be able to communicate with, and the [Local Studio](/workflow/studio) web service listening on `http://localhost:2022` + be able to communicate with, and the [Local Studio](/framework/studio) web service listening on `http://localhost:2022` diff --git a/snippets/quickstart/test.mdx b/snippets/quickstart/test.mdx index 86dd8bfd..c5f3d083 100644 --- a/snippets/quickstart/test.mdx +++ b/snippets/quickstart/test.mdx @@ -1,5 +1,5 @@ - After your {framework} application is up and running, visit the [Local Studio](/workflow/studio) interface that was started on `http://localhost:2022` by running the `npx novu dev` command on the first step. + After your {framework} application is up and running, visit the [Local Studio](/framework/studio) interface that was started on `http://localhost:2022` by running the `npx novu dev` command on the first step. The onboarding guide will guide you to send the newly created sample workflow to your e-mail address. diff --git a/workflow/channel-steps.mdx b/workflow/channel-steps.mdx new file mode 100644 index 00000000..0effb65d --- /dev/null +++ b/workflow/channel-steps.mdx @@ -0,0 +1,46 @@ +--- +title: "Channel Steps" +--- + +A **channel step** within a workflow is the core building block for creating and delivering notifications to subscribers (End users). Each channel step is linked to a specific notification template and represents a notification to be sent through a single channel type (e.g., email, push, SMS, in-app, etc.). + +### Channel Step Execution + +When a channel step is executed, Novu performs the following actions: + +1. **Evaluates Step Conditions:** + Novu checks any conditions defined for the step to determine if it should be executed. This allows for dynamic notification workflows. + +2. **Verifies Subscriber's Information:** + Novu ensures the subscriber has the required information to receive notifications via this channel. + + For example: + - For email, the recipient must have a valid email address. + - For push notifications, the required channel data (device token) must be configured. + +3. **Checks Subscriber's Preferences:** + Novu respects the recipient's notification preferences, verifying whether they’ve opted out of receiving notifications from this channel or workflow. + +### Rendering and Delivering Notifications + +If the step is valid and all conditions are met, Novu renders the associated template for the step and queues the message for delivery. The message is then sent to the selected provider using the credentials configured for the channel. + +### Available Channels + + + + The most reliable way to reach users directly in their inbox for newsletters, updates, and transactional communications + + + Deliver notifications directly within your app or website, keeping users informed while they interact with your product + + + Instant alerts sent to users' mobile or desktop devices, even when they’re not actively using your app + + + Quick and direct text messages to users’ phones for urgent alerts, confirmations, or updates + + + Real-time messages delivered through popular chat platforms and messaging apps + + \ No newline at end of file diff --git a/workflow/content.mdx b/workflow/content/content-basics.mdx similarity index 97% rename from workflow/content.mdx rename to workflow/content/content-basics.mdx index 2bf0a2e1..727b82d6 100644 --- a/workflow/content.mdx +++ b/workflow/content/content-basics.mdx @@ -1,6 +1,6 @@ --- -title: "Manage notification workflow content" -sidebarTitle: "Manage Content" +title: "Content Basics" +sidebarTitle: "Content Basics" description: "Learn how to manage your notification workflow and allow no-code users to modify it." --- diff --git a/workflow/content/editor.mdx b/workflow/content/editor.mdx new file mode 100644 index 00000000..e69de29b diff --git a/workflow/content/handlebars-and-helpers.mdx b/workflow/content/handlebars-and-helpers.mdx new file mode 100644 index 00000000..e69de29b diff --git a/workflow/content/variables.mdx b/workflow/content/variables.mdx new file mode 100644 index 00000000..e69de29b diff --git a/workflow/custom.mdx b/workflow/custom.mdx index 41a585ee..8d347d1f 100644 --- a/workflow/custom.mdx +++ b/workflow/custom.mdx @@ -1,94 +1,22 @@ --- -title: "Custom Action Step" -sidebarTitle: "Custom Step" -description: "Used to execute any custom code as a step in the workflow." +title: "Custom action step" +sidebarTitle: "Custom action" +description: "The Custom action step in Novu enables dynamic workflows with custom logic, state management, and API or database integration." --- -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. + The **Custom** action step is currently available only when using the [**Novu Framework**](/framework/overview) for code-based Novu Framework workflows. -## Common usecases +The **Custom** action step empowers you to execute custom logic and maintain its state within the durable execution context of a workflow. This step's output can seamlessly feed into subsequent steps of the **Workflow**, enabling powerful and dynamic workflows tailored to your needs. -- 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 +Common Use Cases: -## Custom Step Interface +- **API Integrations**: Make API calls to third-party services for data retrieval, updates, or triggering external actions. +- **Database Queries**: Fetch data from a database to dynamically adapt subsequent steps in your workflow. +- **Data Transformation**: Execute custom logic to process, manipulate, or enhance data before passing it forward. +- **Custom Provider Implementation**: Build and integrate custom providers to extend functionality as needed. +- **Subscriber Tagging**: Add **Tags** to **Subscribers** (users) at specific workflow steps. + - Examples of **Tags**: + - Tag users with the **workflow** and **step** they are on to create **segments, topics** or target specific groups later. + - Use tags to trigger **In-App** notification as part of the user **workflow** journey. For example, tag users at a key step, then set up an **in-app** notification targeting everyone with that **Tag**. -```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](/sdks/framework/typescript/steps/custom). \ No newline at end of file +With **Custom Action**, you can craft highly personalized and intelligent **workflows**, ensuring flexibility and precision in your notification journey **workflows**. \ No newline at end of file diff --git a/workflow/delay.mdx b/workflow/delay.mdx index 34b0dd47..e93d69b0 100644 --- a/workflow/delay.mdx +++ b/workflow/delay.mdx @@ -1,6 +1,6 @@ --- title: "Delay Action Step" -sidebarTitle: "Delay" +sidebarTitle: "Delay Action" --- The delay action awaits a specified amount of time before moving on to trigger the following steps of the workflow. @@ -16,58 +16,5 @@ The delay action awaits a specified amount of time before moving on to trigger t 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. - - -Here, we are delaying the execution of the next step by 1 day and skipping the delay step if the `isCriticalMessage` function returns `true`. -```typescript -await step.delay( - "delay", - () => { - return { - type: "regular" - unit: "days", - amount: 1, - }; - }, - { - skip: () => isCriticalMessage(), - } -); -``` - - -Here, we are delaying the execution of the in-app step by 30 minutes and sending the in-app notification only if the subscriber has `goalReminderInAppAllowed` set to `true` for subscriber. If during 30 minutes delay window, subscriber sets `goalReminderInAppAllowed` to `false`, the in-app step will be skipped. -```typescript -export const goalReminderInAppAfterDelay = workflow( - "goal-reminder-in-app-after-delay", - async ({ step, subscriber }) => { - await step.delay("delay-step", async () => { - return { - type: "regular", - amount: 30, - unit: "minutes", - }; - }); - await step.inApp( - "in-app-step", - async () => { - return { - subject: `Don’t Forget Your Fitness Goals Today!`, - body: `Hey ${subscriber.firstName}, it's been a while since you logged your - last activity. Keep up the momentum and complete your workout to stay on - track with your goals!`, - }; - }, - { - skip: () => (subscriber as any).data?.goalReminderInAppAllowed === false, - } - ); - } -); -``` - - -Changing the step content after triggering the workflow with delay step will not affect the existing pending delayed notification content. - -To read more about the full list of parameters, check out the [full SDK reference](/sdks/framework/typescript/steps/delay). \ No newline at end of file +Changing the step content after triggering the workflow with delay step will not affect the existing pending delayed notification content. \ No newline at end of file diff --git a/workflow/digest.mdx b/workflow/digest.mdx index eb8c4100..d7e6bd7b 100644 --- a/workflow/digest.mdx +++ b/workflow/digest.mdx @@ -1,137 +1,75 @@ --- -title: "Collect multiple events to a single message with the Digest Engine" -sidebarTitle: "Digest Engine" +title: "Collect Multiple Events to a Single Message with the Digest Engine" +sidebarTitle: "Digest action" --- -The digest engine collects multiple trigger events, aggregates them into a single message and delivers it to the subscriber. -This becomes useful when a user needs to be notified on a large amount of triggers and you want to avoid sending too many notifications. Novu will automatically batch the incoming trigger events based on the `subscriberId` and an **optional** `digestKey` that can be added to control the digest logic of the events. +The digest engine collects multiple trigger events, aggregates them into a single message, and delivers that new payload to the next workflow step. +This becomes useful when a user would otherwise receive a large number of notifications, and you want to avoid over-notifying. When you use a Digest action step, Novu automatically batches the incoming trigger events based on the `subscriberId` and an **optional** `digestKey` that can be added to control the digest logic of the events. -## Digest Step +## Digest action step After adding a digest step to a workflow, each node that will be below the digest node will be only triggered once in the specified digest interval. You can decide to send messages before adding a digest node and they will be triggered in real-time. - - - +![Digest Engine](/workflow/media-assets/digest-engine.png) -In the image above, there are two nodes (`Email` and `SMS`) after the digest node and one node (`In-App`) before the digest node in the workflow. +## Digest configuration -For this workflow, if we trigger 10 events within the digest interval, the `In-App` step will be executed 10 times, and `Email` and `SMS` will be executed only 1 time with digested events data. +### Digest key -To read more about the full list of parameters, check out the [full SDK reference](/sdks/framework/typescript/steps/digest). +If specified, the digest engine will group the events based on the `digestKey` and `subscriberId`, otherwise the digest engine will group the events based only on the subscriberId. -## Digest Configuration +The digest key might come useful when you want a particular subscriber to get events grouped on a custom field. For example when an actor likes the user's post, you might want to digest based on the `post_id` key. -### Digest Key - -If specified, the digest engine will group the events based on the `digestKey` and `subscriberId`, otherwise the digest engine will group the events based only on the subscriberId. - -The digest key might come useful when you want a particular subscriber to get events grouped on a custom field. For example when an actor likes the user's post, you might want to digest based on the `post_id` key. - -### Time Interval +### Time interval The time interval determines how long the digest engine will wait before sending the message once created. You can specify the amount and the unit that best suits your needs. Here, in the image below, `5` is the interval amount, and `mins` is the interval unit. Interval units can be `sec(s)`, `min(s)`, `hour(s)`, or `day(s)`. -## Digest Strategy Types +## Digest strategy types The strategy which Novu should use to handle the digest step. More details on available strategies below. Novu allows you to define different digest strategies depending on the actual use-case you are trying to achieve. At this point we allow you to select from 2 strategies: -- Regular Strategy -- Look-Back Strategy +- Regular +- Look-back +- Scheduled Let's explore them in detail: -### Regular Strategy +### Regular strategy In regular strategy, a digest will always be created for the specified window time. Which means that from the first event trigger, if no active digest exists for this subscriber, one will be created and the user will receive the message only when the digest window time is reached. -### Look-Back Strategy +### Look-back strategy In the Look-Back strategy, before creating a digest, Novu will check if a message was sent to the user in the Look-back period. If a message was sent, a digest will be created. Otherwise, a message will be sent directly to the user and the digest creation will be skipped. -Lookback digest has two intervals, `digest interval` and `lookback window`. First, it checks if any event is triggered within the past lookback window, only then a digest is created for the digest interval. If not, the event is considered non-digest and workflow execution continues to the next step. +Look-back digest has two intervals, `digest interval` and `look-back window`. First, it checks if any event is triggered within the past look-back window, only then a digest is created for the digest interval. If not, the event is considered non-digest and workflow execution continues to the next step. -**Example:** +#### Example -Let's set the digest interval as 20 minutes and the lookback interval as 15 minutes. +Let's set the digest interval as 20 minutes and the look-back interval as 15 minutes. -If we trigger the first event. Since it is the first event and there was no event triggered in the past 15 minutes (lookback interval), this event will send a message immediately (without digest). +If we trigger the first event. Since it is the first event and there was no event triggered in the past 15 minutes (look-back interval), this event will send a message immediately (without digest). Now, if we trigger a second event within 15 minutes range, then a new digest will be created with this second event. From now on, for the next 20 minutes (digest interval), all triggers will be digested, and after 20 minutes, the workflow will carry forward to the next step with digested events as a payload. -### Scheduled Digest - -**Minutes** - -It digests events for every specified minutes. For example, as per the image below, events will be digested for 20 minutes and after 20 minutes, workflow will carry forward to the next step. It will be repeated after every 20 minutes. - -**Hour** - -It digests events for given hours. After given hours, a new digest is created. - -**Daily** - -It digests events for specified days till given time. After those days and time, a new digest is created and events are digested in this new digest. - -**Weekly** - -It digests events for specified weekdays. Only at the specified time, the workflow continues to the next step after the digest step. A new digest is created and events are digested in this new digest till these weeks and time. - -## Defining a digest step +### Scheduled digest -```tsx -const digestResult = await step.digest("digest", async () => { - return { - unit: "days", // 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' - amount: 3, // the number of units to digest events for - }; -}); -``` - -## Writing digest content - -In many cases, you will need to access all the digested events payload in order to show the user all or parts of the events included in this digest. For example: **"John and 5 others liked your photo."** - -The digest function returns an array of triggers that have been digested. -You can use this array to perform any necessary actions on the digested triggers. Like Sending and email, or updating a database. - -```tsx -const { events } = await step.digest("digest-3-days", async () => { - return { - unit: "days", // 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' - amount: 3, // the number of units to digest events for - }; -}); - -await step.email("send-email", async () => { - const eventCount = events.length; - - return { - subject: "Digest Email", - body: `You have ${eventCount} new events`, - }; -}); -``` - -Step Controls: At the moment, it is not possible to use digest information in step controls. You can only use it from the code, by creating a custom component for handling digested data.. - - -The digest step returns an object with `events` array. Each event in the array has the following properties: +All digest times are in UTC time -- `id` - The `job id` of the digested event -- `time` - The time when the event was triggered -- `payload` - The original payload passed to the event +Digest incoming events for the specified time. Once that time threshold since the first event has passed, proceed to the next workflow step. -Changing the step content after triggering the workflow with digest step will not affect the existing digested events. +Available timeframes: +- Minutes +- Hours +- Daily +- Weekly ## Frequently Asked Questions -All digest times are in UTC time - If scheduled digest is sent for 9:00 daily, then novu will collect all events triggered between 9:00 AM today till 9:00 AM tomorrow and send the digest at 9:00 AM tomorrow. This process is repeated daily. If there is no any event triggered between 9:00 AM today and 9:00 AM tomorrow, then no digest will be sent. diff --git a/workflow/how-to/build-a-workflow.mdx b/workflow/how-to/build-a-workflow.mdx new file mode 100644 index 00000000..267db5be --- /dev/null +++ b/workflow/how-to/build-a-workflow.mdx @@ -0,0 +1,93 @@ +--- +title: "Build a Workflow" +sidebarTitle: "Build a workflow" +description: "Learn how to build a Novu Workflow" +--- + + + + This is where you can find and manage your existing workflows. + + + This will open the initial workflow creation screen. + Here you define: + - Name of the workflow + - This is also referred to as the workflow `Identifier` + - Tags (optional) + - Description of the workflow (optional) + + Once you've filled in the required fields, click on the **"Create Workflow"** button. + + + This is where you can start adding steps to your workflow. **The first step will always be the **"Workflow Trigger"**. + + You can add the following steps by clicking on the **"Add Step"** (+) button: + + **Channels** + - Email + - In-app + - Push + - Web push + - Mobile push + - Chat + - Enterprise messaging platforms (e.g. Slack, Microsoft Teams, etc.) + - Consumer messaging tools (e.g. WhatsApp, Telegram, Discord, etc.) + - SMS + + If a channel step you've added is not configured in your Novu account, you'll see an Error. + + + **Actions** + - Digest + - Delay + - Custom (Coming soon, currently only available in the [Novu Framework](/framework/custom)) + + + Each step in the workflow requires a template that defines the notification or message content and payload. The editor enables you to preview the rendered output of your content. + + **Content creation and templates** + + - Each channel step has its own template configuration options, tailored to the limitations and requirements of the specific channel. + - The editor provides a live preview to show how the final message will appear. + - You can use system variables for personalization, including: + - Subscriber variables: firstName, lastName, email, phone, avatar. + - Actor variables: for details about the event initiator. + - Step variables: for data specific to the workflow execution. + - Brand variables: for aligning with your organization's visual identity. + - Tenant variables: for organization-specific data. + +**Dynamic content** + + - Inject dynamic data into your templates using payload variables. + - These variables can be utilized in message content, subjects, and sender names for enhanced personalization. + +**Important:** When using dynamic content with payload variables, ensure that the required payload is passed when triggering the workflow. + + Once you’ve finished configuring your template, don’t forget to click the `Save step` button to apply your changes. + + + + + There are three main ways to trigger a workflow: + + - **Via the Novu Dashboard** + This method is ideal for conducting quick tests directly from the Dashboard. It’s a simple and convenient way to verify basic functionality. + + - **Using the trigger code snippet** + Copy the code snippet and execute it in your local environment or an online sandbox. This approach allows for more thorough testing, enabling you to integrate the trigger with your application logic and live data for a realistic evaluation. + + - **Integrating the trigger in your application** + Once all tests are complete, you can implement the trigger method directly in your application. This allows you to test the workflow in a real-world scenario, ensuring it functions seamlessly with your app's actual environment and users. + + +Novu operates in a multi environment setup, with the currently available environments: + +- **Development**: Acts as a staging and test environment, where your non-technical peers can view and modify controls. +- **Production**: For triggering workflows to your customers. + +After you've tested your workflow in the **Development** environment, you can promote it to **Production**. + +[Learn more about promoting workflows to production](/framework/deployment/production) + + + diff --git a/workflow/media-assets/digest-engine.png b/workflow/media-assets/digest-engine.png new file mode 100644 index 00000000..e3fc9af1 Binary files /dev/null and b/workflow/media-assets/digest-engine.png differ diff --git a/workflow/media-assets/how-it-works.png b/workflow/media-assets/how-it-works.png new file mode 100644 index 00000000..cba34ef0 Binary files /dev/null and b/workflow/media-assets/how-it-works.png differ diff --git a/workflow/media-assets/workflow-editor.png b/workflow/media-assets/workflow-editor.png new file mode 100644 index 00000000..232e1dd4 Binary files /dev/null and b/workflow/media-assets/workflow-editor.png differ diff --git a/workflow/overview.mdx b/workflow/overview.mdx new file mode 100644 index 00000000..61883afc --- /dev/null +++ b/workflow/overview.mdx @@ -0,0 +1,60 @@ +--- +title: "Workflow Editor Overview" +sidebarTitle: "Overview" +description: "The workflow Editor combines no-code simplicity and code-based flexibility, enabling users to design and manage advanced notification workflows tailored to their needs." +--- + +The workflow Editor is a robust visual tool that empowers both no-code users and developers to design advanced notification workflows. +It seamlessly combines the intuitive simplicity of no-code building blocks with the adaptability and precision of code-based customization. +### What is a workflow? + +A workflow in Novu is a container for all notification/message logic and templates within your system. + +Each workflow: + +- Has a unique identifier (key) +- Executes for one subscriber at a time (e.g. end user, recipient, customer, etc.) +- Contains complete notification/message logic and templates +- Supports subscriber preference management +- Can be triggered via API calls, events, or scheduled operations + + +Learn what workflows are and how they work in Novu + + +## Different types of Novu Workflows + +### Visual workflow editor (No-Code) + +**Best suited for:** + +- Straightforward use cases without complex logic +- Building emails using Novu's Email WYSIWYG Editor +- Modifying existing workflows +- Quick prototyping, testing, and iteration +- Collaboration with non-technical stakeholders + +### Framework SDK (Code-Based) + +**Best suited for:** + +- Complex workflow logic implementation +- External API integration +- Custom data transformation +- Advanced routing rules +- Type safe workflow payloads +- Specialized business logic +- Complex conditional branches +- Custom email templates (React Email, Vue Email, MJML etc.) +- Workflow versioning + +[Learn more about Novu Framework](/framework/overview) + +### Hybrid (Coming Soon) + + +This feature is currently in development and not available to all users. +If you'd like to join the waitlist, please [contact us](https://novu.co/contact-us-docs/?utm_campaign=docs-hybrid-workflow-waitlist) + + +Getting the best of both worlds, with the flexibility to use no-code for quick prototyping and then transition to code-based for more complex use cases. \ No newline at end of file diff --git a/workflow/step-conditions.mdx b/workflow/step-conditions.mdx new file mode 100644 index 00000000..1b4ad095 --- /dev/null +++ b/workflow/step-conditions.mdx @@ -0,0 +1,46 @@ +--- +title: "Step Conditions (Coming Soon)" +sidebarTitle: "Step Conditions" +description: "Step Conditions in Novu enable personalized and dynamic workflows by customizing steps based on subscriber data, topics, or behavior, with flexibility across step, channel, and preference levels." +--- + +**Step Conditions** allow you to customize a **Subscriber's** workflow journey using their **Data**, **Topics**, or prior behavior. + +For instance, if a **Subscriber** doesn’t **See** or **Read** an **In-App Notification Step** within a specific time (e.g., X minutes), you can automatically trigger a **Mobile Push Notification Step** to engage them through another channel. These features enable more sophisticated, personalized notification workflows, boosting engagement and communication. + +### Levels of conditions + +You can apply conditions at three levels: + +1. **Step-Level Conditions** + + Define whether an individual step within a workflow should execute during a workflow run. + + Example: Send an email only if the preceding in-app notification hasn’t been seen or read. + +2. **Channel-level conditions** + + Control execution of steps using a specific channel across all workflow runs. + + Example: Trigger SendGrid email channel steps only in the production environment. + + +3. **Preference-level conditions** + + Manage notification preferences available during a workflow run. + + Example: Allow recipients to mute notifications for specific product resources. + +--- + +### Condition types + +Novu's shared conditions model supports the following types: + +- **Data** — Evaluates workflow trigger data payload properties. +- **Subscriber** — Evaluates properties of the workflow subscriber. +- **Actor** — Evaluates properties of the workflow Actor. +- **Environment Variable** — Evaluates custom environment variables. +- **Workflow** — Evaluates properties of the current workflow. +- **Workflow run state** — Evaluates runtime properties of the workflow. +- **Tenant** — Evaluates properties of the associated tenant. \ No newline at end of file diff --git a/workflow/tags.mdx b/workflow/tags.mdx new file mode 100644 index 00000000..8387ca35 --- /dev/null +++ b/workflow/tags.mdx @@ -0,0 +1,40 @@ +--- +title: "Tags: Organizing Your Notifications" +sidebarTitle: "Tags" +description: "Learn how to use tags to personalize notifications in Novu" +--- + +**Tags** act like labels or categories that help you organize and manage notifications in your app. By grouping notifications under specific tags, you can better control how they’re filtered, displayed, or managed by both your app and your users. + +For example, you might want to group all security-related notifications together, separate from updates about account activity or promotional offers. + +## Why Use Tags? + +- **Filtering Notifications**: Tags make it easy to filter and display notifications based on categories. +For instance, you can create a UI that allows users to view only security or promotional notifications. +- **[Preference Management](/inbox/react/components/preferences)**: With tags, users can manage their notification preferences by category, choosing to enable or mute specific types of notifications. + +Think of it as organizing emails into folders—tags help keep things tidy and manageable for both you and your users. + + +## How to Add Tags to Notifications + + + + Navigate to the **"Workflows"** tab + + + Create a new workflow or edit an existing workflow + + + One of the fields in the workflow is the **Tags** field. You can add one or more (max. 16) tags to a notification + + + +## Best Practices for Using Tags + +- **Define Categories Early**: Identify key notification categories for your app, such as security, promotions, or updates. +- **Consistent Naming**: Use clear and consistent tag names to avoid confusion (e.g., prefer security over sec_alert). +- **Keep It Manageable**: Avoid overloading with too many tags. Focus on meaningful groupings that provide real value. + +Tags are a powerful way to streamline your notification system, helping users stay organized and informed while giving you greater control over your app’s notification behavior. \ No newline at end of file diff --git a/workflow/template-editor.mdx b/workflow/template-editor.mdx new file mode 100644 index 00000000..dae5d888 --- /dev/null +++ b/workflow/template-editor.mdx @@ -0,0 +1,200 @@ +--- +title: "Template Editor" +description: "Learn how to use the Novu notification template editor to design notifications" +--- + +Each channel step in a Novu workflow comes with its own notification template. This template defines how notifications appear for a specific channel. + +Quality templates are used to create personalized, visually appealing, and effective notifications. + +- **Injecting variables from your trigger data into your notification template.** +- **Using Liquid syntax for logic and control flow within templates.** +- **Previewing and testing your notification templates.** + +## Personalizing Notifications with Template Variables + +To insert a variable into your Novu notification template, use double curly braces: `{{ variable_name }}`. + +Novu templates allow you to reference several types of variables: + +### Data payload variables +These variables originate from the data payload in your workflow trigger. +For example, if you include `{ "order_id": "12345" }` in your payload, you can reference it in your template as `{{ payload.order_id }}`. + +### User properties +You can access user properties (like `firstName` or custom subscriber properties) using `{{ subscriber.* }}`. For instance: + +```liquid +Hi {{ subscriber.firstName }}, + +You’ve been upgraded to the {{ subscriber.data.plan }} plan. + +Thanks, +The Novu Team +``` + +## 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.` + + + Learn more about 40+ filters supported by LiquidJS + + +## Previewing and testing notification templates + +When your notification template is ready, use the **Preview** mode to visualize how your notification will look. You can: + +- **Test dynamic payload data:** Provide sample data to see how your template renders with different values. +- **Send test notifications:** Save your template, return to the workflow canvas, and run a test with real trigger data.