-
-## Viewing a specific subscriber's activity
-
-To use a subscriber's activity feed you can filter the feed by using the subscriberId or email. This will show only the relevant data for this particular subscriber.
-
-To do this, just enter the `subscriberId` or the 'email' of the subscriber you want to get info of and then click the 'search' button on the right-hand side as shown in the image below:
-
-
-
-## Filter by workflow or channel
-
-The activity feed allows you to filter messages based on the associated workflow or channel. This is helpful when you want to assess or debug a particular workflow and its behaviour.
-
-Filtering by workflow or channel is quite simple. Just go to the Workflow dropdown (if you want to filter by workflow) or the channel tab (if you want to filter by channel) and select the corresponding workflow or channel and click the 'search' button on the right-hand side as shown in the image below:
-
-
-
-## Troubleshooting with the activity feed
-
-The activity feed also shows if a transaction is failing. You can see why a transaction is failing and rectify it. For example, take a look at the following image:
-
-You can see that an SMS notification has failed to get delivered. Clicking on it opens the execution details and the reason why that transaction failed
-
-
-This can help troubleshoot the problem and comes in handy at the time of distress.
-
-## Digest info in the activity feed
-
-If you’re using our digest notifications functionality, you’ll be able to see all the digest-related information in the activity feed.
-
-Some of the information related to digest present in the activity feed is:
-
-- Digest step delay
-- Digesting start time
-- Digest triggered events details
-- More digest execution details
-
-
-
-From here, you can see the details of ‘digest triggered events’ to see exactly which events were digested and the content of the notification you sent, as shown below:
-
-
-
-## Trigger Event Lifecycle
-
-### **Trigger request**
-
-The request contains details such as the identifier for the template, the list of subscribers who will receive the notification, the payload of the notification, and any overrides that need to be applied.
-
-### Trigger endpoint
-
-After the request is sent to the `/event/trigger` endpoint, the initial step involves mapping and validating the subscribers for that event. Following that, we validate the template and steps based on the active status or draft template flag.
-
-Once the validation process is complete, the attachments are uploaded to the storage service.
-
-Next, the trigger event with mapped subscribers and attachment links is appended to the **trigger event queue**. By queuing the events, we can achieve faster response times.
-
-### **Trigger event processing**
-
-When the event is picked up by the **trigger queue worker** we process it. For every subscriber listed in the trigger event, we create a notification entity and the corresponding jobs based on the notification template steps. The notification contains data related to the organization, template, subscriber, and event payload. It is updated with a channels field that is generated from the steps.
-
-### **Jobs**
-
-Every job is created according to the steps outlined in the template. If the template contains a digest step, the **filtering logic** is applied to produce the appropriate jobs array depending on the type of digesting: **regular** or **backoff**.
\ No newline at end of file
diff --git a/activity-feed/trigger-event-lifecycle.mdx b/activity-feed/trigger-event-lifecycle.mdx
deleted file mode 100644
index 4675a2dc..00000000
--- a/activity-feed/trigger-event-lifecycle.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: 'Trigger Event Lifecycle'
-description: 'Managing Trigger Events from Request to Processing'
-icon: 'arrows-spin'
----
-
-## Trigger Request
-
-A trigger request is the initial step in handling a trigger event. It contains crucial details such as the template identifier, a list of subscribers who will receive the notification, the payload of the notification, and any overrides that need to be applied.
-
-## Trigger Endpoint
-
-Upon sending the request to the `/event/trigger` endpoint, a series of essential steps are initiated:
-
-1. **Subscriber Mapping and Validation:** The first step involves mapping and validating the subscribers for the specified event. This ensures that notifications are sent to the correct recipients.
-
-2. **Template Validation:** Following subscriber validation, the template associated with the event is validated. This validation process considers factors such as the active status or draft template flag to determine if it meets the necessary criteria for processing.
-
-3. **Attachment Upload:** Once the validation process is successfully completed, any attachments associated with the event are uploaded to the designated storage service.
-
-4. **Event Queuing:** The trigger event, now enriched with mapped subscribers and attachment links, is appended to the **trigger event queue**. This queuing mechanism optimizes response times, ensuring efficient event processing.
-
-## Trigger Event Processing
-
-When an event is picked up by the **trigger queue worker**, the processing phase begins. Here's what happens:
-
-- **Notification Entity Creation:** For each subscriber listed in the trigger event, a corresponding notification entity is created. This entity contains essential data related to the organization, template, subscriber, and event payload.
-
-- **Job Creation:** Based on the notification template's defined steps, jobs are generated. These jobs are responsible for carrying out specific tasks related to the event notification. Additionally, the notification entity is updated with a "channels" field generated from these steps, indicating the communication channels through which notifications will be sent.
-
-## Jobs
-
-Jobs play a pivotal role in the trigger event lifecycle. They are created based on the steps outlined in the notification template. Depending on the presence of a digest step, the following logic is applied:
-
-- **Digest Step:** If the template includes a digest step, filtering logic is applied to produce an appropriate array of jobs. This logic differentiates between two types of digesting: **regular** and **backoff**, each serving distinct purposes in event processing.
-
-## Job Statuses
-
-
-| Status | Description |
-|-------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **PENDING** | This status is assigned to a job before it is added to the worker queue. It indicates that the job is waiting to be processed. |
-| **QUEUED** | After the initial validation and just before adding a job to the worker queue, it is set to `QUEUED`. This status signifies that the job is ready for processing but is awaiting its turn in the queue. |
-| **RUNNING** | When a job is picked up by a worker from the queue, its status is changed to `RUNNING`. This indicates that the job is currently being processed by a worker. |
-| **COMPLETED** | Once a job has been successfully executed and processed, its status is changed to `COMPLETED`. This signifies that the job has been successfully completed. |
-| **FAILED** | If a job encounters an issue during processing or execution, its status is changed to `FAILED`. This indicates that the job has not been successfully completed, and there may have been errors or problems during processing. |
-| **DELAYED** | The `DELAYED` status is applied to specific types of jobs, such as `digest` or `delay` jobs, to indicate that they are delayed and not immediately processed. For `digest` jobs, it means that the digesting process is running or scheduled for a later time. For `delay` jobs, it signifies that the job is set to be executed at a specified delay time. |
-| **CANCELED** | When a job is canceled for any reason, its status is set to `CANCELED`. This indicates that the job will not be processed further and is effectively removed from the processing queue. |
-| **MERGED** | The `MERGED` status is assigned to events that are part of a `digest`. It indicates that an event will be merged into the digesting event. In a digesting process, there is typically a primary or initial event that serves as the digesting event, and subsequent events are merged into it. Instead of having a separate `COMPLETED` status for these merged events, they are marked as `MERGED` to indicate their specific role in the digesting process. |
-| **SKIPPED** | The `SKIPPED` status is used in the context of backoff versions of digesting. In this scenario, the first event's digesting is skipped, and the second event takes on the digesting role. The `SKIPPED` status is applied to the first event's digesting, indicating that it was intentionally skipped in the digesting process. Subsequent events may be merged into the second event's digesting process, as explained with the `MERGED` status. The `SKIPPED` status helps differentiate the skipped event from others in the digesting sequence. |
-
-**Example:**
-Layout Start
{{{body}}}Layout End
", - description: "Organisation's first layout", - name: "First Layout", - identifier: "firstlayout", - variables: [ - { - type: "String", - name: "body" - required: true - defValue: "" - } - ] - isDefault: "false" +content: "Layout Start
{{{body}}}Layout End
", +description: "Organisation's first layout", +name: "First Layout", +identifier: "firstlayout", +variables: [ +{ +type: "String", +name: "body" +required: true +defValue: "" +} +] +isDefault: "false" } await novu.layouts.create(payload); -``` + +```` ```ruby Ruby require 'novu' @@ -42,7 +43,7 @@ payload = { 'isDefault' => true # optional } client.create_layout(payload) -``` +```` ```python Python from novu.api import LayoutApi @@ -73,10 +74,10 @@ public class Main { ```json Response { - "data": { + "data": { "_id": "Layout identifier" } } ``` - \ No newline at end of file + diff --git a/api-reference/layouts/set-default-layout.mdx b/api-reference/layouts/set-default-layout.mdx index acd04b0c..8a1ed8cd 100644 --- a/api-reference/layouts/set-default-layout.mdx +++ b/api-reference/layouts/set-default-layout.mdx @@ -13,14 +13,15 @@ import { Novu } from '@novu/node'; const novu = new Novu('Layout Start
{{{body}}}Layout End
", - description: "Organisation's first layout", - name: "First Layout", - identifier: "firstlayout", - variables: [ - { - type: "String", - name: "body" - required: true - defValue: "" - } - ] - isDefault: false +content: "Layout Start
{{{body}}}Layout End
", +description: "Organisation's first layout", +name: "First Layout", +identifier: "firstlayout", +variables: [ +{ +type: "String", +name: "body" +required: true +defValue: "" +} +] +isDefault: false } await novu.layouts.update("layoutId", payloadToUpdate); -``` + +```` ```ruby Ruby require 'novu' @@ -42,7 +43,7 @@ payload = { 'variables' => ['
-
-## Novu SMS Provider
-And this is what the default Novu SMS provider looks like:
-
-
-
-
-
-It is the only provider for the in-app channel and it *can be used in production apps*. Unlike sms and email, it is not active by default and needs to be turned on separately. It can be scaled as per your need and it is a 'pay as you go' offering. You can check [this](https://novu.co/pricing/?utm_campaign=docs-default-providers) for more details.
-
-
-## Limits of the Novu Providers
-Following are the limits for our email and sms providers:
-
-1. Email: 300 emails per organization per month
-2. SMS: 20 messages per organization per month
-
-To send more than these limits, you can configure a different provider for a specific channel. Read more about them [here](/channels-and-providers/integration-store).
diff --git a/channels-and-providers/integration-store.mdx b/channels-and-providers/integration-store.mdx
deleted file mode 100644
index 37421bef..00000000
--- a/channels-and-providers/integration-store.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: 'Integration Store'
-description: "Learn about Novu's integration store"
-icon: 'store'
----
-
-## Introduction
-Novu's integration store serves as the central hub from where you can seamlessly enable and disable various services for efficient communication.
-
-This feature simplifies the process of managing your communication channels. You can see which provider is enabled/disabled for what channel, which provider works in what environment and more. Moreover, it provides a clear overview of enabled and disabled services, offering you greater control over your communication strategy.
-
-
-
-From this image above, you can see that I've configured `Sendgrid` and `Twilio` as my email and sms provider respectively and both are in the `development` environment.
-
-## Streamline Communication Services
-
-With the Integration Store, you can streamline your communication services effortlessly. Whether it's Email, Chat, or SMS, this feature allows you to integrate different communication channels with ease. This centralization ensures that you can manage all your services conveniently from a single location.
-
-## Enabling and Disabling Services
-
-The Integration Store allows you to activate or deactivate specific services according to your communication needs. You can enable a service by simply entering the required `API key`, `identifier` and other required info depending on the provider you're choosing. Conversely, if you need to deactivate a service temporarily or make changes, you can disable it just as effortlessly.
-
-## Enhanced Flexibility
-
-By providing a comprehensive range of communication services under one roof, the Integration Store enhances your flexibility. You have the power to customize your communication strategy by enabling the services that align with your requirements.
-
-## Conclusion
-
-Novu's integration store offers a centralized and user-friendly platform for managing your communication services effectively. With its categorization, clear visibility, and easy enablement/disabling of services, you can fine-tune your communication strategy and streamline your interactions, enhancing the overall communication experience of your product.
\ No newline at end of file
diff --git a/channels-and-providers/introduction.mdx b/channels-and-providers/introduction.mdx
deleted file mode 100644
index 782abc89..00000000
--- a/channels-and-providers/introduction.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: 'Overview'
-description: 'Learn about what channels, providers and oganizations are'
-icon: 'code'
----
-
-## Channels:
-
-Novu lets you send notifications across different communication mediums, including emails, in-app messages, push notifications, SMS, and chat. Each of these five communication mediums is referred to as a notification ‘channel’.
-
-
-
-## Providers:
-
-Providers are what allow us to handle message delivery over multiple channels. Of the five notification channels that Novu currently supports, each channel except the ‘in-app’ channel has multiple providers.
-
-The in-app channel only has one provider (the default Novu provider).
-
-All the remaining channels have multiple providers.
-
-## Organizations:
-Organizations enable you to segregate notifications across multiple products that you may have. You can use Novu to send notifications across multiple apps and can create organizations.
-
-
-
-
+
+
+ {" "}
+
- `IS_MULTI_TENANCY_ENABLED` adds ability to manage tenants from dashboard.
-
+
+
+ {" "}
+
- `IS_TEMPLATE_STORE_ENABLED` enables template store which contains pre-made workflows for common use cases (like **Password Reset** workflow etc).
-
+
+ {" "}
+
diff --git a/community/get-involved.mdx b/community/get-involved.mdx
index f767a939..fdc35481 100644
--- a/community/get-involved.mdx
+++ b/community/get-involved.mdx
@@ -25,8 +25,10 @@ Our fellow community members are always ready to help you get past a blocker. Ho
- If there is any issue in our backend SDKs, please mention the SDK version and relevant details.
- If looking for self-hosting support, please share `Novu Version` and remote server details. Our latest version is `0.24.0`. Please be patient with self-hosting help. We are a small team and we will try our best to help you.
-
+
If needed, see:
@@ -256,5 +256,5 @@ For better productivity and wellness, we suggest removing the not-used apps from
Right Click on the app icon > Options > Remove from Dock
- 
+
diff --git a/community/monorepo-structure.mdx b/community/monorepo-structure.mdx
index 95646785..c6d7e3bb 100644
--- a/community/monorepo-structure.mdx
+++ b/community/monorepo-structure.mdx
@@ -27,7 +27,6 @@ For additional information on running Novu locally, visit the [run locally](http
The `apps` folder contains high-level applications and APIs. The app's outputs usually contain deployable units that a user can interact with either as an API or as a web/cli application.
-
-
-
-- -
-
-To create a new organization, you interact with a drop down menu in the bottom of the left navigation bar within Novu’s application. Type the name of your new organization, and if the name is new, you will see a button that enables you to add a new one.
-
-
-
-
-To switch between organizations, you again interact with the same drop down menu and switch between the organizations you have in your Novu account.
-
-
+## Inbox
-## Notification Center
+The Inbox is a beautifully designed and highly functional in-app experience for your users that you can add to your product quickly and effortlessly.
-Notification Center is a beautifully designed and highly functional in-app experience for your users that you can add to your product quickly and effortlessly.
-
-The core components of our Notification Center are:
+The core components of the component:
- A list of notifications with real-time updates
- Notification preference management
@@ -96,22 +69,10 @@ The core components of our Notification Center are:
[Learn more](/notification-center/introduction)
-## Preference
+## Subscriber Preference
A preference indicates a user's willingness to receive a particular type of notification. Preferences always belong to a user and can be paired with an identifier that represents the account or tenant that the user belongs to (for multi-tenant applications). [Learn more](/subscribers/preferences)
-## Delay Actions
-
-The delay action awaits a specified amount of time before moving on to trigger the following steps of the workflow. [Learn more](/workflows/delay-action)
-
-## Digest
-
-The digest engine collects multiple trigger events, aggregates them into a single message and delivers it to the subscriber. [Learn more](/workflows/digest)
-
-## Layouts
-
-Novu allows the creation of layouts - a specific HTML design or structure to wrap content of email notifications. Layouts can be manipulated and assigned to new or existing workflows within the Novu platform, allowing users to create, manage, and assign these layouts to workflows, so they can be reused to structure the appearance of notifications sent through the platform. [Learn more](/content-creation-design/layouts)
-
## Tenants
-A tenant represents a group of users. As a developer, when your apps have organizations, they are referred to as tenants. Tenants in Novu provides the ability to tailor specific notification experiences to users of different **groups** or **organizations**. [Learn more about Novu Tenants.](/tenants/introduction)
\ No newline at end of file
+A tenant represents a group of users. As a developer, when your apps have organizations, they are referred to as tenants. Tenants in Novu provides the ability to tailor specific notification experiences to users of different **groups** or **organizations**. [Learn more about Novu Tenants.](/tenants/introduction)
diff --git a/concepts/payload.mdx b/concepts/payload.mdx
new file mode 100644
index 00000000..6039892f
--- /dev/null
+++ b/concepts/payload.mdx
@@ -0,0 +1,57 @@
+---
+title: "Payload"
+---
+
+Workflow payload is the data passed during the `novu.trigger` method. This is useful for ensuring that the payload is correctly formatted and that the data is valid.
+
+## Payload Schema
+
+Payload schema is defining 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.
+
+```tsx
+workflow(
+ "comment-on-post",
+ async ({ step, payload }) => {
+ await step.email("send-email", async () => {
+ return {
+ subject: `You have a new comment from: ${payload.author_name}.`,
+ body: render(
+This will allow you to create sensible defaults but still provide the user with the ability to override them. All channels are `ON` unless specified otherwise.
## Subscriber level channel preferences
-Our notification center component will show a user the available preferences, user will be able to modify on the channel level. Critical workflows will be excluded from the list. Click on cog (setting) icon on notification center component to open subscriber channel preferences page.
+Our Inbox component will show a user the available preferences, user will be able to modify on the channel level. Critical workflows will be excluded from the list. Click on cog (setting) icon on notification center component to open subscriber channel preferences page.
{" "}
+
diff --git a/concepts/workflows.mdx b/concepts/workflows.mdx
new file mode 100644
index 00000000..a92cc733
--- /dev/null
+++ b/concepts/workflows.mdx
@@ -0,0 +1,51 @@
+---
+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."
+---
+
+A workflow holds the entire flow of steps (nodes) that are sent to the subscriber. This is where all the different channels are tied together under a single entity.
+
+## Structure
+
+A workflow acts as the blueprint for the notifications that will be sent. This is where all the different channels, filters, rules and actions are tied together under a single entity.
+
+
+
+## Workflow Components
+
++Read more about building workflows [here](/workflow/introduction). \ No newline at end of file diff --git a/content-creation-design/brand.mdx b/content-creation-design/brand.mdx index 730be182..f4b826d8 100644 --- a/content-creation-design/brand.mdx +++ b/content-creation-design/brand.mdx @@ -1,14 +1,11 @@ --- -title: 'Brand' -description: '' -icon: 'sparkle' +title: "Brand" +description: "" +icon: "sparkle" --- Through Novu's web dashboard, you have the power to effortlessly tailor your brand settings, streamlining the process of creating notifications. Customize key elements such as your logo, which will be seamlessly integrated into your email communications. For those utilizing Novu's In-App notification center, the ability to configure the primary font and its corresponding color awaits you. This empowers you to craft an experience for your users that resonates with your unique brand identity. -
+
diff --git a/content-creation-design/handlebars-helpers.mdx b/content-creation-design/handlebars-helpers.mdx
index c183973a..6f9b7ff6 100644
--- a/content-creation-design/handlebars-helpers.mdx
+++ b/content-creation-design/handlebars-helpers.mdx
@@ -1,39 +1,39 @@
---
-title: 'Handlebars & Helpers'
-description: ''
-icon: 'brackets-curly'
+title: "Handlebars & Helpers"
+description: ""
+icon: "brackets-curly"
---
+
# Handlebars
-The Novu notification content editor relies on Handlebars.js to establish the logic and control flow of our workflows.
-For a deeper comprehension of Handlebars.js, you can refer to its [documentation](https://handlebarsjs.com/guide/#what-is-handlebars).
+The Novu notification content editor relies on Handlebars.js to establish the logic and control flow of our workflows.
+For a deeper comprehension of Handlebars.js, you can refer to its [documentation](https://handlebarsjs.com/guide/#what-is-handlebars).
This resource offers comprehensive insights into the utilization of Handlebars.js in crafting dynamic and adaptable notification content within the Novu platform.
-| Helper | Description | Example | Output |
-| --------------- | -------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------- |
-| if | Conditionally renders a block. Falsy values won't be rendered. | `{{#if author}}{{firstName}} {{lastName}}
{{/if}}` | Renders `Yehuda Katz
` if `author` is truthy. | -| includeZero | `includeZero=true` treats the conditional as not empty, handling 0 differently. | `{{#if 0 includeZero=true}}Does render
{{/if}}` | Renders `Does render
` for 0. | -| Sub-Expressions | Create custom logic helpers and use them in sub-expressions. | `{{#if (isdefined value1)}}true{{else}}false{{/if}}` | Renders `true` or `false` based on custom helper. | -| unless | Inverse of if helper. Renders a block if the expression is falsy. | `{{#unless license}}WARNING
{{/unless}}` | Renders warning if `license` is falsy. | -| each | Iterate over a list. Use this to reference the iterated element. | `{{#each people}}{{firstName}} {{lastName}}
{{/if}}` | Renders `Yehuda Katz
` if `author` is truthy. | +| includeZero | `includeZero=true` treats the conditional as not empty, handling 0 differently. | `{{#if 0 includeZero=true}}Does render
{{/if}}` | Renders `Does render
` for 0. | +| Sub-Expressions | Create custom logic helpers and use them in sub-expressions. | `{{#if (isdefined value1)}}true{{else}}false{{/if}}` | Renders `true` or `false` based on custom helper. | +| unless | Inverse of if helper. Renders a block if the expression is falsy. | `{{#unless license}}WARNING
{{/unless}}` | Renders warning if `license` is falsy. | +| each | Iterate over a list. Use this to reference the iterated element. | `{{#each people}}10 is equal to 1
{{else}}10 is not equal to 1
@@ -117,6 +118,7 @@ This resource offers comprehensive insights into the utilization of Handlebars.j
-
The feature is only available for **Novu Cloud** users with **Business** or **Enterprise** plans.
+
+
Before creating your first Translation Group you'll be prompted to specify the default locale for organization. This locale serves as a fallback option for localized messages in cases where the recipient hasn't defined a specific locale.
-
+
After selecting the default language, you can provide the essential details: the group name, group identifier, and select your target languages.
The group identifier is an important value that you will later use in the editor to localize your messages. This is a similar concept that we use across the app to identify the main parts.
-
+
After the group is created, you will land on the group details page on which you can see the list with the empty translations for the languages you choose.
-
+
## Translations
@@ -67,15 +82,24 @@ Translations are JSON files that contain the content of your messages in a speci
To upload your translations click on the “Upload files” button located at the top of the Translation Group details page.
-
+
Select the translation files and click “Open” button.
-
+
With each uploaded translation file, you must indicate the language it references. Additionally, you can verify the correctness of the uploaded file by previewing its contents.
-
+
Click on “Upload files” button. Congratulations you just uploaded the translation files and created the translation group! 🎉
@@ -88,9 +112,15 @@ Let’s take a look at the example: `{{i18n "marketing.welcome_message"}}`.
- `i18n` is the handlebar helper that tells Novu that you would like to use the Translations
- `"marketing.welcome_message"` is the path that is composed of the Translation Group identifier `marketing` and translation JSON file key `welcome_message`
-
+
-
-
-
-## For Non-Technical Users
-
-Novu Framework was built with non-technical user in mind. Engineers can write complex workflows and expose a type-safe [Inputs](/framework/concepts/inputs) interface powered by JSON-Schema.
-This enables Non-Technical teammates to safely modify the workflow without breaking mission critical notifications.
-
diff --git a/framework/roadmap.mdx b/framework/roadmap.mdx
deleted file mode 100644
index 10d9a065..00000000
--- a/framework/roadmap.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: "Roadmap"
----
-
-This document outlines the roadmap for the Novu Framework project. It is a living document and will be updated as the project progresses.
-
-Our goal with Novu Framework is to create a Code-First but Product in-mind. Here you can see parts of our roadmap and future plans for it:
-
-Looking to add a feature request or upvote and existing feature? Head over to our [Public Roadmap](https://roadmap.novu.co).
-
-## Novu Framework, Now and Next
-- ✅ **Workflows**: the ability to create multi-step workflows and manage them using Code.
-- ✅ **CLI**: a command-line interface to interact with Novu Framework.
-- ✅ **Studio**: a visual front to preview your local work.
-- ✅ **Step Inputs**: JSON-Schema based interface for not technical users to modify the workflow content and behaviour.
-- ✅ **GitHub Actions**: sync your workflows using GitHub Actions.
-- ✅ **In App Seen/Read**: the ability to see the status of the in-app message.
-- ✅ **Custom Step**: the ability to create custom and execute custom code in the workflow. For example: custom provider, retrieving database information, and 3rd party service integration.
-- 🔜 **Zod Schema**: the ability to define the schema for the workflow and step inputs using Zod.
-- 🔜 **Define Integrations**: code-first approach of creating and managing your provider integrations
-- 🔜 **Email Reply Hook**: executing a custom logic code when a user replies to the email.
-- 🔜 **Webhook**: receive webhooks about the execution flow of a workflow in Novu Framework.
-- 🔜 **Eslint Plugin**: follow best practices and avoid common mistakes when writing code for Novu Framework.
-- 🔜 **Codegen**: use our community driven list of workflow templates to use out of the box.
-
diff --git a/framework/sdk/client.mdx b/framework/sdk/client.mdx
deleted file mode 100644
index 267c795d..00000000
--- a/framework/sdk/client.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: "Introduction"
----
-
-See the snippet below to learn how to configure your Bridge endpoint application.
-
-```tsx
-import { Client } from '@novu/framework';
-
-const client = new Client({
- /**
- * Specify a custom Novu API URL.
- * Defaults to 'https://api.novu.co', for EU use: https://eu.api.novu.co
- */
- apiUrl: 'https://api.novu.co',
- /**
- * Specify your Novu API key, to secure your Bridge API endpoint.
- * Novu communicates securely with your endpoint using a signed HMAC header,
- * ensuring that only trusted requests from Novu are actioned by your Bridge API.
- * The API key is used to sign the HMAC header.
- */
- apiKey: process.env.NOVU_API_KEY,
- /**
- * Explicitly use HMAC signature verification.
- * Setting this to `false` will enable Novu to communicate with your Bridge API
- * without requiring a valid HMAC signature.
- * This is useful for local development and testing.
- *
- * You are strongly encouraged to specify an `apiKey` and set this to `true` in production,
- * to ensure that only trusted requests from Novu are actioned by your Bridge API.
- *
- * Defaults to true.
- */
- strictAuthentication: process.env.NODE_ENV !== "development",
-});
-```
diff --git a/framework/sdk/frameworks/express.mdx b/framework/sdk/frameworks/express.mdx
deleted file mode 100644
index a68d3c14..00000000
--- a/framework/sdk/frameworks/express.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: "Integrate Novu with Express.js"
-sidebarTitle: "Express"
----
-
-```tsx
-import { serve } from "@novu/framework/express";
-import { myWorkflow } from "../novu/workflows";
-
-app.use(express.json()); // Required for Novu POST requests
-app.use(
- "/api/novu",
- serve({ workflows: [myWorkflow] })
-);
-```
diff --git a/framework/sdk/frameworks/h3.mdx b/framework/sdk/frameworks/h3.mdx
deleted file mode 100644
index ba1fd866..00000000
--- a/framework/sdk/frameworks/h3.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: "Integrate Novu with H3"
-sidebarTitle: "H3"
----
-
-```tsx
-import { createApp, eventHandler, toNodeListener } from "h3";
-import { serve } from "@novu/framework/h3";
-import { createServer } from "node:http";
-import { myWorkflow } from "./novu/workflows";
-
-const app = createApp();
-app.use(
- "/api/novu",
- eventHandler(
- serve({
- workflows: [myWorkflow],
- })
- )
-);
-
-createServer(toNodeListener(app)).listen(process.env.PORT || 3000);
-```
diff --git a/framework/sdk/frameworks/nextjs.mdx b/framework/sdk/frameworks/nextjs.mdx
deleted file mode 100644
index be46b38b..00000000
--- a/framework/sdk/frameworks/nextjs.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: "Integrate Novu with Next.js"
-sidebarTitle: "Next.js"
----
-
-## App Router
-
-
+
+
+
diff --git a/getting-started/introduction.mdx b/getting-started/introduction.mdx
index 97a046ca..82d01bba 100644
--- a/getting-started/introduction.mdx
+++ b/getting-started/introduction.mdx
@@ -1,186 +1,40 @@
---
-title: "What is Novu?"
-description: "Novu is a full-stack (UI, API & GitOps) open source notification infrastructure tool and platform for building, managing, delivering, and monitoring all types of end-user notifications."
-icon: "arrow-right-to-arc"
+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."
---
-Novu supports a variety of common notification channels out-of-the-box, including **email**, **SMS**, **push**, **in-app**, and **chat**. Our platform is a developer-first product built for engineers that need to simplify the complexities of notification management, while working closely with product and marketing teams that need to provide, edit, and maintain notification content.
-
-
-2. To sign up, you can either use your email and password or sign up using Github. Choose what you wish to proceed with, read the terms and conditions, check its checkbox and click the sign-up button.
-
-3. You’ll then be asked to create an Organization. Organizations help you segregate communication between your different products. You can learn more about organisations here. Simply enter your organization name and click on the ‘create’ button:
-
-4. On creating an organization, you’ll be greeted with the get started page:
-
-This gives you access to a lot of options:
-
-1. Accessing support
-2. Managing your account
-3. Configuring different channels
-4. Navigating to any other sections of the dashboard
-
-From here, you can navigate to any part of the web dashboard. Let’s now see Novu in action!
\ No newline at end of file
diff --git a/getting-started/send-your-first-notification.mdx b/getting-started/send-your-first-notification.mdx
deleted file mode 100644
index 6d4f2d7a..00000000
--- a/getting-started/send-your-first-notification.mdx
+++ /dev/null
@@ -1,299 +0,0 @@
----
-title: 'Send Your First Notification'
-sidebarTitle: 'Send First Notification'
-description: 'Learn how to send your first notification via the Novu Cloud dashboard.'
-icon: 'bell'
----
-
-Sending the first notification is fairly simple, and can be done from within the web dashboard. To send your first notification, follow these steps:
-
-## Workflow for Email notifications
-
-1. Navigate to the workflow section from the left sidebar:
-
-
- 
-
-
-2. Click on the `Blank Workflow` button to create an empty workflow:
-
-
- 
-
-
-3. You are now in the workflow editor. Here you can add steps to your workflow. We’ll just drag the email node from the right sidebar to our workflow as illustrated below:
-
-
- 
-
-
-4. Now, simply click on the email node, and add the subject and the notification
- text in the email node editor:
-
-
- 
-
-
-5. Now, update the workflow and save it as shown in the image below:
-
-
- 
-
-
-6. Now, to execute this workflow, click on the `get snippet` button from the workflow editor:
-
-
- 
-
-
-7. From the `run a test` tab, you can change the email to which you want the notification. Once you’ve done that, simply click on the `Run Trigger` button on the bottom right:
-
-
- 
-
-
-8. Now, go to the inbox and you’ll see the email notification there. Don’t forget also to check spam as it may sometimes land in there:
-
-
- 
-
-
-9. This gif below captures the entire process:
-
-
- 
-
-
-## Workflow for In-App notifications
-
-Creating workflows for sending in-app notifications is pretty straightforward. Just follow the following steps and you'll be good to go:
-
-1. Head to `workflows` on the [Novu web dashboard](https://web.novu.co/workflows?utm_campaign=docs-gs-sendfirstnotification).
-
-
-
-
-
-2. Click on the Blank Workflow button to create a workflow from scratch.
-
-
-
-
-
-
-
- - -
-
-
-
-
-4. For your use case here, we'll simply add an `in-app` node to our workflow.
-
- 
-
- 
-
-
-- **Preview**: This shows you a glimpse of what each notification item will look like in the Notification Center UI.
-- **Avatar:** If turned on, each notification item will show the avatar of the subscriber.
-- **Action:** With this, you can add a primary and secondary call to action button to each notification item.
-- **Notification Feeds:** This displays a stream of specific notifications. You can have multiple feeds to show specific notifications in multiple tabs.
-- **Redirect URL** - This is the URL to which a subscriber can be directed when they click on a notification item.
-- **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.
-
-6. In this editor, you need to plug in the variable that your backend is expecting in the payload:
-
-
- 
-
-
-7. You can even use [handlebars](/content-creation-design/handlebars-helpers) to further customise this.
-
-8. Once you're done configuring it, simply click the `update` button on the top right corner.
-
-
- 
-
-
-9. Now, simply click on the `Get Snippet` button to get the trigger code snippet.
-
-
- 
-
-
-10. You'll get the code that you need to plug into your backend to be executed whenever an event fires.
-
-
- 
-
- -
-
-
-2. Click on the `Blank Workflow` button to create a workflow from scratch.
-
-
-
-
-
-
-
- - -
-
-
-
-
-4. Since we're creating a workflow for SMS notifications, we'll drag the `SMS` step to our workflow, as shown in this picture below:
-
-
- 
-
-
-5. If you hover over the SMS node, you will get a message saying 'Required - SMS content`. Click on the SMS node and add a message to it. This is what will be sent as a notification in the SMS.
-
-
- 
-
- -
-
-
-7. Now, simply click on the Get Snippet button to get the trigger code snippet.
-
-
- 
-
-
-8. You’ll get the code that you need to plug into your backend to be executed whenever an event fires.
-
-
- 
-
-
-
-
-2. Click on the `Blank Workflow` button to create a workflow from scratch.
-
-
-
-
- -
-
- - -
-
-
-
-
-4. Just add this `Chat` node to the workflow.
-
-
- 
-
-
-5. In the `Chat` node, you can enter the notification message. This is what will get sent to the [subscriber](/subscribers/subscribers) as a notification. If you're sending dynamic messages, use the variable that is expected in your payload in double braces here. Using [handlebars](/content-creation-design/handlebars-helpers), you can further extend this functionality.
-
-
- 
-
-
-6. Once you’re done configuring it, simply click the update button on the top right corner.
-
-
- 
-
-
-7. Now, simply click on the Get Snippet button to get the trigger code snippet.
-
-
- 
-
-
-8. You’ll get the code that you need to plug into your backend to be executed whenever an event fires.
-
-
- 
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
- -
-
-**Note:** Use the port on which your Remix app is running for the Bridge endpoint so that the Novu Dev Studio can connect to your API route as highlighted in the image above.
-
-2. Check out the signup email workflow and test
-
-
-
-3. Deploy to Novu Cloud when you're done.
-
-On the top right(as seen in the image above) of the Novu Dev Studio, you can sync to Novu Cloud when you're done working locally.
-
-**Note:** You'll need to create a local tunnel that the Novu Cloud environment can reach for local experimentation purposes. Ngrok is a good tunnel.
-
-### 6. Send a Notification
-
-Trigger a notification using the recently deployed workflow either via your [Novu Cloud dashboard](https://web.novu.co) or [code](/quickstarts/react#trigger-a-notification).
-
-```js
-import { Novu } from "@novu/node";
-
-const novu = new Novu("-
-
-3. Define a workflow that uses that template to send notifications - In this step, we need to define a workflow that uses the template we wrote above to render the email notification:
-```ts
-import { Client, workflow } from "@novu/framework";
-import { renderOTPEmail } from "./otp";
-
-export const client = new Client({
- apiKey: process.env.NOVU_API_KEY,
- /**
- * Disable this flag only during local development
- */
- strictAuthentication: process.env.NODE_ENV !== "development",
-});
-
-export const otpFlow = workflow('otp-flow', async ({ step, payload }) => {
- // Send a welcome email
- await step.email('send-email', async (inputs) => {
- return {
- subject: `Here's your verification code, Sumit!`,
- body: renderOTPEmail(inputs, payload),
- };
- }, {
- inputSchema: {
- type: "object",
- properties: {
- showJoinButton: { type: "boolean", default: true },
- buttonText: { type: "string", default: "Login to Linear" },
- logoURL: {
- type: "string",
- default: "https://react-email-demo-7qy8spwep-resend.vercel.app/static/linear-logo.png",
- format: "uri",
- },
- supportEmail: { type: "string", default: "support@linear.co" },
- validationCode: { type: "string", default: "tt226-5398x" },
- inviteLink: {
- type: "string",
- default: "https://linear.app",
- format: "uri",
- },
- inviteFromIp: { type: "string", default: "204.13.186.218" },
- inviteFromLocation: {
- type: "string",
- default: "São Paulo, Brazil",
- },
- },
- },
- });
- // JSON Schema for validation and type-safety. Zod, and others coming soon.
-}, { payloadSchema: { properties: { text: { type: 'string' } } } });
-```
-4. Triggering the workflow - Lastly, we need to trigger the workflow we created above. Here’s how to trigger it:
-```ts
-import { Novu } from '@novu/node';
-
-const novu = new Novu('
-That’s it!
-
-That’s how you create and use an OTP workflow. You can check out [our docs](https://docs.novu.co/guides/framework-guides/framework-react-email) for a hands on guide with more in-depth instructions.
-
-Once you've built the workflow, you might want read one of [our other guides](/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!
\ No newline at end of file
diff --git a/guides/how-to-integrate-segment-with-novu.mdx b/guides/integrations/segment.mdx
similarity index 76%
rename from guides/how-to-integrate-segment-with-novu.mdx
rename to guides/integrations/segment.mdx
index cdb2ce78..049d8b68 100644
--- a/guides/how-to-integrate-segment-with-novu.mdx
+++ b/guides/integrations/segment.mdx
@@ -1,13 +1,13 @@
---
-title: 'How To Integrate Segment With Novu'
-description: ''
+title: "How To Integrate Segment With Novu"
+sidebarTitle: "Integrate with Segment"
---
[Segment](https://segment.com/) is a customer data platform that helps businesses collect, manage, and analyze customer data from multiple sources. It streamlines data integration, ensures data quality, and aids in compliance with regulations. Segment's tools enable better understanding of customer behavior and facilitate personalized customer experiences. It's useful for marketing, analytics, and product teams in diverse industries.
If this is your first time working with the tool, consider consulting the 'Get Started' guide in [Segment's official documentation](https://segment.com/docs/getting-started/).
-## Examples Use Case
+## Examples Use Case
**Enhancing Customer Engagement and Conversion Rates**
@@ -16,12 +16,12 @@ If this is your first time working with the tool, consider consulting the 'Get S
- The e-commerce platform uses Segment to collect and unify customer data from various sources like website visits, purchase history, and customer interactions.
- Segment helps in creating a unified customer profile by consolidating data from different touchpoints – mobile app usage, website browsing patterns, and previous purchase behavior.
-
@@ -30,15 +30,18 @@ If this is your first time working with the tool, consider consulting the 'Get S
- The data collected is analyzed to understand customer preferences, buying patterns, and engagement levels.
- Customers are segmented into different groups based on their behavior, interests, and purchase history. For instance, one segment might include frequent shoppers, while another might focus on those who browse but rarely purchase.
-
+
+
-Whether you chose the first or second option to test your Destination Function, you can also check if the function triggered your workflow and whether it was delivered through Novu's [Activity Feed](https://web.novu.co/activities?utm_campaign=docs-guides-segment).
+Whether you chose the first or second option to test your Destination Function, you can also check if the function triggered your workflow and whether it was delivered through Novu's [Activity Feed](https://dashboard.novu.co/activities?utm_campaign=docs-guides-segment).
-
This guide was inspired by the following resources:
+
- https://discord.com/channels/895029566685462578/1060308007658987571/1077377322547687475
- https://segment.com/docs/getting-started/05-data-to-destinations/
- https://aviyel.com/post/3381/how-to-integrate-novu-with-segment
-
-
-
-
-
-
-
diff --git a/guides/novu-fcm-web.mdx b/guides/novu-fcm-web.mdx
deleted file mode 100644
index 7cbb35f5..00000000
--- a/guides/novu-fcm-web.mdx
+++ /dev/null
@@ -1,218 +0,0 @@
----
-title: 'How to send web push notifications with FCM and Novu'
-description: 'Send FCM push notifications in a React app using Novu'
----
-
-## Introduction
-In this guide, we'll learn how to send FCM push notifications in a web app using Novu. But before exploring the actual code, let’s understand what a push notification is and how it works.
-You can find the [frontend code](https://github.com/novuhq/fcmWebPushFE) as well as [backend code](https://github.com/novuhq/FCMWebPushBE) for the app on Github.
--Push notifications are notifications that are sent to a user's devices whether the user is using the app or not. We'll be using Firebase Cloud Messaging (FCM) integration of Novu to send these notifications. This guide will be broken down into three parts: -1. Setting up Novu. -2. Setting up Firebase. -3. Adding Firebase to the Frontend. -4. Adding Novu to the Backend. - -## Setting up Firebase -1. Create a Firebase account if you don't already have one. Then, create a new project and all the relevant details. -
-2. Once your project has been created, you'll be greeted with this welcome screen and asked to add Firebase to your app, so let's do that.
-
-3. We'll choose the web option because we're creating a web app.
-
-4. Give your app a name and click on the 'Register' button.
-
-5. We're done with the Firebase setup! Now, we'll set up Novu and finally proceed to add both (Novu and FCM) to our app.
-
-## Setting up Novu
-We'll need a workflow to trigger notifications to our user's devices. Follow the steps below to create one to ensure we are on the path to make FCM work as expected:
-1. Head over to the [Integrations Store](https://web.novu.co/integrations?utm_campaign=docs-guides-fcm-web) on the Novu Web Dashboard and make sure that you've turned on the 'Firebase Cloud Messaging' integration.
-
-
-3. Choose the 'blank workflow' option from the dropdown menu.
-
-3. Drag and drop the 'Push' node below the Workflow Trigger node.
-
-4. If you hover over the newly added 'Push' node, you'll see an error saying 'Message content and title are missing'.
-
-5. We're going to use the identifiers `title` and `body` for the title and the content of notifications, so let's add them in the 'Push message title' and the 'Push message content' fields respectively. So, add them and give your workflow a suitable name.
-
-6. Now, click on the 'get snippet' button to get the trigger code.
-
-
-## Adding Firebase to the frontend
-1. In your project, add Firebase using the following command:
-```bash
-npm install firebase
-```
-2. Create a new file called `firebase.js` and add the following to it:
-```jsx
-import { initializeApp } from "firebase/app";
-import { getMessaging, onMessage } from "firebase/messaging";
-
-//from firebase console
-// Your web app's Firebase configuration
-const firebaseConfig = {
- apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
- authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
- projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
- storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
- messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
- appId: import.meta.env.VITE_FIREBASE_APP_ID,
-};
-
-// Initialize Firebase
-export const app = initializeApp(firebaseConfig);
-
-// Initialize Firebase Cloud Messaging and get a reference to the service
-export const messaging = getMessaging(app);
-
-export const onMessageListener = () =>
- new Promise((resolve) => {
- onMessage(messaging, (payload) => {
- console.log("payload", payload)
- resolve(payload);
- });
- });
-```
-3. Now, we need to generate tokens using the `getToken` method provided by Firebase. But we want to use this only when the user has allowed notifications on their end. So let's request notification permission from the user and if granted, we'll generate the token. Add this to your root module:
-```jsx
- async function requestPermission() {
- const permission = await Notification.requestPermission()
- if (permission === 'granted') {
- // get token
- const token = await getToken(messaging, { vapidkey: import.meta.env.VITE_VAPID_KEY })
- } else if (permission === 'denied') {
- alert('Persmission denied!')
- }
- }
- useEffect(() => {
- requestPermission();
- }, [])
-```
-4. To use the `getToken` method, you need a Voluntary Application Server Identification or `VAPID key`. Go to your Project Settings -> Cloud Messaging -> Generate key pair (under Web Push Certificates):
-
-5. In order for Firebase's background listener service to work, you need a service worker. Make sure you've created a service worker file `firebase-messaging-sw.js` and add the following to it:
-```jsx
-importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js");
-importScripts(
- "https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"
-);
-
-const firebaseConfig = {
- apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
- authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
- projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
- storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
- messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
- appId: import.meta.env.VITE_FIREBASE_APP_ID,
-};
-
-firebase.initializeApp(firebaseConfig);
-const messaging = firebase.messaging();
-messaging.onBackgroundMessage((payload) => {
- console.log(
- "notif incoming",
- payload
- );
- const notificationTitle = JSON.parse(JSON.parse(payload.notification)).title
- // payload.notification.title;
- const notificationOptions = {
- body: payload.notification.body,
- icon: payload.notification.image,
- };
-
- self.registration.showNotification(notificationTitle, notificationOptions);
-});
-
-
-```
-
-## Adding Novu to the backend
-In your app's backend, add Novu using the following command:
-```bash
-npm install @novu/node
-```
-Now, create a route that you want to hit when called from the front end. In our app, this is the route:
-```jsx
-import express from "express";
-import { createNotif } from '../controller/notif.js'
-
-const router = express.Router();
-
-router.post('/create', createNotif)
-
-export default router;
-```
-
-Now, we need a controller function to handle the logic for what is to be sent in the trigger function’s payload. In our case, this is the controller function:
-```jsx
-import { inAppNotification } from "../novu/novu.js";
-
-export const createNotif = async (req, res) => {
-
- const { title, body } = req.body
- try {
- await inAppNotification(title, body);
- res.status(201).json({ message: 'success', title: title, body: body });
- } catch (error) {
- res.status(409).json({ message: error.message });
- }
-}
-```
-
-To make it modular, we’ll keep the trigger code in a separate function in a separate file (`novu.js`, in our case) and the trigger function is getting called in the controller function above by the name `createNotif`.
-
-If you’re following the guide, you should already have the trigger function. But before we can add it to our app, we need one key thing - **Subscribers.**
-
-[Subscribers](https://docs.novu.co/subscribers/subscribers) are entities to which the notifications are sent. You can see a list of subscribers in the [Novu dashboard](https://web.novu.co/subscribers?utm_campaign=docs-guides-fcm-web) as well.
-
-We'll create a subscriber in our app. Our backend will be written in Node.js, but we also have backend [SDKs in PHP, .NET, Go, Ruby, Python, and Kotlin](/sdks/introduction). The recommended way to create a subscriber in NodeJS is as follows:
-```jsx
- await novu.subscribers.identify(process.env.NOVU_SUB_ID, {
- firstName: "pushSubscriber"
- });
-```
-Here, we're creating a subscriber with the `subscriberID` of whatever value the `env` file contains for the identifier `NOVU_SUB_ID`. You can read more about subscribers [in our docs.](/subscribers/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):
-```jsx
-await novu.subscribers.setCredentials(process.env.NOVU_SUB_ID, PushProviderIdEnum.FCM, {
- deviceTokens: [process.env.DEVICE_TOKEN],
- });
-```
-
-
-2. Choose 'From Scratch' from the following dialog:
-
-3. Choose a name for your app and select the Slack workspace in which you want to send notifications:
-
-4. Once you're done, simply click the 'Create App' button:
-
-5. Once done, you'll be greeted with the screen shown below. We'll make a couple of changes here and it'll be ready to go.
-
-6. We'll need `Client Id` from the [Slack Developer's Dashboard](https://api.slack.com/apps) for configuring Slack Integration in the [Novu Web Dashboard](https://web.novu.co/integrations?utm_campaign=docs-guides-slack) later, so keep it handy.
-
-
-# Create a workflow in the Novu Web Dashboard
-1. To create a workflow, head to the workflow section in the [Novu Web Dashboard](https://web.novu.co/workflows?utm_campaign=docs-guides-slack).
-2. Click on the 'Add a workflow' button and select 'Blank workflow' from the dropdown.
-
-3. Once there, give your workflow a name and drag and drop the 'chat' option below the 'workflow trigger' step.
-
-4. You can also add variables in the Workflow Editor. For example, here I've added 'chatMsg' as a variable as I'll be sending data using it.
-
-
-6. To turn the Slack integration on, you'll need `Client Id`. You should have it already but if you don't, you can obtain it from the [Slack Developer's Dashboard](https://api.slack.com/apps).
-
-7. Once you have it, you need to plug it into the respective field in the [Slack Integration Settings](https://web.novu.co/integrations?utm_campaign=docs-guides-slack) on the Novu Web Dashboard.
-
-
-# Create the backend
-The backend for this app is quite simple. Simply install the Novu package:
-```bash
-npm install @novu/node
-
-```
-Now, create a route that you'll hit when called from the front end. We'll also need to add it to our Slack app (discussed below). For our demo app, this is the route I've created:
-```jsx
-import express from "express";
-import { chatController } from "../controller/chat.js";
-
-const router = express.Router();
-
-router.post("/sendChat", chatController);
-
-export default router;
-```
-Now, we need a controller function to handle what is to be sent in the trigger's function payload. Here's the controller I wrote:
-```jsx
-import { chat } from "../novu/novu.js"
-
-export const chatController = async (req, res) => {
- const { chatMsg } = req.body;
- try {
- await chat(chatMsg);
- res.status(201).json({ message: "Message sent successfully" });
- } catch (error) {
- res.status(500).json({ message: error.message })
- }
-}
-```
-
-
-
-# Configure the Slack app
-
-There are two ways to configure the Slack app. One is the Novu managed option and another the manually managed option.
-Since the Novu managed is fairly straightforward, I'll demonstrate the manual method here. Follow along to set it up!
-
-1. Goto 'Incoming Webhooks' in your Slack app settings and turn it on.
-
-2. Click on the 'Add New Webhook to Workspace':
-
-3. Now, go ahead and select the channel in which you want to send notifications and click 'allow'.
-
-4. Then, copy the 'webhookUrl' from Slack.
-
-5. Now, add the code below to the backend trigger functionality. Using this code, we are specifying what `webhookUrl` Novu will use to authenticate when using the Slack provider.
-
-
-
-
-This is how we send Slack notifications using Novu!
\ No newline at end of file
diff --git a/guides/usecases/introduction.mdx b/guides/usecases/introduction.mdx
deleted file mode 100644
index 8fa7c2e5..00000000
--- a/guides/usecases/introduction.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: "Learn by usecase"
-description: "Learn Novu's Use Cases"
----
-
-Novu is built to empower engineering teams in integrating rich product notification experiences seamlessly without re-inventing the wheel.
-
-It has been thoroughly and beautifully crafted to help individuals, teams, businesses and organizations focus on what truly matters: creating exceptional user experiences and driving engagement through smooth and swift notifications delivery.
-
-The common use cases for using Novu are highlighted below:
-
-
-
-
-### Add a new Delivery Provider
-
-
-
-
diff --git a/guides/workflows/feedback-reviews.mdx b/guides/workflows/feedback-reviews.mdx
new file mode 100644
index 00000000..a6ed0203
--- /dev/null
+++ b/guides/workflows/feedback-reviews.mdx
@@ -0,0 +1,66 @@
+---
+title: "Feedback & Reviews"
+description: "Grow your business faster by asking users to leave a positive review"
+---
+
+## Intro
+
+Feedback and reviews are the lifeblood of any business. Setting up an automated workflow to do so however, is unnecessarily complicated by the need to implement notification logic like delayed send.
+
+[Explore the source code on GitHub](https://github.com/novuhq/examples/tree/main/novu-workflows/react/feedback-reviews)
+
+## Preview
+
+
+
+## Code Example
+
+```javascript
+import { workflow } from '@novu/framework';
+import { renderFeedbackEmail } from '../emails/feedback';
+import { zodControlSchema, zodDelayControlSchema, zodPayloadSchema } from './schemas';
+
+export const AirbnbReview = workflow(
+ "Airbnb Review",
+ async ({ step, payload }) => {
+ /**
+ * Delay Step
+ */
+ await step.delay(
+ 'delay-1-week',
+ async (controls) => {
+ return {
+ type: "regular",
+ unit: controls.unit, // 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months'
+ amount: controls.amount, // the number of units to delay workflow execution for
+ };
+ },
+ {
+ controlSchema: zodDelayControlSchema
+ }
+ );
+
+ /**
+ * Email Step
+ */
+ await step.email(
+ "send-email",
+ async (controls) => {
+ return {
+ subject: controls.emailSubject,
+ body: renderFeedbackEmail(controls, payload),
+ };
+ },
+ {
+ controlSchema: zodControlSchema
+ }
+ );
+ },
+ {
+ payloadSchema: zodPayloadSchema
+ },
+);
+```
\ No newline at end of file
diff --git a/guides/workflows/introduction.mdx b/guides/workflows/introduction.mdx
new file mode 100644
index 00000000..ae0af365
--- /dev/null
+++ b/guides/workflows/introduction.mdx
@@ -0,0 +1,34 @@
+---
+title: "Overview"
+description: "You shouldn't have to reinvent the wheel. Here we share how to implement several real-world use cases of notifications workflows."
+---
+
+## Workflow Examples
+
+This directory consists of drop-in working projects of different types of notification workflows you can use.
+
+Each directory is a batteries-included Novu Nextjs app that you can simply clone, install and run!
+
+
+
+
+
+## Code Example
+
+```javascript
+import { workflow } from '@novu/framework';
+import { renderAppleReceiptEmail } from '../emails/apple-receipt';
+import { zodControlSchema, jsonSchema, zodPayloadSchema } from './schemas';
+
+/**
+ * Apple Receipt Workflow
+ */
+export const appleReceipt = workflow(
+ "Apple Receipt",
+ async ({ step, payload }) => {
+ await step.email(
+ "send-email",
+ async (controls) => {
+ return {
+ subject: controls.receiptSubject,
+ body: renderAppleReceiptEmail(controls, payload),
+ };
+ },
+ {
+ controlSchema: zodControlSchema
+ },
+ );
+ },
+ {
+ payloadSchema: zodPayloadSchema
+ }
+);
+```
\ No newline at end of file
diff --git a/guides/workflows/otp.mdx b/guides/workflows/otp.mdx
new file mode 100644
index 00000000..1058251c
--- /dev/null
+++ b/guides/workflows/otp.mdx
@@ -0,0 +1,81 @@
+---
+title: "OTP (One-Time Password)"
+description: "Send OTPs without setting up your own infrastructure"
+---
+
+## Intro
+
+Sending One-Time Passwords (OTP) is often unnecessarily complicated, requiring engineering teams to waste valuable development cycles setting up SMS infrastructure and getting email reputation satisfactory for sending six digit passcodes. This three channel workflow example shows how to send an email, push notification, or SMS OTP.
+
+[Explore the source code on GitHub](https://github.com/novuhq/examples/tree/main/novu-workflows/react/otp)
+
+## Preview
+
+Send an email
+
+
+Send a mobile push notification
+
+
+Send an SMS notification
+
+
+
+## Code Sample
+
+```javascript
+import { workflow } from '@novu/framework';
+import { renderOtpEmail } from '../emails/slack-otp';
+import { zodControlSchema, zodPayloadSchema, zodPushControlSchema, zodSmsControlSchema } from './schemas';
+
+export const SlackVerificationOTP = workflow(
+ "Slack Verify OTP",
+ async ({ step, payload }) => {
+ await step.email(
+ "send-email",
+ async (controls) => {
+ return {
+ subject: controls.emailSubject,
+ body: renderOtpEmail(controls, payload),
+ };
+ },
+ {
+ controlSchema: zodControlSchema
+ });
+
+ // -----------------------------------push flow-------------------------------------------------------------------------
+ await step.push('send-push', async (controls) => {
+ return {
+ subject: controls.pushNotificationSubject,
+ body: `Your verification code from Slack is ${payload.validationCode}`,
+ };
+ },
+ {
+ controlSchema: zodPushControlSchema
+ });
+
+ // -----------------------------------sms flow-------------------------------------------------------------------------
+ await step.sms('send-sms', async (controls) => {
+ return {
+ subject: controls.smsSubject,
+ body: `Your verification code from Slack is ${payload.validationCode}`,
+ };
+ },
+ {
+ controlSchema: zodSmsControlSchema
+ });
+ },
+ {
+ payloadSchema: zodPayloadSchema
+ },
+);
+```
diff --git a/guides/workflows/password-reset.mdx b/guides/workflows/password-reset.mdx
new file mode 100644
index 00000000..53edd773
--- /dev/null
+++ b/guides/workflows/password-reset.mdx
@@ -0,0 +1,48 @@
+---
+title: "Password Reset"
+description: "Help users reclaim access to their account via the 'Password Reset' or 'Forgot Username' functions"
+---
+
+## Intro
+
+To help users re-establish access to their account securely, a password reset email should be succint and have a unique password reset URL that expires after a given time. This example uses the payload schema to fetch the unique expiring password reset link.
+
+[Explore the source code on GitHub](https://github.com/novuhq/examples/tree/main/novu-workflows/react/password-reset)
+
+## Preview
+
+
+
+
+## Code Example
+
+```javascript
+import { workflow } from '@novu/framework';
+import { renderPasswordResetEmail } from '../emails/password-reset';
+import { zodControlSchema, zodPayloadSchema } from './schemas';
+
+export const DropboxPasswordResetEmail = workflow(
+ "Dropbox Password Reset",
+ async ({ step, payload }) => {
+ await step.email(
+ "send-email",
+ async (controls) => {
+ return {
+ subject: controls.emailSubject,
+ body: renderPasswordResetEmail(controls, payload),
+ };
+ },
+ {
+ controlSchema: zodControlSchema
+ }
+ );
+ },
+ {
+ payloadSchema: zodPayloadSchema
+ }
+);
+```
+
diff --git a/guides/workflows/recent-login.mdx b/guides/workflows/recent-login.mdx
new file mode 100644
index 00000000..fd245c08
--- /dev/null
+++ b/guides/workflows/recent-login.mdx
@@ -0,0 +1,66 @@
+---
+title: "Recent Login"
+description: "Notify users of recent login activity"
+---
+
+## Intro
+
+Sending recent logins is a great way to inform users of possible unusal activity and verify their usage. This workflow example leverages the payload schema to display the login IP, and notifies users through both email and a push notification.
+
+[Explore the source code on GitHub](https://github.com/novuhq/examples/tree/main/novu-workflows/react/recent-login)
+
+## Preview
+
+
+
+
+## Code Example
+
+```javascript
+import { workflow } from '@novu/framework';
+import { renderLoginEmail } from '../emails/yelp-recent-login';
+import { zodControlSchema, zodPayloadSchema, zodPushControlSchema } from './schemas';
+
+export const YelpRecentLogin = workflow(
+ "Yelp Recent Login",
+ async ({ step, payload }) => {
+ /**
+ * Email Flow
+ */
+ await step.email(
+ "send-email",
+ async (controls) => {
+ return {
+ subject: "Recent login to your Account",
+ body: renderLoginEmail(controls, payload),
+ };
+ },
+ {
+ controlSchema: zodControlSchema
+ },
+ );
+
+ /**
+ * Push Flow
+ */
+ await step.push(
+ "send-push",
+ async (controls) => {
+ return {
+ subject: controls.pushNotificationSubject,
+ body: `Hi ${payload.userFirstName}, we noticed a recent login to your Yelp account. If this was you, there's nothing else you need to do. If this wasn't you or please see our support page.`,
+ };
+ },
+ {
+ controlSchema: zodPushControlSchema
+ }
+ );
+ },
+ {
+ payloadSchema: zodPayloadSchema
+ },
+);
+```
diff --git a/guides/workflows/scaffold.mdx b/guides/workflows/scaffold.mdx
new file mode 100644
index 00000000..bc6da167
--- /dev/null
+++ b/guides/workflows/scaffold.mdx
@@ -0,0 +1,129 @@
+---
+title: ""
+description: ""
+---
+
+## Intro
+
+
+[Explore the source code on GitHub](https://github.com/novuhq/examples/tree/main/novu-workflows/react/otp)
+
+## Preview
+
+
+
+
+
+## Code Example
+
+```javascript
+import { Client, workflow } from "@novu/framework";
+import { renderOtpEmail } from "./emails/slack-otp";
+
+
+export const client = new Client({
+ /**
+ * Enable this flag only during local development
+ */
+ strictAuthentication: false,
+});
+
+export const SlackVerificationOTP = workflow(
+ "Slack Verify OTP",
+ async ({ step, payload }) => {
+ await step.email(
+ "send-email",
+ async (inputs) => {
+ return {
+ subject: inputs.emailSubject,
+ body: renderOtpEmail(inputs, payload),
+ };
+ },
+ {
+ inputSchema: {
+ type: "object",
+ properties: {
+ emailSubject: {
+ title: "Email Subject",
+ type: "string",
+ default: "Verify your Slack OTP!"
+ },
+ confirmAddressHeader: {
+ type: "string",
+ default: "Confirm your email address",
+ title: "Confirm Address Header"
+ },
+ majorBodyText: {
+ type: "string",
+ default: "Your confirmation code is below - enter it in your open browser window and we'll help you get signed in.",
+ title: "Major Body Text"
+ },
+ showMagicLink: {
+ type: "boolean",
+ default: false,
+ title: "Show Magic Link"
+ },
+ linkText: {
+ type: 'string',
+ default: 'Click this link if the OTP does not work for you!',
+ title: 'Magic link Text'
+ },
+ showOTP: {
+ type: "boolean",
+ default: true,
+ title: "Show OTP"
+ },
+ },
+ },
+ });
+
+ // -----------------------------------push flow-------------------------------------------------------------------------
+ await step.push('send-push', async () => {
+ return {
+ subject: 'You received a Slack OTP',
+ body: `Your verification code from Slack is ${payload.validationCode}`,
+ };
+ });
+
+ // -----------------------------------sms flow-------------------------------------------------------------------------
+ await step.sms('send-sms', async () => {
+ return {
+ subject: 'You received a Slack OTP',
+ body: `Your verification code from Slack is ${payload.validationCode}`,
+ };
+ });
+ },
+ {
+ payloadSchema: {
+ type: "object",
+ properties: {
+ validationCode: {
+ type: "string",
+ default: "123456",
+ title: "OTP",
+ },
+ magicLinkURL: {
+ type: "string",
+ default: "https://slack.com/magic/link",
+ title: "Magic Link URL"
+ }
+ },
+ },
+ },
+);
+
+```
+
+## Installation
+
+```
+npm run dev
+```
+
+
+
+
+## Code Example
+
+```javascript
+import { workflow } from '@novu/framework';
+import { renderShippingOrderEmail } from '../emails/shipping-order-confirmation';
+import { zodControlSchema, zodPayloadSchema, jsonControlSchema, jsonPayloadSchema } from './schemas';
+
+export const AmazonShippingOrderConfirmation = workflow(
+ "Amazon Shipping Order",
+ async ({ step, payload }) => {
+ await step.email(
+ "send-email",
+ async (controls) => {
+ return {
+ subject: controls.emailSubject,
+ body: renderShippingOrderEmail(controls, payload),
+ };
+ },
+ {
+ controlSchema: zodControlSchema
+ }
+ );
+ },
+ {
+ payloadSchema: zodPayloadSchema
+ },
+);
+```
+
+
\ No newline at end of file
+
+
+
diff --git a/help/user-management.mdx b/help/user-management.mdx
index a1544392..f767c4fa 100644
--- a/help/user-management.mdx
+++ b/help/user-management.mdx
@@ -7,31 +7,39 @@ icon: "users"
## Subscribers
### What is a Subscriber?
+
A subscriber is an entity to which notifications are sent. It is a Novu term similar to a user in your system. As in your system, a user is identified by a unique id, similarly in Novu, a subscriber is identified by a unique id called `subscriberId`. We recommend that the existing value you use in your system as a `userId` to be used as `subscriberId` in Novu. Read more about subscribers on [subscribers documentation page](/subscribers/subscribers).
### Is it necessary to use subscriberId as same as userId?
+
No, it is not necessary to use subscriberId as same as userId. You can use any unique id as subscriberId. We recommend using userId as subscriberId to avoid any confusion. Some of our customers use a pattern like `auth0|userId` as a value for `subscriberId`.
### Can notification be sent without adding a Subscriber?
+
No, a notification cannot be sent without adding a subscriber. A subscriber is an entity to which notifications are sent. You need to add a subscriber to Novu before triggering the workflow or inline of trigger. Read more about subscribers on [subscribers documentation page](/subscribers/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](/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.
You can add your existing users as subscribers in Novu using [bulk create subscriber creation method](/subscribers/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.
+
+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.
### 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).
### Can two subscribers with different `subscriberId`s have the same email address?
+
Yes, it is possible for two subscribers to have the same email address in our system. This is because the `subscriberId` is the unique identifier that distinguishes one subscriber from another. Even if two subscribers share the same email address, they will have different `subscriberId`s, which allows our system to identify and manage them separately.
## Topics
### Can a Subscriber be added to multiple topics at once?
-Currently, Novu supports adding a subscriber to only one topic at a time. You can add a subscriber to multiple topics by calling the [add subscriber to topic api](/api-reference/topics/subscribers-addition) multiple times with a particular topic key
\ No newline at end of file
+
+Currently, Novu supports adding a subscriber to only one topic at a time. You can add a subscriber to multiple topics by calling the [add subscriber to topic api](/api-reference/topics/subscribers-addition) multiple times with a particular topic key
diff --git a/images/how-to/feedback-review.png b/images/how-to/feedback-review.png
new file mode 100644
index 00000000..a438114a
Binary files /dev/null and b/images/how-to/feedback-review.png differ
diff --git a/images/how-to/invoice-receipt.png b/images/how-to/invoice-receipt.png
new file mode 100644
index 00000000..dfc55725
Binary files /dev/null and b/images/how-to/invoice-receipt.png differ
diff --git a/images/how-to/otp-email.png b/images/how-to/otp-email.png
new file mode 100644
index 00000000..40160da7
Binary files /dev/null and b/images/how-to/otp-email.png differ
diff --git a/images/how-to/otp-push.png b/images/how-to/otp-push.png
new file mode 100644
index 00000000..10432873
Binary files /dev/null and b/images/how-to/otp-push.png differ
diff --git a/images/how-to/otp-sms.png b/images/how-to/otp-sms.png
new file mode 100644
index 00000000..f29131b3
Binary files /dev/null and b/images/how-to/otp-sms.png differ
diff --git a/images/how-to/otp.png b/images/how-to/otp.png
new file mode 100644
index 00000000..fb33c715
Binary files /dev/null and b/images/how-to/otp.png differ
diff --git a/images/how-to/password-reset.png b/images/how-to/password-reset.png
new file mode 100644
index 00000000..e67ee34d
Binary files /dev/null and b/images/how-to/password-reset.png differ
diff --git a/images/how-to/recent-login-email.png b/images/how-to/recent-login-email.png
new file mode 100644
index 00000000..3a60f6bf
Binary files /dev/null and b/images/how-to/recent-login-email.png differ
diff --git a/images/how-to/recent-login-push.png b/images/how-to/recent-login-push.png
new file mode 100644
index 00000000..5d914d64
Binary files /dev/null and b/images/how-to/recent-login-push.png differ
diff --git a/images/how-to/recent-login.png b/images/how-to/recent-login.png
new file mode 100644
index 00000000..9f722a79
Binary files /dev/null and b/images/how-to/recent-login.png differ
diff --git a/images/how-to/shipping-confirmation.png b/images/how-to/shipping-confirmation.png
new file mode 100644
index 00000000..68e4b1ab
Binary files /dev/null and b/images/how-to/shipping-confirmation.png differ
diff --git a/images/how-to/shipping-order-confirmation.png b/images/how-to/shipping-order-confirmation.png
new file mode 100644
index 00000000..fb6a39ed
Binary files /dev/null and b/images/how-to/shipping-order-confirmation.png differ
diff --git a/notification-center/backend/methods.mdx b/inbox/backend/methods.mdx
similarity index 100%
rename from notification-center/backend/methods.mdx
rename to inbox/backend/methods.mdx
diff --git a/notification-center/client/angular.mdx b/inbox/client/angular.mdx
similarity index 87%
rename from notification-center/client/angular.mdx
rename to inbox/client/angular.mdx
index ae763798..dcbcc9da 100644
--- a/notification-center/client/angular.mdx
+++ b/inbox/client/angular.mdx
@@ -11,15 +11,9 @@ The `@novu/notification-center-angular` package provides an Angular component
@@ -200,6 +201,7 @@ Now, that we know which property needs to change, all we need to do is pass an o {({ unseenCount }) =>
@@ -77,19 +76,18 @@ function Novu() {
```
## Notification center without bell
+
If you don't want to show the bell icon, you can directly render the notification center component without passing the bell, use `
-
-
-**There are 3 ways to show the avatar images in the notifications:**
-
-
- 
-
-
-### User Avatar
-This option will show the avatar of the actor user. actor field can be sent while triggering the worklfow. Each subscriber has `avatar` field. For this option to work actor should have `avatar` field set with valid publicly accessible image URL. If the actor doesn't have `avatar` field, then the default avatar will be shown. Worklfow trigger example with avatar
-
-```javascript
-await novu.trigger('
@@ -54,7 +54,8 @@ To copy `feedIdentifier` (`storeId`) click on the feed name of existing feeds. c
+
+ {" "}
+
## Storing webhook url on subscriber entity
@@ -33,15 +35,16 @@ import {
const novu = new Novu("
-4. You can either add the `Add to Slack` button or use the `Shareable URL` directly, in the application you'll be using Novu in.
-{" "}
+
+4. You can either add the `Add to Slack` button or use the `Shareable URL` directly, in the application you'll be using Novu in.
+ 
-8. Then you'll be redirected to the address you chose in the [Integration Store](https://web.novu.co/integrations?utm_campaign=docs-integrations-slack):
-
-{" "}
+
+8. Then you'll be redirected to the address you chose in the [Integration Store](https://dashboard.novu.co/integrations?utm_campaign=docs-integrations-slack):
+
+ {" "}
+
+ 
-{" "}
+
+
+
+ {" "}
+
2. Click on the 'Add New Webhook to Workspace':
-
+
+ {" "}
+
3. Now, go ahead and select the channel in which you want to send notifications and click 'allow'.
-
+
+ {" "}
+
4. Then, copy the 'webhookUrl' from Slack.
-
+
+ {" "}
+
5. Now, you need to save the `webhookUrl` on the relevant subscriber entity in Novu. Here's an example to do the same using our Node SDK:
## Update credential webhookUrl
@@ -91,12 +124,13 @@ import {
const novu = new Novu("
+
+
+
- Click "Add a new bot" button in "Bots" tab.
-
+
+ {" "}
+
- Set bot type as "Incoming webhook".
-
+
+ {" "}
+
- Click the small link icon to generate webhook URL for provider. Set Integration as `Slack compatible webhook`, choose your channel and copy webhook URL.
-
+
+ {" "}
+
## Connecting our subscribers to Zulip
@@ -48,12 +56,13 @@ import {
const novu = new Novu("{" "}
+
+
+## Novu SMS Provider
+
+And this is what the default Novu SMS provider looks like:
+
+
+ {" "}
+
+
+{" "}
+
+
+It is the only provider for the in-app channel and it _can be used in production apps_. Unlike sms and email, it is not active by default and needs to be turned on separately. It can be scaled as per your need and it is a 'pay as you go' offering. You can check [this](https://novu.co/pricing/?utm_campaign=docs-default-providers) for more details.
+
+## Limits of the Novu Providers
+
+Following are the limits for our email and sms providers:
+
+1. Email: 300 emails per organization per month
+2. SMS: 20 messages per organization per month
+
+To send more than these limits, you can configure a different provider for a specific channel.
diff --git a/channels-and-providers/email/amazon-ses.mdx b/integrations/providers/email/amazon-ses.mdx
similarity index 74%
rename from channels-and-providers/email/amazon-ses.mdx
rename to integrations/providers/email/amazon-ses.mdx
index dc8980ad..dcf31ecf 100644
--- a/channels-and-providers/email/amazon-ses.mdx
+++ b/integrations/providers/email/amazon-ses.mdx
@@ -1,6 +1,6 @@
---
-title: 'Amazon SES'
-description: 'Learn how to use the Amazon SES provider to send email notifications using Novu'
+title: "Amazon SES"
+description: "Learn how to use the Amazon SES provider to send email notifications using Novu"
---
You can use the [Amazon SES](https://aws.amazon.com/ses/) provider to send transactional emails to your customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -23,14 +23,16 @@ To use the Amazon SES provider in the email channel, you will need to create an
## Creating an SES integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-integrations-ses) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-integrations-ses) page on Novu.
- Click on Add a Provider.
- Select Amazon SES service.
- Enter previously saved `ACCESS_KEY_ID` and `ACCESS_SECRET_KEY`.
- Fill in the `From email address` field using the authenticated sender email id in the previous step.
- Enter `region` and `Sender name` also.
-{" "}
+
+
+## Providers
+
+Providers are what allow us to handle message delivery over multiple channels. Of the five notification channels that Novu currently supports, each channel except the ‘in-app’ channel has multiple providers.
+
+The Inbox channel only has one provider (the default Novu provider). All the remaining channels have multiple providers.
diff --git a/channels-and-providers/push/apns.mdx b/integrations/providers/push/apns.mdx
similarity index 76%
rename from channels-and-providers/push/apns.mdx
rename to integrations/providers/push/apns.mdx
index d5d25edd..501bdcfe 100644
--- a/channels-and-providers/push/apns.mdx
+++ b/integrations/providers/push/apns.mdx
@@ -1,7 +1,7 @@
---
-title: 'Apple Push Notification Service (APNS)'
-sidebarTitle: 'APNS'
-description: 'Learn how to use the Apple Push Notification Service (APNS) provider to send push notifications using Novu'
+title: "Apple Push Notification Service (APNS)"
+sidebarTitle: "APNS"
+description: "Learn how to use the Apple Push Notification Service (APNS) provider to send push notifications using Novu"
---
[Apple Push Notification Service](https://docs.expo.dev/push-notifications/overview/), as the name suggests, is a notification delivery service provided by Apple.
@@ -27,27 +27,27 @@ You also need the following to connect to APNs:
The overrides field supports all [Notification payload](https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server/generating_a_remote_notification?language=objc) values, as shown below:
```jsx
-import { Novu } from '@novu/node';
+import { Novu } from "@novu/node";
const novu = new Novu("
+
+ {" "}
+
- If you're a new user and don't have a team yet, you'll have to do so by clicking on New Team and entering your team name. Click on Save when you're done.
-
+
+ {" "}
+
- On the page that appears, click on the Create App button.
- On the pop-up that appears, enter your application name, username and select a country. Then click Save. The `username` is what you will use on the Novu platform.
-
+
+ {" "}
+
## Generating an API key
To generate a new API key, you can follow these steps:
-
-- On the page that appears, click on Settings(on the menu on your left). This will display a dropdown. Click on API Key from the dropdown options.
-
+{" "}
+
+- On the page that appears, click on Settings(on the menu on your left). This will
+display a dropdown. Click on API Key from the dropdown options.
+
+ {" "}
+
- On the page that appears, enter your password and click Generate.
-
-- Copy the API Key generated and paste it into the Novu platform or record it somewhere safe for later use because you will not see it from the dashboard on subsequent visits.
+
+ {" "}
+
+- Copy the API Key generated and paste it into the Novu platform or record it somewhere
+safe for later use because you will not see it from the dashboard on subsequent visits.
+
+ {" "}
+
- If you have not created one yet, on the `Shortcodes` dropdown option, click on `Request`.
-On the page that appears, fill in the form and submit.
-
-
+ On the page that appears, fill in the form and submit.
+
+ {" "}
+
## To create an Alphanumeric:
- On your app dashboard, click on SMS (on the menu on your left). This will display a dropdown. Click on `Alphanumerics` from the dropdown options. This will also display a dropdown from which you can then click on `My Alphanumerics` to view your codes.
-
+
+
+ {" "}
+
- If you have not created one yet, on the `Alphanumerics` dropdown option, click on `Request`.
-On the page that appears, fill in the form and submit
-
+ On the page that appears, fill in the form and submit
+
+ {" "}
+
- Once you're done, add either your short code or alphanumeric to the `from` field on the Novu platform.
## Creating an Africa's Talking integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-africastalking) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-africastalking) page on Novu.
- Click the "Add a provider" button.
- Locate **Africa's Talking** under the SMS section and click on the **Connect** button.
- Enter the `API key`.
@@ -76,4 +94,4 @@ On the page that appears, fill in the form and submit
- Click on the `Disabled` button and mark it as `Active`.
- Click on the **Connect** button.
-Now it is possible to send SMS notifications using Africa's Talking in Novu.
\ No newline at end of file
+Now it is possible to send SMS notifications using Africa's Talking in Novu.
diff --git a/channels-and-providers/sms/aws-sns.mdx b/integrations/providers/sms/aws-sns.mdx
similarity index 82%
rename from channels-and-providers/sms/aws-sns.mdx
rename to integrations/providers/sms/aws-sns.mdx
index 68f57d1e..fa4e6aaf 100644
--- a/channels-and-providers/sms/aws-sns.mdx
+++ b/integrations/providers/sms/aws-sns.mdx
@@ -1,6 +1,6 @@
---
-title: 'AWS SNS'
-description: 'Learn how to use the AWS SNS provider to send sms notifications using Novu'
+title: "AWS SNS"
+description: "Learn how to use the AWS SNS provider to send sms notifications using Novu"
---
You can use the [AWS SNS](https://aws.amazon.com/sns/) provider to send transactional emails to your customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -21,10 +21,10 @@ For security reasons, it is suggested that you create a new User to use with Nov
# Create an AWS SNS integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-sns) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-sns) page on Novu.
- Click the "Add a provider" button.
- Locate **Amazon SNS** and click on the **Connect** button.
- Enter your `Access Key ID`, `Secret Access key`, and `AWS region`.
- Click on the `Disabled` button and mark it as `Active`.
- Click on the **Save** button.
-- You should now be able to send SMS notifications using **Amazon SNS** in Novu.
\ No newline at end of file
+- You should now be able to send SMS notifications using **Amazon SNS** in Novu.
diff --git a/channels-and-providers/sms/azure.mdx b/integrations/providers/sms/azure.mdx
similarity index 80%
rename from channels-and-providers/sms/azure.mdx
rename to integrations/providers/sms/azure.mdx
index 0611850e..360dbf42 100644
--- a/channels-and-providers/sms/azure.mdx
+++ b/integrations/providers/sms/azure.mdx
@@ -1,6 +1,6 @@
---
-title: 'Azure SMS'
-description: 'Learn how to use the Azure SMS provider to send sms notifications using Novu'
+title: "Azure SMS"
+description: "Learn how to use the Azure SMS provider to send sms notifications using Novu"
---
You can use the [Azure SMS](https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/sms/send?tabs=windows&pivots=platform-azcli) SMS provider to send SMS messages to the customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -11,7 +11,7 @@ To use Azure SMS provider in the SMS channel, the first step is to create an Azu
# Creating a Azure SMS integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-azure) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-azure) page on Novu.
- Click the "Add a provider" button.
- Locate **Azure Sms** under the SMS section and click on the **Next** button.
- Select Your Environment add condition (Optional).
@@ -21,4 +21,4 @@ To use Azure SMS provider in the SMS channel, the first step is to create an Azu
- Enter the `From` value.
- Click on the **Update** button.
-Now it is possible to send SMS notifications using **Azure Sms** in Novu.
\ No newline at end of file
+Now it is possible to send SMS notifications using **Azure Sms** in Novu.
diff --git a/channels-and-providers/sms/bulk-sms.mdx b/integrations/providers/sms/bulk-sms.mdx
similarity index 78%
rename from channels-and-providers/sms/bulk-sms.mdx
rename to integrations/providers/sms/bulk-sms.mdx
index 191160c1..61d8722f 100644
--- a/channels-and-providers/sms/bulk-sms.mdx
+++ b/integrations/providers/sms/bulk-sms.mdx
@@ -1,6 +1,6 @@
---
-title: 'BulkSMS'
-description: 'Learn how to use the BulkSMS provider to send sms notifications using Novu'
+title: "BulkSMS"
+description: "Learn how to use the BulkSMS provider to send sms notifications using Novu"
---
You can use the [BurstSMS](https://bulksms.com/) provider to send SMS messages to the customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -11,7 +11,7 @@ To use BulkSMS provider in the SMS channel, the first step is to create a BulkSM
# Creating a BulkSMS integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-bulksms) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-bulksms) page on Novu.
- Click the "Add a provider" button.
- Locate **BulkSMS** under the SMS section and click on the **Next** button.
- Select Your Environment add condition (Optional).
@@ -20,4 +20,4 @@ To use BulkSMS provider in the SMS channel, the first step is to create a BulkSM
- Enter the `API Token`.
- Click on the **Update** button.
-Now it is possible to send SMS notifications using **BulkSMS** in Novu.
\ No newline at end of file
+Now it is possible to send SMS notifications using **BulkSMS** in Novu.
diff --git a/channels-and-providers/sms/burst-sms.mdx b/integrations/providers/sms/burst-sms.mdx
similarity index 82%
rename from channels-and-providers/sms/burst-sms.mdx
rename to integrations/providers/sms/burst-sms.mdx
index 7a20793d..00472210 100644
--- a/channels-and-providers/sms/burst-sms.mdx
+++ b/integrations/providers/sms/burst-sms.mdx
@@ -1,6 +1,6 @@
---
-title: 'BurstSMS'
-description: 'Learn how to use the BurstSMS provider to send sms notifications using Novu'
+title: "BurstSMS"
+description: "Learn how to use the BurstSMS provider to send sms notifications using Novu"
---
You can use the [BurstSMS](https://burstsms.com/) provider to send SMS messages to the customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -15,11 +15,11 @@ To find the BurstSMS API and Secret key, log into the personal BurstSMS account
# Creating a BurstSMS integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-burstsms) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-burstsms) page on Novu.
- Click the "Add a provider" button.
- Locate **BurstSMS** under the SMS section and click on the **Next** button.
- Select Your Environment add condition (Optional)
- Click on the `Disabled` button and mark it as `Active`.
- Enter the `API key` and `API Secret`.
- Click on the **Upload** button.
-- Now it is possible to send SMS notifications using **BurstSMS** in Novu.
\ No newline at end of file
+- Now it is possible to send SMS notifications using **BurstSMS** in Novu.
diff --git a/channels-and-providers/sms/clickatell.mdx b/integrations/providers/sms/clickatell.mdx
similarity index 51%
rename from channels-and-providers/sms/clickatell.mdx
rename to integrations/providers/sms/clickatell.mdx
index df9ceeca..74d8b62b 100644
--- a/channels-and-providers/sms/clickatell.mdx
+++ b/integrations/providers/sms/clickatell.mdx
@@ -1,6 +1,6 @@
---
-title: 'Clickatell'
-description: 'Learn how to use the Clickatell provider to send sms notifications using Novu'
+title: "Clickatell"
+description: "Learn how to use the Clickatell provider to send sms notifications using Novu"
---
You can use the [Clickatell](https://www.clickatell.com/) provider to send SMS messages to your customers using the Novu Platform.
@@ -8,7 +8,7 @@ Let's see how to do it:
## Getting Started
-To use the [Clickatell](https://www.clickatell.com/) provider in the SMS channel, the first step is to [create a Clickatell account](https://www.clickatell.com/sign-up/) and add your API key to the Clickatell integration on the [Novu web dashboard](https://web.novu.co/integrations?utm_campaign=docs-sms-clickatell).
+To use the [Clickatell](https://www.clickatell.com/) provider in the SMS channel, the first step is to [create a Clickatell account](https://www.clickatell.com/sign-up/) and add your API key to the Clickatell integration on the [Novu web dashboard](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-clickatell).
## Retrieving your API Key
@@ -16,26 +16,43 @@ To find your Clickatell API key:
- [Sign up](https://www.clickatell.com/sign-up/) or [Login](https://app.clickatell.com/signin) to your Clickatell account.
- Click on the `My Workspace`, and then click `SMS` in Channels Section.
-
+
+
+ {" "}
+
- Click on the `New SMS Setup`.
-
+
+
+ {" "}
+
- Select `API` then `Messaging Type` and click Next.
-
+
+
+ {" "}
+
- Select `Basic HTTP API` then `create a new HTTP API` and click Next.
-
+
+
+ {" "}
+
- Now fill in all details and Click Next.
-
+
+
+ {" "}
+
- Copy the API key and click complete.
-
+
+ {" "}
+
## Create a Clickatell integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-clickatell) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-clickatell) page on Novu.
- Click the "Add a provider" button.
- Locate **Clickatell** under the SMS section and click on the **Connect** button.
- Enter your Clickatell API Key.
diff --git a/channels-and-providers/sms/clicksend.mdx b/integrations/providers/sms/clicksend.mdx
similarity index 83%
rename from channels-and-providers/sms/clicksend.mdx
rename to integrations/providers/sms/clicksend.mdx
index 2a93bcff..75553157 100644
--- a/channels-and-providers/sms/clicksend.mdx
+++ b/integrations/providers/sms/clicksend.mdx
@@ -1,6 +1,6 @@
---
-title: 'Clicksend'
-description: 'Learn how to use the Clicsend provider to send sms notifications using Novu'
+title: "Clicksend"
+description: "Learn how to use the Clicsend provider to send sms notifications using Novu"
---
You can use the [Clicksend](https://www.clicksend.com/in/) provider to send SMS messages to your customers using the Novu Platform.
@@ -8,7 +8,7 @@ Let's see how to do it:
# Getting Started
-To use the [Clicksend](https://www.clicksend.com/in/) provider in the SMS channel, the first step is to [create a Clicksend account](https://dashboard.clicksend.com/signup/step1) and add your API key to the Clicksend integration on the [Novu web dashboard](https://web.novu.co/integrations?utm_campaign=docs-sms-clicksend).
+To use the [Clicksend](https://www.clicksend.com/in/) provider in the SMS channel, the first step is to [create a Clicksend account](https://dashboard.clicksend.com/signup/step1) and add your API key to the Clicksend integration on the [Novu web dashboard](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-clicksend).
# Retrieving your API Key
@@ -18,7 +18,7 @@ To use the [Clicksend](https://www.clicksend.com/in/) provider in the SMS channe
# Create a Clicksend integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-clicksend) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-clicksend) page on Novu.
- Click on Add a Provider.
- Select Clicksend service.
- Choose your preferred deployment environment: `Development` or `Production`. Then Click the `Create` button.
diff --git a/channels-and-providers/sms/firetext.mdx b/integrations/providers/sms/firetext.mdx
similarity index 63%
rename from channels-and-providers/sms/firetext.mdx
rename to integrations/providers/sms/firetext.mdx
index bfaa5eb1..9b151ec3 100644
--- a/channels-and-providers/sms/firetext.mdx
+++ b/integrations/providers/sms/firetext.mdx
@@ -1,6 +1,6 @@
---
-title: 'Firetext'
-description: 'Learn how to use the firetext provider to send sms notifications using Novu'
+title: "Firetext"
+description: "Learn how to use the firetext provider to send sms notifications using Novu"
---
You can use the [firetext](https://www.firetext.co.uk) provider to send SMS messages to your customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -8,8 +8,8 @@ You can use the [firetext](https://www.firetext.co.uk) provider to send SMS me
## Getting Started
To use the firetext provider in the SMS channel, the first step is to create a firetext account and add your API key and Sender ID to the firetext integration on the Novu platform.
-- Note : Firetext is only available in uk region. Others may require additional verification.
+- Note : Firetext is only available in uk region. Others may require additional verification.
## Retrieving your API Key
@@ -17,18 +17,25 @@ To find your firetext API key:
- [Sign up](https://app.firetext.co.uk/signup) or [Login](https://app.firetext.co.uk/) to your firetext account.
- Click on the `Settings` icon in the top right corner of the screen.
-
+
+
+ {" "}
+
- Now Click on the `API` in `My Settings` Section.
-
-- On the API Keys page, copy the `API key`.
-
+
+ {" "}
+
+- On the API Keys page, copy the `API key`.
+
+ {" "}
+
## Create a firetext integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-firetxt) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-firetxt) page on Novu.
- Click the "Add a provider" button.
- Locate **firetext** under the SMS section and click on the **Connect** button.
- Enter your `firetext` API Key.
diff --git a/channels-and-providers/sms/gupshup.mdx b/integrations/providers/sms/gupshup.mdx
similarity index 82%
rename from channels-and-providers/sms/gupshup.mdx
rename to integrations/providers/sms/gupshup.mdx
index 77909c2f..5a6612ff 100644
--- a/channels-and-providers/sms/gupshup.mdx
+++ b/integrations/providers/sms/gupshup.mdx
@@ -1,6 +1,6 @@
---
-title: 'gupshup'
-description: 'Learn how to use the gupshup provider to send sms notifications using Novu'
+title: "gupshup"
+description: "Learn how to use the gupshup provider to send sms notifications using Novu"
---
You can use the [gupshup](https://www.gupshup.io/) provider to send SMS messages to your customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -16,7 +16,7 @@ To use the gupshup provider in the SMS channel, the first step is to create a gu
# Creating a gupshup integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-gupshup) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-gupshup) page on Novu.
- Click the "Add a provider" button.
- Locate **gupshup** under the SMS section and click on the **Connect** button.
- Enter the `User id`.
diff --git a/channels-and-providers/sms/infobip.mdx b/integrations/providers/sms/infobip.mdx
similarity index 67%
rename from channels-and-providers/sms/infobip.mdx
rename to integrations/providers/sms/infobip.mdx
index 78fd8960..8ae2e03a 100644
--- a/channels-and-providers/sms/infobip.mdx
+++ b/integrations/providers/sms/infobip.mdx
@@ -1,6 +1,6 @@
---
-title: 'Infobip - SMS'
-description: 'Learn how to use the Infobip provider to send sms notifications using Novu'
+title: "Infobip - SMS"
+description: "Learn how to use the Infobip provider to send sms notifications using Novu"
---
You can use the [Infobip](https://www.infobip.com/developers/) provider to send SMS messages to your customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -16,30 +16,38 @@ To Find a new API key in Infobip, you can follow these steps:
- [Sign up](https://www.infobip.com/signup) or [Log in](https://portal.infobip.com/login/) to your Infobip account.
- On the [Homepage](https://portal.infobip.com/homepage/), you'll see your API key.
-
+
+ {" "}
+
Alternatively, you can find the API key on the Developer Tools page.
- On the sidebar (on the left), click on `Developer Tools`.
- This will display a dropdown from which you can then click on `API Ksys` to view your API key.
-
+
+ {" "}
+
If you want to create an API key:
- Click on the `CREATE API KEY` button
- Fill the form
- Click on `GENERATE`
-
+
+ {" "}
+
## Finding the Base URL
To see your base URL, log in to the account. Once logged in, on the Homepage, you should see your base URL in this format: `xxxxx.api.infobip.com`.
-
+
+ {" "}
+
## Create an Infobip integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-infobip) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-infobip) page on Novu.
- Click the "Add a provider" button.
- Locate **Infobip** under the SMS section and click on the **Connect** button.
- Enter your Infobip API Key.
@@ -48,4 +56,4 @@ To see your base URL, log in to the account. Once logged in, on the Homepage, yo
- Click on the `Disabled` button and mark it as `Active`.
- Click on the **Connect** button.
-You should now be able to send SMS notifications using Infobip in Novu.
\ No newline at end of file
+You should now be able to send SMS notifications using Infobip in Novu.
diff --git a/channels-and-providers/sms/kannel.mdx b/integrations/providers/sms/kannel.mdx
similarity index 75%
rename from channels-and-providers/sms/kannel.mdx
rename to integrations/providers/sms/kannel.mdx
index 1b91c624..1f907863 100644
--- a/channels-and-providers/sms/kannel.mdx
+++ b/integrations/providers/sms/kannel.mdx
@@ -1,16 +1,16 @@
---
-title: 'Kannel'
-description: 'Learn how to use the Kannel sms provider to send sms notifications using Novu'
+title: "Kannel"
+description: "Learn how to use the Kannel sms provider to send sms notifications using Novu"
---
Before integrating Kannel with Novu, you should have Kannel set up and configured as an SMS gateway on your server. Let’s look at how you can do that:
# Setting up Kannel
-1. First, you need to install Kannel on your server. You can download it from the [official-website](https://www.kannel.org/download.shtml) or use a package manager specific to your operating system (e.g., apt-
+1. First, you need to install Kannel on your server. You can download it from the [official-website](https://www.kannel.org/download.shtml) or use a package manager specific to your operating system (e.g., apt-
get for Ubuntu, yum for CentOS, etc.).
2. Kannel's configuration is done through a file called kannel.conf. You need to edit this file to specify your SMS provider settings. Here's a basic configuration example:
-
+
```bash
group = smsc
smsc = smpp
@@ -23,31 +23,34 @@ Before integrating Kannel with Novu, you should have Kannel set up and configure
max-pending-submits = 10
allow-ip = "127.0.0.1"
```
+
Replace the placeholders (e.g., **YourSMSCID**, **SMSC_Hostname_or_IP**, **SMSC_Port**, **SMSC_System_Type**, **YourUsername**, and **YourPassword**) with the actual values provided by your SMS provider.
3. You can define services that will handle incoming and outgoing SMS messages. These services specify how Kannel should process SMS requests. Here's an example of an SMS service configuration:
-
- ```bash
+
+ ```bash
group = sendsms-user
username = YourUsername
password = YourPassword
concatenation = true
max-messages = 3
```
+
Adjust the settings to your needs.
4. Start Kannel with the following command:
-
- ```bash
- bearerbox /path/to/kannel.conf
- ```
- Make sure to replace /path/to/kannel.conf with the actual path to your Kannel configuration file.
+
+ ```bash
+ bearerbox /path/to/kannel.conf
+ ```
+
+ Make sure to replace /path/to/kannel.conf with the actual path to your Kannel configuration file.
# Creating a Kannel integration with Novu
- After setting up your Kannel, follow these steps to integrate with novu:
+After setting up your Kannel, follow these steps to integrate with novu:
-- Visit the [Integrations Store](https://web.novu.co/integrations?utm_campaign=docs-sms-kannel) on Novu.
+- Visit the [Integrations Store](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-kannel) on Novu.
- Click the "Add a provider" button.
- Select Kannel service.
- Choose your preferred deployment environment: `Development` or `Production`. Then Click the `Create` button.
@@ -57,24 +60,20 @@ Before integrating Kannel with Novu, you should have Kannel set up and configure
- **Port**: The port number through which Novu should communicate with Kannel (usually 13013, or a custom port you've configured in Kannel).
- **Username and Password**: If you've set up authentication for your Kannel SMS gateway, provide the username and password required for authentication:
- ```bash
- group = smsc
- smsc = smpp
- smsc-id = YourSMSCID
- host = SMSC_Hostname_or_IP
- port = SMSC_Port
- smsc-username = YourUsername
- smsc-password = YourPassword
- max-pending-submits = 10
- allow-ip = "127.0.0.1"
- ```
- In this example, **YourUsername** and **YourPassword** are the credentials you'd use for authentication.
+ ```bash
+ group = smsc
+ smsc = smpp
+ smsc-id = YourSMSCID
+ host = SMSC_Hostname_or_IP
+ port = SMSC_Port
+ smsc-username = YourUsername
+ smsc-password = YourPassword
+ max-pending-submits = 10
+ allow-ip = "127.0.0.1"
+ ```
+
+ In this example, **YourUsername** and **YourPassword** are the credentials you'd use for authentication.
- Fill in the `From` field.
- Click on the `Update` button.
- You should now be able to send notifications using Kannel in Novu.
-
-
-
-
-
diff --git a/channels-and-providers/sms/messagebird.mdx b/integrations/providers/sms/messagebird.mdx
similarity index 80%
rename from channels-and-providers/sms/messagebird.mdx
rename to integrations/providers/sms/messagebird.mdx
index 4008d21d..72b506b8 100644
--- a/channels-and-providers/sms/messagebird.mdx
+++ b/integrations/providers/sms/messagebird.mdx
@@ -1,6 +1,6 @@
---
-title: 'MessageBird'
-description: 'Learn how to use the messagebird provider to send sms notifications using Novu'
+title: "MessageBird"
+description: "Learn how to use the messagebird provider to send sms notifications using Novu"
---
You can use the [MessageBird](https://www.messagebird.com) provider to send SMS messages to your customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -11,7 +11,7 @@ To use the MessageBird provider in the SMS channel, the first step is to create
# Creating a MessageBird integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-messagebird) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-messagebird) page on Novu.
- Click the "Add a provider" button.
- Locate **MessageBird** under the SMS section. Click it and the **Next** button.
- Select Your Environment add condition (Optional).
@@ -20,4 +20,4 @@ To use the MessageBird provider in the SMS channel, the first step is to create
- Enter the `From` value.
- Click on the **Update** button.
-Now it is possible to send SMS notifications using **MessageBird** in Novu.
\ No newline at end of file
+Now it is possible to send SMS notifications using **MessageBird** in Novu.
diff --git a/channels-and-providers/sms/nexmo.mdx b/integrations/providers/sms/nexmo.mdx
similarity index 82%
rename from channels-and-providers/sms/nexmo.mdx
rename to integrations/providers/sms/nexmo.mdx
index 9d0a55ef..850e1519 100644
--- a/channels-and-providers/sms/nexmo.mdx
+++ b/integrations/providers/sms/nexmo.mdx
@@ -1,6 +1,6 @@
---
-title: 'Nexmo'
-description: 'Learn how to use the Nexmo provider to send sms notifications using Novu'
+title: "Nexmo"
+description: "Learn how to use the Nexmo provider to send sms notifications using Novu"
---
You can use the [Nexmo By Vonage](https://www.vonage.com/) provider to send SMS messages to your customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -15,11 +15,11 @@ First, [sign up for a Vonage account](https://ui.idp.vonage.com/ui/auth/login)
# Create a Nexmo integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-nexmo) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-nexmo) page on Novu.
- Click the "Add a provider" button.
- Locate **Nexmo** under the SMS section and click on the **Connect** button.
- Enter the `API key` and `API Secret`.
- Enter a valid `From` email address.
- Click on the `Disabled` button and mark it as `Active`.
- Click on the **Connect** button.
-- Now it is possible to send SMS notifications using **Nexmo** in Novu.
\ No newline at end of file
+- Now it is possible to send SMS notifications using **Nexmo** in Novu.
diff --git a/channels-and-providers/sms/overview.mdx b/integrations/providers/sms/overview.mdx
similarity index 90%
rename from channels-and-providers/sms/overview.mdx
rename to integrations/providers/sms/overview.mdx
index 9c3e535f..ff9cedd2 100644
--- a/channels-and-providers/sms/overview.mdx
+++ b/integrations/providers/sms/overview.mdx
@@ -3,11 +3,18 @@ title: "SMS Channel Overview"
sidebarTitle: "Overview"
description: "Learn the process of configuring and using sms providers with Novu"
---
+
import { MissingProvider } from "/snippets/missing-provider.mdx";
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.
-
+
## Configuring SMS providers
@@ -66,15 +73,16 @@ import { Novu } from '@novu/node';
const novu = new Novu('
-Alternatively, you can access the API key from the Accounts menu.
+
+
+ {" "}
+
+ Alternatively, you can access the API key from the Accounts menu.
- Scroll to the bottom of the sidebar (on the left) and click on `Accounts`.
- This will display a dropdown from which you can then click on `API keys & Webhooks` to view your API key.
-
+
+ {" "}
+
- On the API Keys page, copy the Public access key.
-
+
+ {" "}
+
## Get your Sender's ID
@@ -32,19 +39,24 @@ To get your Sender's ID:
- On the sidebar (on the menu on your left), click on `SMS`. This will display a dropdown. Click on `Sender ID` from the dropdown options.
- On the page that appears, you'll find a list of your Sender IDs
-
-If you have not created one yet:
+
+
+ {" "}
+
+ If you have not created one yet:
- Click on the `Create Sender ID` button to request a Sender ID.
- Fill in the form.
- Click on `Add Sender ID` button.
-
+
+ {" "}
+
Once it is approved, you can use your Sender ID as the from field on the Novu platform.
## Create a Sendchamp integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-sendchamp) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-sendchamp) page on Novu.
- Click the "Add a provider" button.
- Locate **Sendchamp** under the SMS section and click on the **Connect** button.
- Enter your Sendchamp API Key.
@@ -52,4 +64,4 @@ Once it is approved, you can use your Sender ID as the from field on the Novu
- Click on the `Disabled` button and mark it as `Active`.
- Click on the **Connect** button.
-Now it is possible to send SMS notifications using **Sendchamp** in Novu.
\ No newline at end of file
+Now it is possible to send SMS notifications using **Sendchamp** in Novu.
diff --git a/channels-and-providers/sms/simpletexting.mdx b/integrations/providers/sms/simpletexting.mdx
similarity index 76%
rename from channels-and-providers/sms/simpletexting.mdx
rename to integrations/providers/sms/simpletexting.mdx
index 6875c9ba..49ba86f7 100644
--- a/channels-and-providers/sms/simpletexting.mdx
+++ b/integrations/providers/sms/simpletexting.mdx
@@ -1,6 +1,6 @@
---
-title: 'SimpleTexting'
-description: 'Learn how to use the SimpleTexting provider to send sms notifications using Novu'
+title: "SimpleTexting"
+description: "Learn how to use the SimpleTexting provider to send sms notifications using Novu"
---
You can use the [SimpleTexting](https://simpletexting.com/) SMS provider to send SMS messages to the customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -11,7 +11,7 @@ To use SimpleTexting provider in the SMS channel, the first step is to create a
# Creating a SimpleTexting integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-simpletexting) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-simpletexting) page on Novu.
- Click the "Add a provider" button.
- Locate **SimpleTexting** under the SMS section and click on the **Next** button.
- Select Your Environment add condition (Optional).
@@ -21,4 +21,4 @@ To use SimpleTexting provider in the SMS channel, the first step is to create a
- Enter the `From` value.
- Click on the **Update** button.
-Now it is possible to send SMS notifications using **SimpleTexting** in Novu.
\ No newline at end of file
+Now it is possible to send SMS notifications using **SimpleTexting** in Novu.
diff --git a/channels-and-providers/sms/sms-central.mdx b/integrations/providers/sms/sms-central.mdx
similarity index 78%
rename from channels-and-providers/sms/sms-central.mdx
rename to integrations/providers/sms/sms-central.mdx
index 1a324e95..719be3d8 100644
--- a/channels-and-providers/sms/sms-central.mdx
+++ b/integrations/providers/sms/sms-central.mdx
@@ -1,25 +1,23 @@
---
-title: 'SMS Central'
-description: 'Learn how to use the SMS Central provider to send sms notifications using Novu'
+title: "SMS Central"
+description: "Learn how to use the SMS Central provider to send sms notifications using Novu"
---
You can use the [SMS Central](https://www.smscentral.com.au/) provider to send SMS messages to your customers using the Novu platform with a single API to create multi-channel experiences.
-
# Getting Started
To use the SMS Central provider in the sms channel, you will need to create a SMS Central account and add your SMS Central `Username` & `Password` to the SMS Central integration on the Novu platform.
-
# Creating the SMS Central integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-smscentral) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-smscentral) page on Novu.
- Click the "Add a provider" button.
- Select SMS Central service
- Click `Next`
- Choose your preferred deployment environment: `Development` or `Production`. Then Click the `Create` button.
- Add `Username` & `Password`
-- Fill up the `From` section with the number you wish to send sms from.
+- Fill up the `From` section with the number you wish to send sms from.
- Click on the `Disabled` button and mark it as `Active`.
- Click on the **Update** button.
-- You should now be able to send notifications using SMS Central in Novu.
\ No newline at end of file
+- You should now be able to send notifications using SMS Central in Novu.
diff --git a/channels-and-providers/sms/sms77.mdx b/integrations/providers/sms/sms77.mdx
similarity index 81%
rename from channels-and-providers/sms/sms77.mdx
rename to integrations/providers/sms/sms77.mdx
index 8aaaa3fe..386dba88 100644
--- a/channels-and-providers/sms/sms77.mdx
+++ b/integrations/providers/sms/sms77.mdx
@@ -1,6 +1,6 @@
---
-title: 'SMS77'
-description: 'Learn how to use the SMS77 provider to send sms notifications using Novu'
+title: "SMS77"
+description: "Learn how to use the SMS77 provider to send sms notifications using Novu"
---
It is possible to use the [SMS77](https://www.sms77.io/en) provider to send SMS messages to the customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -15,10 +15,10 @@ To find the SMS77 API key, log into the personal SMS77 account and navigate to t
# Creating an SMS77 integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-sms77) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-sms77) page on Novu.
- Click the "Add a provider" button.
- Locate **SMS77** under the SMS section and click on the **Connect** button.
- Enter the `API key`.
- Click on the `Disabled` button and mark it as `Active`.
- Click on the **Save** button.
-- Now it is possible to send SMS notifications using **SMS77** in Novu.
\ No newline at end of file
+- Now it is possible to send SMS notifications using **SMS77** in Novu.
diff --git a/channels-and-providers/sms/sns.mdx b/integrations/providers/sms/sns.mdx
similarity index 88%
rename from channels-and-providers/sms/sns.mdx
rename to integrations/providers/sms/sns.mdx
index cf1646a5..12f3ffb7 100644
--- a/channels-and-providers/sms/sns.mdx
+++ b/integrations/providers/sms/sns.mdx
@@ -1,6 +1,6 @@
---
-title: 'SNS'
-description: 'Learn how to use the SNS provider to send sms notifications using Novu'
+title: "SNS"
+description: "Learn how to use the SNS provider to send sms notifications using Novu"
---
You can use the [SNS](https://aws.amazon.com/sns/) provider to send transactional emails to your customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -16,10 +16,10 @@ Before you can use SNS as your SMS provider in the Novu platform, you'll need to
# Create an SNS integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations?utm_campaign=docs-sms-sns) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations?utm_campaign=docs-sms-sns) page on Novu.
- Click the "Add a provider" button.
- Choose your preferred deployment environment: `Development` or `Production`. Then Click the `Create` button.
- Enter your `Access Key ID`, `Secret Access key`, and `AWS region`.
- Click on the `Disabled` button and mark it as `Active`.
- Click on the `Update` button.
-- You should now be able to send SMS notifications using **SNS** in Novu.
\ No newline at end of file
+- You should now be able to send SMS notifications using **SNS** in Novu.
diff --git a/channels-and-providers/sms/telnyx.mdx b/integrations/providers/sms/telnyx.mdx
similarity index 90%
rename from channels-and-providers/sms/telnyx.mdx
rename to integrations/providers/sms/telnyx.mdx
index a562052d..d74ce65e 100644
--- a/channels-and-providers/sms/telnyx.mdx
+++ b/integrations/providers/sms/telnyx.mdx
@@ -1,6 +1,6 @@
---
-title: 'Telnyx'
-description: 'Learn how to use the Telnyx provider to send sms notifications using Novu'
+title: "Telnyx"
+description: "Learn how to use the Telnyx provider to send sms notifications using Novu"
---
You can use the [Telnyx](https://telnyx.com/) provider to send transactional emails to your customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -36,7 +36,7 @@ A valid from address must be a valid phone number in +E.164 format, a short code
# Creating a Telnyx integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations) page on the Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations) page on the Novu.
- Click the "Add a provider" button.
- Locate Telnyx and click on the **Connect** button.
- Enter your Telnyx API Key.
@@ -44,4 +44,4 @@ A valid from address must be a valid phone number in +E.164 format, a short code
- Enter the Valid From address.
- Click on the `Disabled` button and `mark it as Active`.
- Click on the **Save** button.
-- You should now be able to send notifications using Telnyx in Novu.
\ No newline at end of file
+- You should now be able to send notifications using Telnyx in Novu.
diff --git a/channels-and-providers/sms/termii.mdx b/integrations/providers/sms/termii.mdx
similarity index 70%
rename from channels-and-providers/sms/termii.mdx
rename to integrations/providers/sms/termii.mdx
index 96eb4953..c6523dae 100644
--- a/channels-and-providers/sms/termii.mdx
+++ b/integrations/providers/sms/termii.mdx
@@ -1,6 +1,6 @@
---
-title: 'Termii'
-description: 'Learn how to use the Termii provider to send sms notifications using Novu'
+title: "Termii"
+description: "Learn how to use the Termii provider to send sms notifications using Novu"
---
You can use the [Termii](https://termii.com/) provider to send SMS messages to your customers using the Novu Platform with a single API to create multi-channel experiences.
@@ -16,12 +16,17 @@ To find your Termii API key:
- [Sign up](https://accounts.termii.com/#/register) or [Login](https://accounts.termii.com/#/login) to your Termii account.
- Navigate to your [dashboard](https://accounts.termii.com/#/).
- Then scroll to the bottom of the page to find your API key.
-
-Alternatively, you can find the API key on the Settings page.
+
+
+ {" "}
+
+ Alternatively, you can find the API key on the Settings page.
- Scroll to the bottom of the sidebar (on the left) and click on settings.
- This will display a dropdown from which you can then click on `API Token` to view your API key.
-
+
+ {" "}
+
## Getting your Sender's ID
@@ -32,7 +37,9 @@ To get your Sender's ID:
- On the sidebar (on the menu on your left), click on `Rental`. This will display a dropdown. Click on `SMS Sender IDs` from the dropdown options.
- On the page that appears, you'll find a list of your Sender IDs
-
+
+ {" "}
+
If you have not created one yet:
@@ -40,11 +47,13 @@ If you have not created one yet:
- Fill in the form
- Click on `Save`
-
+
+ {" "}
+
## Creating a Termii integration with Novu
-- Visit the [Integrations](https://web.novu.co/integrations) page on Novu.
+- Visit the [Integrations](https://dashboard.novu.co/integrations) page on Novu.
- Click the "Add a provider" button.
- Locate **Termii** under the SMS section and click on the **Connect** button.
- Enter your Termii API Key.
@@ -52,4 +61,4 @@ If you have not created one yet:
- Click on the Disabled button and mark it as Active.
- Click on the **Connect** button.
-Now it is possible to send SMS notifications using **Termii** in Novu.
\ No newline at end of file
+Now it is possible to send SMS notifications using **Termii** in Novu.
diff --git a/channels-and-providers/sms/twilio.mdx b/integrations/providers/sms/twilio.mdx
similarity index 84%
rename from channels-and-providers/sms/twilio.mdx
rename to integrations/providers/sms/twilio.mdx
index 4a9a4268..2978dfdb 100644
--- a/channels-and-providers/sms/twilio.mdx
+++ b/integrations/providers/sms/twilio.mdx
@@ -1,6 +1,6 @@
---
-title: 'Twilio'
-description: 'Learn how to use the Twilio provider to send sms notifications using Novu'
+title: "Twilio"
+description: "Learn how to use the Twilio provider to send sms notifications using Novu"
---
You can utilize the [Twilio](https://www.twilio.com/) API to communicate with your customers using SMS messaging. Let’s look at how you can do that:
@@ -21,15 +21,15 @@ Irrespective of the language you use, the process is the same:
- Load the Account SID and Auth token into the code, using some sort of safe environment such as .env variables. Nobody should have access to this but you.
- Create a client object from Twilio that take the SID and Token as variables then create a message with the client.
- A message is an object that has three things:
- - that free number from earlier,
- - the number you would like to send to, and
- - a body message that you want to send through SMS.
+ - that free number from earlier,
+ - the number you would like to send to, and
+ - a body message that you want to send through SMS.
# Creating a Twilio integration with Novu
Creating a Twilio integration with Novu is quite simple. Just follow these steps:
-- Visit the [Integrations Store](https://web.novu.co/integrations) on Novu.
+- Visit the [Integrations Store](https://dashboard.novu.co/integrations) on Novu.
- Click the "Add a provider" button.
- Locate **Twilio** and click on the `Disabled` button and mark it as `Active`.
- Click on the **Connect** button.
@@ -43,14 +43,12 @@ Creating a Twilio integration with Novu is quite simple. Just follow these steps
To send a WhatsApps message with Twillio integration prefix the phone number of the subscriber with `whatsapp:` as shown below.
```ts
-await novu.trigger('
-
-
-
-
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
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.
+Go to the Firebase documentation website, go to docs here, and select Cloud Messaging.
We will follow this guide to set up cloud messaging inside the app.
You can read more about how Firebase Cloud Messaging works by reading their [official documentation](https://firebase.google.com/docs/cloud-messaging/ios/client).
-
+
+ {" "}
+
Go to iOS+ and click on the `Set up an Apple platforms client` section.
-
+
+ {" "}
+
The first thing that we need to do is add Firebase to our iOS app.
Let's create a new Firebase project inside of the console.
-
-
-
-
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
## Create a Firebase project
Select a name for your project.
-
+
+ {" "}
+
Then, add Google Analytics to the Firebase project.
-
+
+ {" "}
+
Here, you can select your Google account.
-
-
+
+ {" "}
+
+
+ {" "}
+
We will click on Add Firebase to your iOS app.
-
+
+ {" "}
+
We first need to add the bundle name, so go to your iOS Xcode project and copy and paste the bundle name.
-
-
+
+ {" "}
+
+
+ {" "}
+
Download the `.plist` file and put it in the root of your project.
-
-
+
+ {" "}
+
+
+ {" "}
+
You can put it right under `info.plist` file.
-
+
+ {" "}
+
We need to add the Firebase SDK using the Swift package manager.
-Copy this https://github.com/firebase/firebase-ios-sdk URL and then go to 'File` -> `Add Package Dependencies...`.
+Copy this https://github.com/firebase/firebase-ios-sdk URL and then go to 'File`->`Add Package Dependencies...`.
Paste that URL in the top right.
-
-
-
-
-
-
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
We must add the initialization code to the `AppDelegates.swift` file.
@@ -102,8 +158,9 @@ 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
@@ -150,67 +207,97 @@ 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
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).
+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
+## Register for Remote Notifications
-
+
+ {" "}
+
1. Copy this code block and place it inside the `AppDelegate.swift` file using the `didFinishLaunchingWithOptions` method.
-We paste this code block under `firebaseApp.configure()`.
-
+ We paste this code block under `firebaseApp.configure()`.
2. We need to conform to this delegate, so we will also create an `AppDelegate` extension at the bottom for `UNUserNotificationCenterDelegate`.
@@ -237,9 +324,9 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
FirebaseApp.configure()
-
+
// Register for Remote Notitifcations
-
+
UNUserNotificationCenter.current().delegate = self
let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
@@ -250,7 +337,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
application.registerForRemoteNotifications()
-
+
return true
}
@@ -272,7 +359,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
}
extension AppDelegate: UNUserNotificationCenterDelegate {
-
+
}
```
@@ -281,12 +368,18 @@ 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
@@ -311,9 +404,9 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
FirebaseApp.configure()
FirebaseConfiguration.shared.setLoggerLevel(.min)
-
+
// Register for Remote Notitifcations
-
+
UNUserNotificationCenter.current().delegate = self
let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
@@ -323,12 +416,12 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
)
application.registerForRemoteNotifications()
-
+
// Messaging Delegate
-
+
Messaging.messaging().delegate = self
-
+
return true
}
@@ -350,7 +443,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
}
extension AppDelegate: UNUserNotificationCenterDelegate {
-
+
// Receive displayed notifications for iOS 10 devices.
func userNotificationCenter(_ center: UNUserNotificationCenter,
willPresent notification: UNNotification) async
@@ -382,14 +475,14 @@ extension AppDelegate: UNUserNotificationCenterDelegate {
print(userInfo)
}
}
-
+
extension AppDelegate: MessagingDelegate {
-
+
func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
print("Firebase registration token: \(String(describing: fcmToken))")
-
+
let dataDict: [String: String] = ["token": fcmToken ?? ""]
NotificationCenter.default.post(
name: Notification.Name("FCMToken"),
@@ -399,8 +492,8 @@ extension AppDelegate: MessagingDelegate {
// TODO: If necessary send token to application server.
// Note: This callback is fired at each app startup and whenever a new token is generated.
}
-
-
+
+
}
```
@@ -411,7 +504,9 @@ extension AppDelegate: MessagingDelegate {
2. Add the `didReceiveRemoteNotification`.
3. We must declare a `gcmMessageIDKey` inside of `AppDelegate`. We can define this as a `string` variable.
-
+
+ {" "}
+
```Swift
@@ -428,7 +523,7 @@ import FirebaseMessaging
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
-
+
let gcmMessageIDKey = "gcm.Message_ID"
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
@@ -436,9 +531,9 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
FirebaseApp.configure()
FirebaseConfiguration.shared.setLoggerLevel(.min)
-
+
// Register for Remote Notitifcations
-
+
UNUserNotificationCenter.current().delegate = self
let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
@@ -448,12 +543,12 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
)
application.registerForRemoteNotifications()
-
+
// Messaging Delegate
-
+
Messaging.messaging().delegate = self
-
+
return true
}
@@ -475,7 +570,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
}
extension AppDelegate: UNUserNotificationCenterDelegate {
-
+
// Receive displayed notifications for iOS 10 devices.
func userNotificationCenter(_ center: UNUserNotificationCenter,
willPresent notification: UNNotification) async
@@ -506,7 +601,7 @@ extension AppDelegate: UNUserNotificationCenterDelegate {
// Print full message.
print(userInfo)
}
-
+
func application(_ application: UIApplication,
didReceiveRemoteNotification userInfo: [AnyHashable: Any]) async
-> UIBackgroundFetchResult {
@@ -528,16 +623,16 @@ extension AppDelegate: UNUserNotificationCenterDelegate {
return UIBackgroundFetchResult.newData
}
-
+
}
-
+
extension AppDelegate: MessagingDelegate {
-
+
func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
print("Firebase registration token: \(String(describing: fcmToken))")
-
+
let dataDict: [String: String] = ["token": fcmToken ?? ""]
NotificationCenter.default.post(
name: Notification.Name("FCMToken"),
@@ -547,82 +642,121 @@ extension AppDelegate: MessagingDelegate {
// TODO: If necessary send token to application server.
// Note: This callback is fired at each app startup and whenever a new token is generated.
}
-
-
+
+
}
```
## Adding app capabilities
-
+
+ {" "}
+
Click on the plus sign (+) and select `Background Modes`.
-
+
+ {" "}
+
**Select the following options:**
-- Background Fetch
+
+- Background Fetch
- Remote Notifications
- Background Processing
-
+
+ {" "}
+
Add `Push Notifications` capabilities.
-
+
+ {" "}
+
## App Build
-
+
+ {" "}
+
It will ask if you want to receive notifications, and we will allow it.
-
+
+ {" "}
+
## Cloud Message Test
In your Firebase project, navigate to 'engage' section and click on 'messaging'.
-
+
+ {" "}
+
Click on "Send your first message".
-
-
+
+ {" "}
+
+
+ {" "}
+
We're going to enter the `notification title` and the `notification text`, then we're going to send the test message.
-
+
+ {" "}
+
We must copy and paste this FCM registration token to confirm our device (A physical or a simulator). You can find it in your Xcode console.
-
-
-
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
Click on 'Test'.
-
+
+ {" "}
+
You should see the notification on your device!
-
+
+ {" "}
+
## Novu account creation
-
+
+ {" "}
+
You can immediately configure FCM as a Push channel provider or navigate to the Integration Store.
-
+
+ {" "}
+
## Connecting FCM as a provider
-
-
+
+ {" "}
+
+
+ {" "}
+
-You only need to configure FCM with Novu with the Firebase Service Accounts private key.
+You only need to configure FCM with Novu with the Firebase Service Accounts private key.
To acquire the account key JSON file for your service account, follow this instructions:
@@ -652,17 +786,27 @@ Make sure your service account key JSON content contains these fields:
```
-
-
-
-
-
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
## Creating a workflow
In Novu, creating a workflow means establishing a blueprint for sending notifications within your app. This unified structure ties together email, in-app messages, SMS, push notifications, and chat into **one entity**.
-Each workflow has a unique name and identifier and includes customized content for various channels, using `{{handlebars}}` variables for personalization.
+Each workflow has a unique name and identifier and includes customized content for various channels, using `{{handlebars}}` variables for personalization.
This ensures consistent platform notifications and allows dynamic adjustments for individual subscribers, scenarios, and use cases.
@@ -670,14 +814,22 @@ Workflow creation is for streamlining automated notifications, enabling teams to
- 
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
@@ -742,7 +897,7 @@ Creating a subscriber in Novu refers to the process of establishing a subscriber
"providerId":"fcm"
}'
-```
+````
@@ -750,7 +905,7 @@ Creating a subscriber in Novu refers to the process of establishing a subscriber
## Sending a notification to iOS device with Novu
-To send a notification with Novu, you are actually triggering a notification workflow.
+To send a notification with Novu, you are actually triggering a notification workflow.
You have the ability to test the trigger using the user interface or by calling Novu's API.
**Trigger a workflow via the API**
@@ -770,8 +925,9 @@ curl --location --request POST 'https://api.novu.co/v1/events/trigger' \
```
-
-
+
+ {" "}
+
## Dynamic Content
@@ -780,9 +936,11 @@ When we were creating the first workflow, we "Hardcoded" the content of the noti
Now, we will determine the content when calling the API.
1. In the workflow, we should change the values of the `title` and the `body` to `{{title}}` and `{{body}}`.
-That way, we could insert values through the payload of the API call.
+ That way, we could insert values through the payload of the API call.
-
+
+ {" "}
+
2. Add a 'payload' object to the API call.
@@ -804,11 +962,13 @@ curl --location --request POST 'https://api.novu.co/v1/events/trigger' \
```
-
+
+ {" "}
+
## Sound of a notification
-The name of a sound file in your app's main bundle or in the Library/Sounds folder of your app's container directory.
+The name of a sound file in your app's main bundle or in the Library/Sounds folder of your app's container directory.
Specify the string "default" to play the system sound.
Use this key for regular notifications. For critical alerts, use the sound dictionary instead.
@@ -887,32 +1047,45 @@ curl --location --request POST 'https://api.novu.co/v1/events/trigger' \
Up to this point, your notifications have all contained only text. But if you’ve received many notifications, you know that notifications can have rich content, such as images. It’d be great if your notifications showed users a nice image related to their content. Once again, Firebase makes this super simple.
-To show an image in push notifications, you’ll need to create a ***Notification Service Extension***. This is a separate target in your app that runs in the background when your user receives a push notification. The service extension can receive a notification and change its contents before iOS shows the notification to the user.
-You’ll use Firebase to send an image URL inside a notification.
+To show an image in push notifications, you’ll need to create a **_Notification Service Extension_**. This is a separate target in your app that runs in the background when your user receives a push notification. The service extension can receive a notification and change its contents before iOS shows the notification to the user.
+You’ll use Firebase to send an image URL inside a notification.
You’ll then use a content extension to download the image and add it to the notification’s content.
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.
-Open your app’s project settings and select the name you picked for the extention under Targets.
+When you added the Firebase package to your project, it was only added to the your "main" (In my case it's "PushNotificationDemo") target, so now you need to add the necessary dependency to your new extension.
+Open your app’s project settings and select the name you picked for the extention under Targets.
Under Frameworks and Libraries, select the + button, and search for FirebaseMessaging. Then, select Add. Your project should reflect the image below:
-
+
+ {" "}
+
Select the + button, and search for FirebaseMessaging. Then, select Add.
-
-
+
+ {" "}
+
+
+ {" "}
+
Now, open `NotificationService.swift`. This file is where you can customize notifications before the user sees them.
@@ -925,11 +1098,11 @@ Next, replace the contents of `didReceive(_:withContentHandler:)` with the fol
self.contentHandler = contentHandler
bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
-
+
if let bestAttemptContent = bestAttemptContent {
// Modify the notification content here...
bestAttemptContent.title = "\(bestAttemptContent.title)"
-
+
// Call FIRMessaging extension helper API.
if let messagingContentHandler = self.contentHandler {
@@ -939,10 +1112,10 @@ Messaging.serviceExtension().populateNotificationContent(bestAttemptContent, wit
```
-Typically, you’d have to search the field containing the image URL, download the image, and finish the presentation with the picture as an attachment.
+Typically, you’d have to search the field containing the image URL, download the image, and finish the presentation with the picture as an attachment.
Here, you’re using Firebase’s `FIRMessagingExtensionHelper` to perform all that work automatically in a straightforward helper method call.
-Remember, iOS only allows you to download your attached image. If the extension’s code takes too long to run, the system will call `serviceExtensionTimeWillExpire()`.
+Remember, iOS only allows you to download your attached image. If the extension’s code takes too long to run, the system will call `serviceExtensionTimeWillExpire()`.
This gives you a chance to gracefully finish up anything you are doing in the extension or to simply present the notification as is, which is the default implementation.
This is the entire `NotificationService.swift` file.
@@ -965,21 +1138,21 @@ class NotificationService: UNNotificationServiceExtension {
var bestAttemptContent: UNMutableNotificationContent?
override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
-
+
self.contentHandler = contentHandler
bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
-
+
if let bestAttemptContent = bestAttemptContent {
// Modify the notification content here...
bestAttemptContent.title = "\(bestAttemptContent.title)"
-
+
// Call FIRMessaging extension helper API.
if let messagingContentHandler = self.contentHandler {
Messaging.serviceExtension().populateNotificationContent(bestAttemptContent, withContentHandler: messagingContentHandler)
}
}
}
-
+
override func serviceExtensionTimeWillExpire() {
// Called just before the extension will be terminated by the system.
// Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
@@ -994,14 +1167,16 @@ class NotificationService: UNNotificationServiceExtension {
Let's **rebuild** our app again!
-
+
+ {" "}
+
When making the API call, we should include:
+
- "mutable-content": 1 inside the "aps" object.
-- "image" in "fcm_options" object,
+- "image" in "fcm_options" object,
- URL address of the image.
-
```JSON
curl --location --request POST 'https://api.novu.co/v1/events/trigger' \
@@ -1035,15 +1210,19 @@ curl --location --request POST 'https://api.novu.co/v1/events/trigger' \
```
-
-
+
+ {" "}
+
+
+ {" "}
+
## Sending actionable notifications
1. Define Notification Actions:
-In your `AppDelegate.swift` file, you should define the notification actions you want to add.
-You can do this by creating a `UNNotificationAction` for each action you want to include.
+In your `AppDelegate.swift` file, you should define the notification actions you want to add.
+You can do this by creating a `UNNotificationAction` for each action you want to include.
For example, let's add two actions: "Accept" and "Reject".
```Swift
@@ -1056,7 +1235,7 @@ extension UNNotificationAction {
title: "Accept",
options: [.foreground]
)
-
+
static let reject = UNNotificationAction(
identifier: "REJECT_ACTION",
title: "Reject",
@@ -1066,35 +1245,36 @@ extension UNNotificationAction {
```
-2. Register Notification Category:
-
- You need to register the notification category with the actions you defined in your `didFinishLaunchingWithOptions` method:
+2. Register Notification Category:
- ```
- func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
- // ... (your existing code)
-
- // Register notification category
- let acceptAction = UNNotificationAction.accept
- let rejectAction = UNNotificationAction.reject
-
- let messageCategory = UNNotificationCategory(
- identifier: "MESSAGE_CATEGORY",
- actions: [acceptAction, rejectAction],
- intentIdentifiers: [],
- options: []
- )
-
- UNUserNotificationCenter.current().setNotificationCategories([messageCategory])
+ You need to register the notification category with the actions you defined in your `didFinishLaunchingWithOptions` method:
- return true
-}
+ ```
+ func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+ // ... (your existing code)
-```
+ // Register notification category
+ let acceptAction = UNNotificationAction.accept
+ let rejectAction = UNNotificationAction.reject
+
+ let messageCategory = UNNotificationCategory(
+ identifier: "MESSAGE_CATEGORY",
+ actions: [acceptAction, rejectAction],
+ intentIdentifiers: [],
+ options: []
+ )
+
+ UNUserNotificationCenter.current().setNotificationCategories([messageCategory])
+
+ return true
+
+ }
+
+````
3. Handle Action Taps:
-Now, you need to handle the action taps in the `userNotificationCenter(_:didReceive response:)` method of your `AppDelegate`.
+Now, you need to handle the action taps in the `userNotificationCenter(_:didReceive response:)` method of your `AppDelegate`.
You can check which action was tapped by inspecting the `response.actionIdentifier` property:
```Swift
@@ -1117,7 +1297,7 @@ func userNotificationCenter(_ center: UNUserNotificationCenter,
}
}
-```
+````
Your full `AppDelegate.swift` file should look like this:
@@ -1136,7 +1316,7 @@ import FirebaseMessaging
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
-
+
let gcmMessageIDKey = "gcm.Message_ID"
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
@@ -1144,9 +1324,9 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
FirebaseApp.configure()
FirebaseConfiguration.shared.setLoggerLevel(.min)
-
+
// Register for Remote Notitifcations
-
+
UNUserNotificationCenter.current().delegate = self
let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
@@ -1156,25 +1336,25 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
)
application.registerForRemoteNotifications()
-
+
// Register notification category
let acceptAction = UNNotificationAction.accept
let rejectAction = UNNotificationAction.reject
-
+
let messageCategory = UNNotificationCategory(
identifier: "MESSAGE_CATEGORY",
actions: [acceptAction, rejectAction],
intentIdentifiers: [],
options: []
)
-
+
UNUserNotificationCenter.current().setNotificationCategories([messageCategory])
-
+
// Messaging Delegate
-
+
Messaging.messaging().delegate = self
-
+
return true
}
@@ -1196,7 +1376,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
}
extension AppDelegate: UNUserNotificationCenterDelegate {
-
+
// Receive displayed notifications for iOS 10 devices.
func userNotificationCenter(_ center: UNUserNotificationCenter,
willPresent notification: UNNotification) async
@@ -1218,7 +1398,7 @@ extension AppDelegate: UNUserNotificationCenterDelegate {
func userNotificationCenter(_ center: UNUserNotificationCenter,
didReceive response: UNNotificationResponse) async {
let userInfo = response.notification.request.content.userInfo
-
+
if response.actionIdentifier == UNNotificationAction.accept.identifier {
// Handle the "Accept" action
print("User tapped Accept")
@@ -1239,10 +1419,10 @@ extension AppDelegate: UNUserNotificationCenterDelegate {
// Print full message.
print(userInfo)
-
-
+
+
}
-
+
func application(_ application: UIApplication,
didReceiveRemoteNotification userInfo: [AnyHashable: Any]) async
-> UIBackgroundFetchResult {
@@ -1260,22 +1440,22 @@ extension AppDelegate: UNUserNotificationCenterDelegate {
// Print full message.
print(userInfo)
-
-
+
+
return UIBackgroundFetchResult.newData
}
-
+
}
-
+
extension AppDelegate: MessagingDelegate {
-
+
func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
print("Firebase registration token: \(String(describing: fcmToken))")
-
+
let dataDict: [String: String] = ["token": fcmToken ?? ""]
NotificationCenter.default.post(
name: Notification.Name("FCMToken"),
@@ -1285,8 +1465,8 @@ extension AppDelegate: MessagingDelegate {
// TODO: If necessary send token to application server.
// Note: This callback is fired at each app startup and whenever a new token is generated.
}
-
-
+
+
}
extension UNNotificationAction {
@@ -1295,7 +1475,7 @@ extension UNNotificationAction {
title: "Accept",
options: [.foreground]
)
-
+
static let reject = UNNotificationAction(
identifier: "REJECT_ACTION",
title: "Reject",
@@ -1336,8 +1516,9 @@ curl --location --request POST "https://api.novu.co/v1/events/trigger" \
```
-
-
+
+ {" "}
+
## Additional resources
diff --git a/guides/add-digest-to-email-notifications.mdx b/legacy-guides/add-digest-to-email-notifications.mdx
similarity index 73%
rename from guides/add-digest-to-email-notifications.mdx
rename to legacy-guides/add-digest-to-email-notifications.mdx
index 1f52a1e3..35f816a5 100644
--- a/guides/add-digest-to-email-notifications.mdx
+++ b/legacy-guides/add-digest-to-email-notifications.mdx
@@ -1,6 +1,6 @@
---
-title: 'How to Add Digest to Email Notifications'
-description: 'Leverage the digest functionality to send email notifications'
+title: "How to Add Digest to Email Notifications"
+description: "Leverage the digest functionality to send email notifications"
---
# Introduction
@@ -9,9 +9,10 @@ In this guide, you’ll learn how to add digest functionality to email notificat
You can find the entire code(frontend as well as backend) for this app [here](https://github.com/novuhq/digest-email-app).
-
-Once you click the `create workflow` button, you’ll see a dropdown. Select `blank workflow` from the dropdown:
-
-You’ll now be taken to the workflow editor:
-
-Once here, you can add the channels you want to use for sending notifications and configure them. For this guide, we’ll use the `Email` channel. You’ll also see the `Digest` action on the right sidebar.
-
+
+ {" "}
+
+ Once you click the `create workflow` button, you’ll see a dropdown. Select `blank
+ workflow` from the dropdown:
+
+ {" "}
+
+ You’ll now be taken to the workflow editor:
+
+ {" "}
+
+ Once here, you can add the channels you want to use for sending notifications
+ and configure them. For this guide, we’ll use the `Email` channel. You’ll also
+ see the `Digest` action on the right sidebar.
-The `digest` node allows you to set a specific time interval for when notifications should be sent:
-
-Once, you’ve configured it. Go ahead and configure the `email` channel as per your need:
-
+
+
+ {" "}
+
+The `digest` node allows you to set a specific time interval for when notifications
+should be sent:
+
+ {" "}
+
+Once, you’ve configured it. Go ahead and configure the `email` channel as per your
+need:
+
+ {" "}
+
Here’s a brief explanation of all the options:
- **1-Preview:** This shows you a glimpse of what the email notification item will look like when delivered to the client.
@@ -71,7 +90,10 @@ Here’s a brief explanation of all the options:
You can write your own digest template in the 'custom code' section or just follow this guide as shown in the picture above. Once you’re done configuring this to your liking, click on the `update` button on the top right.
It’ll automatically create a trigger code that you can use in your app. To get it, click on the `get snippet` button on the top right and copy it:
-
+
+
+ {" "}
+
Now, let’s see how to add Novu to our app!
# Add Novu to the Backend and Configure it
@@ -86,26 +108,27 @@ npm install @novu/node
Now, create a route that you want to hit when called from the front end. In our demo app, this is the route:
```jsx
-import express from 'express';
+import express from "express";
-import { getEmailDigest } from '../controller/emaildigest.js';
+import { getEmailDigest } from "../controller/emaildigest.js";
const router = express.Router();
-router.post('/sending-email-digest', getEmailDigest);
+router.post("/sending-email-digest", getEmailDigest);
export default router;
```
+
Now, we need to write a controller function that will handle the logic for what is to be sent in the trigger function’s payload. In our case, this is the controller function:
```jsx
-import { sendEmailDigest } from '../novu/novu.js';
+import { sendEmailDigest } from "../novu/novu.js";
export const getEmailDigest = async (req, res) => {
const { notif, email } = req.body;
try {
await sendEmailDigest(notif, email);
- res.status(201).json({ message: 'success', notif: notif });
+ res.status(201).json({ message: "success", notif: notif });
} catch (error) {
res.status(409).json({ message: error.message });
}
@@ -116,13 +139,13 @@ To make it modular, we’ll keep the trigger code in a separate function in a se
If you’re following the guide, you’ve already copied the trigger function. But before we can add it to our app, we need one key thing - Subscribers.
-Subscribers are users to which the notifications are sent. You can see a list of subscribers in the [Novu dashboard](https://web.novu.co/subscribers?utm_campaign=docs-digests) as well.
+Subscribers are users to which the notifications are sent. You can see a list of subscribers in the [Novu dashboard](https://dashboard.novu.co/subscribers?utm_campaign=docs-digests) as well.
In our app, we’ll create a subscriber in Node.js as we’re writing our backend in Node.js, but we also have backend [SDKs](/sdks/introduction) ([Node.js](https://github.com/novuhq/novu/tree/next/packages/node), [PHP](https://github.com/novuhq/novu-php), [.NET](https://github.com/novuhq/novu-dotnet), [Elixir](https://github.com/novuhq/novu-elixir), [Go](https://github.com/novuhq/go-novu), [Ruby](https://github.com/novuhq/novu-ruby), [Python](https://github.com/novuhq/novu-python), and [Kotlin](https://github.com/novuhq/novu-kotlin)) to choose from. The recommended way to create a subscriber in NodeJS is as follows:
```jsx
-await novu.subscribers.identify('digestEmailSub', {
- firstName: 'digest email subscriber',
+await novu.subscribers.identify("digestEmailSub", {
+ firstName: "digest email subscriber",
email: email,
});
```
@@ -132,18 +155,18 @@ Here, we’re creating a subscriber with the `subscriberID` of `digestEmailSu
Back in our app, we can now add the trigger function:
```jsx
-import { Novu } from '@novu/node';
+import { Novu } from "@novu/node";
export const sendEmailDigest = async (notif, email) => {
const novu = new Novu(process.env.YOUR_NOVU_API_KEY);
- await novu.subscribers.identify('digestEmailSub', {
- firstName: 'digest email subscriber',
+ await novu.subscribers.identify("digestEmailSub", {
+ firstName: "digest email subscriber",
email: email,
});
- novu.trigger('emaildigestworkflow', {
+ novu.trigger("emaildigestworkflow", {
to: {
- subscriberId: 'digestEmailSub',
+ subscriberId: "digestEmailSub",
email: email,
},
payload: {
@@ -161,23 +184,23 @@ From the front end, we just need to hit the route we had defined above. Below, I
```jsx
const Body = () => {
- const [formInput, setFormInput] = useState({ notif: '', email: '' });
+ const [formInput, setFormInput] = useState({ notif: "", email: "" });
const [buttonClicked, setButtonClicked] = useState(false);
const onSubmitHandler = async (e) => {
e.preventDefault();
const response = await fetch(
- 'https://emaildigestbackend.onrender.com/api/v1/sending-email-digest',
+ "https://emaildigestbackend.onrender.com/api/v1/sending-email-digest",
{
- method: 'POST',
+ method: "POST",
headers: {
- 'Content-Type': 'application/json',
+ "Content-Type": "application/json",
},
body: JSON.stringify(formInput),
}
);
console.log(response.data);
- setFormInput({ notif: '' });
+ setFormInput({ notif: "" });
};
const handleClick = () => {
@@ -190,7 +213,8 @@ const Body = () => {
};
const onChangeHandler = (e) => {
- const value = e.target.name === 'email' ? e.target.value.trim() : e.target.value;
+ const value =
+ e.target.name === "email" ? e.target.value.trim() : e.target.value;
setFormInput((prev) => ({
...prev,
@@ -201,9 +225,9 @@ const Body = () => {
Email Digest Playground
- Don't know how to? Start{' '} + Don't know how to? Start{" "} - {' '} + {" "} here
@@ -247,8 +271,11 @@ We're hitting the backend route we had created earlier. The backend has been dep Congratulations on following the guide up until this point. We can style our app a little using [some TailwindCSS](https://github.com/novuhq/digest-email-app/blob/main/frontend/src/app.css). If you’ve done everything as recommended, you’ll end up with an app that looks like this: -
+
+
+ {" "}
+
In this app, when we enter the email id, some text in the input box, and click send, the notification appears in the inbox after the delay specified above (when we’re creating the workflow).
-This is how we add digest to email notifications!
\ No newline at end of file
+This is how we add digest to email notifications!
diff --git a/guides/add-digest-to-inapp-notifications.mdx b/legacy-guides/add-digest-to-inapp-notifications.mdx
similarity index 67%
rename from guides/add-digest-to-inapp-notifications.mdx
rename to legacy-guides/add-digest-to-inapp-notifications.mdx
index 56babcd9..08085f3f 100644
--- a/guides/add-digest-to-inapp-notifications.mdx
+++ b/legacy-guides/add-digest-to-inapp-notifications.mdx
@@ -1,6 +1,6 @@
---
-title: 'How to Add Digest to In-App Notifications'
-description: 'Leverage the digest functionality to send in-app notifications'
+title: "How to Add Digest to In-App Notifications"
+description: "Leverage the digest functionality to send in-app notifications"
---
## Introduction
@@ -19,7 +19,7 @@ A digest notification is a notification that consolidates information from sever
### 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://web.novu.co/workflows?utm_campaign=docs-digestsinapp).
+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-digestsinapp).
Let’s see it in action now!
@@ -27,7 +27,7 @@ Let’s see it in action now!
To get started with this, you need the following:
-- A Novu account. [Sign up for free](http://web.novu.co/?utm_campaign=docs-gs-digestsinapp) if you don’t have one yet.
+- A Novu account. [Sign up for free](http://dashboard.novu.co/?utm_campaign=docs-gs-digestsinapp) if you don’t have one yet.
- A working React development environment.
## Workflow setup in Novu
@@ -37,22 +37,42 @@ Once, you have these, follow the steps below:
1. Head over to the Novu Dashboard.
2. Click `Workflows` on the left sidebar of your Novu dashboard.
3. Click the `Create Workflow` button on the top right:
-
-Once you click the `create workflow` button, you’ll see a dropdown. Select `blank workflow` from the dropdown:
-
-You’ll now be taken to the workflow editor:
-
-Once here, you can add the channels you want to use for sending notifications and configure them. For this guide, we’ll use the `In-App` channel. You’ll also see the `Digest` action on the right sidebar.
+
+ {" "}
+
+ Once you click the `create workflow` button, you’ll see a dropdown. Select `blank
+ workflow` from the dropdown:
+
+ {" "}
+
+ You’ll now be taken to the workflow editor:
+
+ {" "}
+
+ Once here, you can add the channels you want to use for sending notifications
+ and configure them. For this guide, we’ll use the `In-App` channel. You’ll also
+ see the `Digest` action on the right sidebar.
-The `digest` node allows you to set a specific time interval for when notifications should be sent:
-
-Once, you’ve configured it. Go ahead and configure the `in-app` channel as per your need:
-
+For example, in our case, say we want the In-App notification to be sent after every
+6 hours. Next, add the `digest` action below the `trigger node`, and add the `in-app`
+channel node below the `digest` node as shown below:
+
+ {" "}
+
+The `digest` node allows you to set a specific time interval for when notifications
+should be sent:
+
+ {" "}
+
+Once, you’ve configured it. Go ahead and configure the `in-app` channel as per your
+need:
+
+ {" "}
+
Here’s a brief explanation of all the options:
- **1-Preview**: This shows you a glimpse of what each notification item will look like in the Notification Center UI.
@@ -63,10 +83,16 @@ Here’s a brief explanation of all the options:
- **6-Filter** - This feature allows you to configure the criteria for delivering notifications. For instance, you can apply a filter based on a subscriber's online status to send them an email if they were online within the last hour.
In our case, we’re going to use the following:
-
-Once you’re done configuring this to your liking, click on the `update` button on the top right.
-It’ll automatically create a trigger code that you can use in your app. To get it, click on the `get snippet` button on the top right and copy it:
-
+
+
+ {" "}
+
+Once you’re done configuring this to your liking, click on the `update` button on
+the top right. It’ll automatically create a trigger code that you can use in your
+app. To get it, click on the `get snippet` button on the top right and copy it:
+
+ {" "}
+
Now, let’s see how to add Novu to our app!
# Add Novu to the Backend and Configure it
@@ -76,28 +102,30 @@ In your backend, install the novu package using the following code:
```bash
npm install @novu/node
```
+
Now, create a route which you want to hit when called from the front end. In our demo app, this is the route:
```jsx
-import express from 'express';
-import { getDigest } from '../controller/digest.js';
+import express from "express";
+import { getDigest } from "../controller/digest.js";
const router = express.Router();
-router.post('/sending-digest', getDigest);
+router.post("/sending-digest", getDigest);
export default router;
```
Now, we need to write a controller function that will handle the logic for what is to be sent in the trigger function’s payload. In our case, this is the controller function:
+
```jsx
-import { sendDigest } from '../novu/novu.js';
+import { sendDigest } from "../novu/novu.js";
export const getDigest = async (req, res) => {
const { name } = req.body;
try {
await sendDigest(name);
- res.status(201).json({ message: 'success', name: name });
+ res.status(201).json({ message: "success", name: name });
} catch (error) {
res.status(409).json({ message: error.message });
}
@@ -108,13 +136,13 @@ To make it modular, we’ll keep the trigger code in a separate function in a se
If you’re following the guide, you’ve already copied the trigger function. But before we can add it to our app, we need one key thing - **Subscribers.**
-Subscribers are entities to which the notifications are sent. You can see a list of subscribers in the [Novu dashboard](https://web.novu.co/subscribers?utm_campaign=docs-digests-inapp) as well.
+Subscribers are entities to which the notifications are sent. You can see a list of subscribers in the [Novu dashboard](https://dashboard.novu.co/subscribers?utm_campaign=docs-digests-inapp) as well.
In our app, we’ll create a subscriber in Node.js as we’re writing our backend in Node.js, but we also have backend [SDKs](/sdks/introduction) (Node.js, PHP, .NET, Go, Ruby, Python and Kotlin) to choose from. The recommended way to create a subscriber in NodeJS is as follows:
```jsx
-await novu.subscribers.identify('aa234u787', {
- firstName: 'digest subscriber',
+await novu.subscribers.identify("aa234u787", {
+ firstName: "digest subscriber",
});
```
@@ -123,18 +151,18 @@ Here, we’re creating a subscriber with the `subscriberID` of `aa234u787.`
Back in our app, we can now add the trigger function:
```jsx
-import { Novu } from '@novu/node';
+import { Novu } from "@novu/node";
export const sendDigest = async (name) => {
const novu = new Novu(process.env.NOVU_API_KEY);
- await novu.subscribers.identify('aa234u787', {
- firstName: 'digest subscriber',
+ await novu.subscribers.identify("aa234u787", {
+ firstName: "digest subscriber",
});
- await novu.trigger('digest-showcase', {
+ await novu.trigger("digest-showcase", {
to: {
- subscriberId: 'aa234u787',
+ subscriberId: "aa234u787",
},
payload: {
name: name,
@@ -162,25 +190,27 @@ import {
PopoverNotificationCenter,
NotificationBell,
IMessage,
-} from '@novu/notification-center';
+} from "@novu/notification-center";
function Header() {
function onNotificationClick(message: IMessage) {
// your logic to handle the notification click
if (message?.cta?.data?.url) {
-window.location.href = message.cta.data.url;
+ window.location.href = message.cta.data.url;
}
}
return (
- Play with the digest engine!
- Don't know how to? Start here. + Don't know how to? Start{" "} + here.
-In this app, when we enter some text in the input box and click send, the notification appears in the bell icon after the delay specified above (when we’re creating the workflow).
-This is how we add digest to in-app notifications!
\ No newline at end of file
+
+ {" "}
+
+In this app, when we enter some text in the input box and click send, the notification
+appears in the bell icon after the delay specified above (when we’re creating the
+workflow).
+
+This is how we add digest to in-app notifications!
diff --git a/guides/cookbook/introduction.mdx b/legacy-guides/cookbook/introduction.mdx
similarity index 80%
rename from guides/cookbook/introduction.mdx
rename to legacy-guides/cookbook/introduction.mdx
index 1ef78e8e..76eeab5d 100644
--- a/guides/cookbook/introduction.mdx
+++ b/legacy-guides/cookbook/introduction.mdx
@@ -5,17 +5,20 @@ title: "Recipes"
This cookbook contains recipes and code samples demonstrating how to accomplish everyday tasks with Novu in your application. Each code example uses our libraries and SDKs.
-
+
-
## Fetch Subscriber Feed
A subscriber feed is a list of all In-App messages for a single subscriber. It's a continuous stream of messages displayed in a list that subscribers can scroll through on the frontend via the Notification Center.
It is a dynamic list with **seen** and **unseen** capabilities. Multiple feeds can exist for a subscriber.
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {" "}
+
2. Right-click the channel and select “Edit Channel”.
-
+
+ {" "}
+
3. Select Integrations -> Webhooks -> Create Webhook
-
+
+ {" "}
+
4. Edit the Bot name to your liking, copy the webhook URL and store it somewhere. We'll need it in the future.
-
+
+ {" "}
+
# Set up Novu
+
In this part, we'll set up a workflow that will be triggered when we send a notification. Workflows are like blueprints and hold the entire flow of notifications. You can read more about them on our [docs](https://docs.novu.co/workflows/notification-workflows). To set up a notification workflow for our app, follow these steps:
-1. Make sure that you've set the Discord Integration as active from the [Novu Integrations Store](https://web.novu.co/integrations?utm_campaign=docs-discordnotifications).
-
-2. Goto the [Novu Web Dashboard](https://web.novu.co/workflows?utm_campaign=docs-discordnotifications).
+
+1. Make sure that you've set the Discord Integration as active from the [Novu Integrations Store](https://dashboard.novu.co/integrations?utm_campaign=docs-discordnotifications).
+
+ {" "}
+
+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.
-
+
+ {" "}
+
4. Once there, give your workflow a name and drag and drop the 'chat' option below the 'workflow trigger' step.
-
+
+ {" "}
+
5. You can also add variables in the Workflow Editor. For example, here I've added 'chatMsg' as a variable as I'll be sending data using it.
-
-{" "}
+
+ 
-Now, we've completed all the setup required and can move to coding!
+
+ {" "}
+
+ Now, we've completed all the setup required and can move to coding!
# Create the backend
+
The backend for this app is quite simple. Simply install the Novu package:
+
```bash
npm install @novu/node
```
+
Now, create a route that you'll hit when called from the front end. For our demo app, this is the route I've created:
+
```jsx
import express from "express";
import { chatController } from "../controller/chat.js";
const router = express.Router();
-router.post("/sendChat",chatController);
+router.post("/sendChat", chatController);
export default router;
```
Now, we need a controller function to handle what is to be sent in the trigger's function payload. Here's the controller I wrote:
+
```jsx
-import { chat } from "../novu/novu.js"
+import { chat } from "../novu/novu.js";
export const chatController = async (req, res) => {
- const { chatMsg } = req.body;
- try {
- await chat(chatMsg);
- res.status(201).json({ message: "Message sent successfully" });
- } catch (error) {
- console.log("notifController error:", error);
- res.status(500).json({ message: error.message })
- }
-}
+ const { chatMsg } = req.body;
+ try {
+ await chat(chatMsg);
+ res.status(201).json({ message: "Message sent successfully" });
+ } catch (error) {
+ console.log("notifController error:", error);
+ res.status(500).json({ message: error.message });
+ }
+};
```
-
+
+ {" "}
+
-This is how we send Discord notifications using Novu!
\ No newline at end of file
+This is how we send Discord notifications using Novu!
diff --git a/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
similarity index 86%
rename from guides/fcm-flutter-novu/how-to-send-push-notifications-to-flutter-apps-with-fcm-using-Novu.mdx
rename to legacy-guides/fcm-flutter-novu/how-to-send-push-notifications-to-flutter-apps-with-fcm-using-Novu.mdx
index e28b3552..bae862f2 100644
--- a/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
@@ -1,6 +1,6 @@
---
-title: 'How to send push notifications to Flutter apps (Android & iOS) with FCM using Novu'
-description: 'Learn how to integrate Firebase Cloud Messaging with Novu and send notifications to Flutter apps'
+title: "How to send push notifications to Flutter apps (Android & iOS) with FCM using Novu"
+description: "Learn how to integrate Firebase Cloud Messaging with Novu and send notifications to Flutter apps"
---
## Prerequisites
@@ -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://web.novu.co/?utm_campaign=docs-gs-guides-fcm-flutter) account.
+- [Novu](https://dashboard.novu.co/?utm_campaign=docs-gs-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.
@@ -176,6 +176,7 @@ class _MyHomePageState extends State-
-
+
+ {" "}
+
Click on `Create your first campaign` and select `Firebase Notification messages`.
-
-
+
+ {" "}
+
+
+ {" "}
+
Enter the `Notification title` and the `Nabigateotification text`, and click on `Send test message`.
-
+
+ {" "}
+
We must copy and paste this FCM registration token to confirm our device. You can find it logged as shown earlier in our editor.
-
-
+
+ {" "}
+
+
+ {" "}
+
Click on 'Test'.
-
+
+ {" "}
+
You should see the notification on your device!
-
+
+ {" "}
+
Next, immediately configure FCM as a Push channel provider.
-
+
+ {" "}
+
You can also do this by heading straight to the `Integrations Store`. Click on `Add a provider`.
-## Connect FCM as a Push Channel provider
+## Connect FCM as a Push Channel provider
-
-
+
+ {" "}
+
+
+ {" "}
+
-You only need to configure FCM with Novu with the Firebase Service Accounts private key.
+You only need to configure FCM with Novu with the Firebase Service Accounts private key.
To acquire the account key JSON file for your service account, follow this instructions:
@@ -345,30 +370,48 @@ Make sure your service account key JSON content contains these fields:
```
-
-
-
-
-
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
## Create a Notification Workflow
In Novu, creating a workflow means establishing a blueprint for sending notifications within your app. This unified structure ties together email, in-app messages, SMS, push notifications, and chat into **one entity**.
-Each workflow has a unique name and identifier and includes customized content for various channels, using `{{handlebars}}` variables for personalization.
+Each workflow has a unique name and identifier and includes customized content for various channels, using `{{handlebars}}` variables for personalization.
This ensures consistent platform notifications and allows dynamic adjustments for individual subscribers, scenarios, and use cases.
-
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+