{
"version": 3,
"sources": ["ssg:https://framerusercontent.com/modules/zanwHA338SeRz3Y0dF79/bA1itqVMcGTG8vNm331D/qp7_CWH9V-4.js"],
"sourcesContent": ["import{jsx as e,jsxs as t}from\"react/jsx-runtime\";import{ComponentPresetsConsumer as n,Link as o}from\"framer\";import{motion as i}from\"framer-motion\";import*as a from\"react\";import{Youtube as r}from\"https://framerusercontent.com/modules/NEd4VmDdsxM3StIUbddO/bZxrMUxBPAhoXlARkK9C/YouTube.js\";import s from\"https://framerusercontent.com/modules/pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js\";export const richText=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/t(\"p\",{children:[\"Web push notifications are a powerful tool for keeping users engaged with web apps even when they're not actively using them. For a long time, developers using Apple devices have been \",/*#__PURE__*/e(o,{href:\"https://engagespot.co/blog/ios-web-push-notifications/%7B%7Bsite.url%7D%7D/blog/is-ios-safari-push-notifications-coming-in-ios-15/\",nodeId:\"qp7_CWH9V\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"waiting for iOS to support this feature\"})}),\". Finally, Apple has added support for web push notifications in iOS 16.4, which is great news for developers and users alike. This is a significant step forward for progressive web apps (PWAs) on iOS, as push notifications were previously a limiting factor for their adoption on Apple devices. With this new support, PWAs can now offer a more seamless and engaging user experience, helping to drive increased adoption and usage. However, websites cannot request for push notification unless you add them to your homescreen. \",/*#__PURE__*/e(\"strong\",{children:\"Here is how you can do that in iOS 16.4\"}),\" \"]}),/*#__PURE__*/e(\"p\",{children:\"Step 1: Open safari web browser, and navigate to your favorite website that supports web push notifications. \"}),/*#__PURE__*/e(\"p\",{children:'Step 2: Click the share button and choose \"Add to homescreen\" '}),/*#__PURE__*/e(\"p\",{children:\"Step3: Goto your homescreen, and click the new icon that has been added. \"}),/*#__PURE__*/e(\"p\",{children:\"Step4: Click on the button (or a CTA) where you usually click to subscribe to notifications. \"}),/*#__PURE__*/e(\"p\",{children:\"Step5: A push notification permission prompt appears. Just click allow and you're done!\"})]});export const richText1=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"When changing the password of any account or upon successfully signing up for any app, people immediately receive a confirmation mail. This is what we call transactional email. Transactional email services are crucial to any online business. They help in building a positive customer experience as well as brand loyalty. Welcome emails, password confirmation, password resets, order confirmation, etc., fall under transactional email services. Transactional email can be sent one person at a time. But that's not an issue. The real issue lies in finding the best transactional email service providers. Hence, we came up with this post to offer a better understanding of the same.\"}),/*#__PURE__*/e(\"h2\",{children:\"Best Transactional Email Providers in 2022\"}),/*#__PURE__*/e(\"p\",{children:\"Listed below are the top Email APIs that can deliver transactional email services much faster:\"}),/*#__PURE__*/e(\"h3\",{children:\"SendGrid\"}),/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(o,{href:\"https://sendgrid.com/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"SendGrid\"})}),\" started in 2009 as a simple email API but has now become a full-fledged platform offering a wide range of services, including transactional email services. There is also a range of email marketing tools that one can make use of. Being a cloud-based service, it is fast and reliable and comes with customisable integration. SendGrid comes with a mobile app, so one can easily share it with their team. It makes an excellent choice for users looking for an all-in-one service, including engagement tools, marketing automation and transactional email.\"]}),/*#__PURE__*/e(\"h4\",{children:\"Pricing:\"}),/*#__PURE__*/t(\"ul\",{style:{\"--framer-font-size\":\"20px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"10,000 emails for $14.95 per month\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"300,000 emails for $249 per month\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"1 million emails for $449 per month\"})})]}),/*#__PURE__*/e(\"h3\",{children:\"Hubspot\"}),/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(o,{href:\"https://hubspot.com/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Hubspot\"})}),\" email APIs are specially designed for marketers and offer plenty of features like forms, email marketing, landing pages, automation, etc. The platform gives the flexibility to opt for selected tools or use the platform as a whole. With its integration with the Hubspot CRM, you can customise your email campaigns to a great extent. With HubSpot\u2019s Transactional Email, you can send relationship-based emails to users. Send automated commerce receipts, account updates, and system messages with full engagement tracking across all of your emails with hubspot transactional email.\"]}),/*#__PURE__*/e(\"h3\",{children:\"Amazon SES\"}),/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(o,{href:\"https://aws.amazon.com/ses/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Amazon Simple Email Service\"})}),\" is a part of the Amazon Web Services Platform and is extremely cheap in terms of price. Amazon SES can help you save a lot of money. The email provider, however, relies heavily on manual work like processing spam complaints or providing email analytics. The platform can be used to \",/*#__PURE__*/e(o,{href:\"https://engagespot.co/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"send transactional notifications\"})}),\", marketing communications, and for receiving emails.\"]}),/*#__PURE__*/e(\"h4\",{children:\"Pricing:\"}),/*#__PURE__*/t(\"ul\",{style:{\"--framer-font-size\":\"20px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"60,000 emails for free After 60k,\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"10,000 emails for $1 per month\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"300,000 emails for $30 per month\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"1 million emails for $100 per month\"})})]}),/*#__PURE__*/e(\"h3\",{children:\"Postmark\"}),/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(o,{href:\"https://postmarkapp.com/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Postmark\"})}),\" is a highly reliable and extremely fast platform for sending transactional emails. It was introduced in 2009 and has come a long way since then. Postmark comes with pre-built email templates for welcome emails, password resets, trial expirations, user invitations, comment notifications and more, thus giving the users complete freedom to customise each template as per their needs. Furthermore, the platform does not mix promotional and transactional messages, thus protecting crucial emails. Postmark is the only email provider that shares delivery time publicly\"]}),/*#__PURE__*/e(\"h4\",{children:\"Pricing:\"}),/*#__PURE__*/t(\"ul\",{style:{\"--framer-font-size\":\"20px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"10,000 emails for $10 per month\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"300,000 emails for $200 per month\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"1 million emails for $535 per month\"})})]}),/*#__PURE__*/e(\"h3\",{children:\"Mandrill\"}),/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(o,{href:\"https://mandrillapp.com/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Mandrill\"})}),\" started as a transaction email provider by Mailchimp but now comes as an add-on for already existing \",/*#__PURE__*/e(o,{href:\"https://mailchimp.com/automations/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Mailchimp\"})}),\" users. For users having now Mailchimp account, it can appear a bit expensive. It comes with a searchable activity log and allows the users to customise the tracking options. The platform is heavily used for sending data-driven emails and personalised one-to-one messages. The pre-built dashboard makes it easier for the users to use this platform.\"]}),/*#__PURE__*/e(\"h4\",{children:\"Pricing:\"}),/*#__PURE__*/t(\"ul\",{style:{\"--framer-font-size\":\"20px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"10,000 emails for $20 per month + the price of your regular Mailchimp subscription\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"300,000 emails for $240 per month + the price of your regular Mailchimp subscription\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"1 million emails for $720 per month + the price of your regular Mailchimp subscription\"})})]}),/*#__PURE__*/e(\"h3\",{children:\"Mailgun\"}),/*#__PURE__*/t(\"p\",{children:[\"Over the years, \",/*#__PURE__*/e(o,{href:\"https://mailgun.com/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Mailgun\"})}),\" has been acquired by a lot of companies, including Pathwire at the beginning of 2021 and Sinch after that. It is now a part of a larger ecosystem of messaging services. Mailgun is specially meant for developers to help them send, receive and track emails. The flexible API makes it quite easier to integrate Mailgun into one's application. The platform is known to scale as per users' needs. Also, there is support for marketing campaign emails.\"]}),/*#__PURE__*/e(\"h4\",{children:\"Pricing:\"}),/*#__PURE__*/t(\"ul\",{style:{\"--framer-font-size\":\"20px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"10,000 emails for $8 per month\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"300,000 emails for $235 per month\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"1 million emails for $650 per month\"})})]}),/*#__PURE__*/e(\"h2\",{children:\"Conclusion\"}),/*#__PURE__*/t(\"p\",{children:[\"Email APIs have a big role to play in today's competitive market. Hence, no matter the nature of the business, one must invest in any of the transactional email service providers based on their requirements. The above-mentioned list features the best providers, both in terms of pricing and features, hence are good to go. If you're looking for a service to \",/*#__PURE__*/e(o,{href:\"https://engagespot.co/blog/top-six-transactional-email-services-in-2022/%7B%7Bsite.url%7D%7D/tools/disposable-email-detector\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"disposable email addressess\"})}),\", please check our tools section.\"]})]});export const richText2=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"Now you can use your AWS SES service as a provider in Engagespot to send email notifications.\"}),/*#__PURE__*/e(\"h2\",{children:\"What is AWS SES?\"}),/*#__PURE__*/e(\"p\",{children:\"Amazon SES is a cloud email service provider that can integrate into any application for bulk email sending. Amazon SES also supports a variety of deployments including dedicated, shared, or owned IP addresses. Reports on sender statistics and a deliverability dashboard help businesses make every email count.\"}),/*#__PURE__*/e(\"h2\",{children:\"AWS SES Pricing\"}),/*#__PURE__*/t(\"p\",{children:[\"Engagespot do not charge any additional cost to connect your AWS SES account. You just pay as per your SES usage. With the AWS free tier, you can send around 60k emails per month. To know more about SES pricing, refer \",/*#__PURE__*/e(o,{href:\"https://aws.amazon.com/ses/pricing/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"AWS SES Pricing\"})})]}),/*#__PURE__*/e(\"h2\",{children:\"How to connect AWS SES with Engagespot\"}),/*#__PURE__*/t(\"p\",{children:[\"The steps to configure AWS SES provider in your Engagespot account is described in our \",/*#__PURE__*/e(o,{href:\"https://documentation.engagespot.co/docs/channels/configuring-providers/email/ses\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"documentation\"})}),\". If you get an unauthorized error from AWS SES, refer \",/*#__PURE__*/e(o,{href:\"https://engagespot.co/blog/errors/amazon-ses-unauthorized-error-sendEmail-sendRawEmail/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"this guide\"})}),\".\"]})]});export const richText3=/*#__PURE__*/e(a.Fragment,{children:/*#__PURE__*/t(\"p\",{children:[\"With our built in notification preference center, your users can easily set notification preferences, right from the notification center. Engagespot is trying to build a \",/*#__PURE__*/e(o,{href:\"https://engagespot.co/product\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"complete notification system\"})}),\" for your product. And allowing users to manage their notification preference is an important part of a notification system. \",/*#__PURE__*/e(\"strong\",{children:\"How to enable preference center in your notification center\"}),\" If you're using our react component \",/*#__PURE__*/e(\"code\",{children:\"@engagespot/react-component\"}),\", just upgrade the package to the latest version and there you go. Open your notification center and you can see the notification preference center. If you're using the cdn hosted javascript library, you don't have to do anything because we've updated our cdn with the latest version of Engagespot library. \",/*#__PURE__*/e(\"strong\",{children:\"How to configure preference center for your users\"}),\" For the notification preference center to be useful, you should categorize notifications. You can use the \",/*#__PURE__*/e(\"code\",{children:\"category\"}),\" parameter in the send notifications API. (Unfortunately, creating and managing categories is available only through REST API operations currently, and not avaialble on the Engagespot dashboard.) When you create a category in your App, users will get the choice to select which notification channels to be enabled for a particular category. And whenever you send a notification with \",/*#__PURE__*/e(\"code\",{children:\"category\"}),\" parameter, it will check your user's preference for that particular category before delivering notifications to them. Detailed documentation on how to create and update categories in your App, please read \",/*#__PURE__*/e(o,{href:\"https://documentation.engagespot.co/docs/rest-api\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"REST API Doc\"})})]})});export const richText4=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/t(\"p\",{children:[\"We've launched our \",/*#__PURE__*/e(o,{href:\"https://bubble.io/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Bubble.io\"})}),\" plugin to help you add notifications to your Bubble app without writing a single line of code. \"]}),/*#__PURE__*/t(\"p\",{children:[\"Engagespot Bubble notifications plugin comes with a lot of features to add a \",/*#__PURE__*/e(o,{href:\"https://engagespot.co/product\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"complete notification system\"})}),\" to your product. \"]}),/*#__PURE__*/t(\"p\",{children:[\"The most important feature is the Notification Bell component that helps you to add a beautiful, customizable notification inbox feed to your Bubble App. Also, you can deliver notifications to app users via multiple channels like In-App, Push & Email, \",/*#__PURE__*/e(o,{href:{pathVariables:{j3iVCCRMx:\"how-to-send-push-notifications-with-bubble\"},unresolvedPathSlugs:{j3iVCCRMx:{collectionId:\"qp7_CWH9V\",collectionItemId:\"X7Ulf1Hkl\"}},webPageId:\"aHMdGbAdO\"},nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Web push notifications\"})}),\" etc, using a single workflow action. \"]}),/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Features\"}),\" \"]}),/*#__PURE__*/e(\"p\",{children:\"\uD83D\uDC49 Real-time notification feed for your app. \"}),/*#__PURE__*/e(\"p\",{children:\"\uD83D\uDC49 Best for apps with user-to-user interactions like Social Networks, Project Management Tools, CRM, etc.\"}),/*#__PURE__*/e(\"p\",{children:\"\uD83D\uDC49 Supports multiple notification channels - In-App, Web Push, Email \"}),/*#__PURE__*/e(\"p\",{children:\"\uD83D\uDC49 Connect your existing service providers like Mailgun, Sendgrid, SMTP \"}),/*#__PURE__*/e(\"p\",{children:\"\uD83D\uDC49 Allow users to set their notification preferences (coming soon).\"}),/*#__PURE__*/t(\"p\",{children:[\"You can view the plugin on \",/*#__PURE__*/e(o,{href:\"https://bubble.io/plugin/engagespot-notifications-1646149514133x734161642066018300\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Bubble Marketplace\"})}),\" Detailed documentation on how to configure notifications in your Bubble App, please read \",/*#__PURE__*/e(o,{href:\"https://documentation.engagespot.co/docs/bubble-io-plugin/using-engagespot-in-bubble-app\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Setting up notifications in Bubble App\"})})]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})})]});export const richText5=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/t(\"p\",{children:[\"Update April 2023] - \",/*#__PURE__*/e(o,{href:\"https://engagespot.co/blog/is-ios-safari-push-notifications-coming-in-ios-15/%7B%7Bsite.url%7D%7D/blog/ios-web-push-notifications\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Web push notification is now available in iOS 16.4.\"})}),\" \"]}),/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"[Update - November 2022]\"}),\" - Read - \",/*#__PURE__*/e(o,{href:\"https://engagespot.co/blog/is-ios-safari-push-notifications-coming-in-ios-15/%7B%7Bsite.url%7D%7D/blog/web-push-ios-safari-launch-2023\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"iOS Web push notifications confirmed by Apple\"})}),\". \"]}),/*#__PURE__*/e(\"p\",{children:\"Web Push Notifications in iOS Safari is one of the most awaited features by web developers. It's now been more than seven years since developers started waiting for Apple to implement the Push API. Fortunately, there are signs of Apple working on adding Push API support to iOS Safari in the next release (iOS 15.4). \"}),/*#__PURE__*/t(\"p\",{children:[\"As mentioned by Maximiliano Firtman in his \",/*#__PURE__*/e(o,{href:\"https://firt.dev/ios-15.4b/#web-push-notifications-on-ios%EF%BC%8Dwith-a-catch\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"blog\"})}),\", Apple has added support for Push API in the latest iOS release. But as per the report, the feature is not yet working. Probably Apple is working on adding web push notification support in Safari. It could still be in the early beta stages. It is still unclear if this feature would be released in iOS 15.4 or delayed further. \"]}),/*#__PURE__*/t(\"p\",{children:[\"Adding native web push notification support to iOS Safari will enable full support for Progressive Web Applications (PWA) experience in iPhone and iPad devices. Bookmark this page to stay updated about the latest updates about \",/*#__PURE__*/e(o,{href:\"https://engagespot.co/blog/how-to-add-web-push-notifications-in-react-app/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Web Push Notification\"})}),\" feature in iOS Safari.\"]})]});export const richText6=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Web Push Notifications\"}),/*#__PURE__*/e(\"p\",{children:\"Web push notification is an important feature for any web application. Along with Email, you should send important account related events to your users via Web Push channel. In this article, we'll learn how to add Web Push Notifications to a React app using Engagespot.\"}),/*#__PURE__*/e(\"h2\",{children:\"Create Your React App\"}),/*#__PURE__*/e(\"p\",{children:\"If you already have a ReactJS app, feel free to skip this section. Otherwise, you can create a new React app as follows\"}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:\"npx create-react-app engagespot-react\\ncd engagespot-react\",language:\"JSX\"})})}),/*#__PURE__*/e(\"h2\",{children:\"Get a FREE Engagespot API Key\"}),/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(o,{href:\"https://portal.engagespot.co/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Login\"})}),\" to your Engagespot account (or \",/*#__PURE__*/e(o,{href:\"https://portal.engagespot.co/auth/register\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"create one\"})}),\" if you donot have one). And you can see your \",/*#__PURE__*/e(\"strong\",{children:\"Engagespot API Key\"}),\". (Do not confuse with \",/*#__PURE__*/e(\"strong\",{children:\"ENGAGESPOT_API_SECRET\"}),\"). Copy your API Key.\"]}),/*#__PURE__*/e(\"h2\",{children:\"Add Service Worker to Your React App.\"}),/*#__PURE__*/t(\"p\",{children:[\"To enable web push, you should setup \",/*#__PURE__*/e(o,{href:\"https://developers.google.com/web/fundamentals/primers/service-workers\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"service worker\"})}),\" in your React App. Don't worry. It's a simple process. Let's do it. Create a \",/*#__PURE__*/e(\"code\",{children:\"service-worker.js\"}),\" file in your React app's public folder.\"]}),/*#__PURE__*/t(\"p\",{children:[\"Add the following text to the \",/*#__PURE__*/e(\"code\",{children:\"service-worker.js\"}),\" file and save it.\"]}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:\"importScripts('https://cdn.engagespot.co/serviceWorkerv2.js');\",language:\"JSX\"})})}),/*#__PURE__*/e(\"h2\",{children:\"Enable Web Push in Engagespot App\"}),/*#__PURE__*/e(\"p\",{children:\"By default, web push is disabled in your Engagespot app. After you've completed the above step, you should login to your Engagespot account, and enable web push under channels menu.\"}),/*#__PURE__*/e(\"h2\",{children:\"Add Engagespot Component to Your React App\"}),/*#__PURE__*/e(\"p\",{children:\"You've setup service workers and enabled web push in your Engagespot App. Now, let's give your user's the option to enable notifications in your React App. For that, we need to install Engagespot react component. Add the package to your React App via npm or yarn\"}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:\"npm i @engagespot/react-component\",language:\"JSX\"})})}),/*#__PURE__*/e(\"p\",{children:\"Now, import the component inside the source code, where you want the notification component to appear.\"}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:'import Engagespot from \"@engagespot/react-component\";',language:\"JSX\"})})}),/*#__PURE__*/e(\"p\",{children:\"Render the Notification component inside any existing React component. For example, a bell icon place holder, or a Navigation component etc.\"}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:'',language:\"JSX\"})})}),/*#__PURE__*/t(\"p\",{children:[\"Replace \",/*#__PURE__*/e(\"code\",{children:\"youruser@example.com\"}),\" with the variable where you store the unique user id of your app user. This can be their email id, or a UUID or any other unique identifier.\"]}),/*#__PURE__*/e(\"h2\",{children:\"That's it.\"}),/*#__PURE__*/e(\"p\",{children:\"The next time when you reload your app, you can see a bell icon on your app. And clicking on the bell icon will show you a prompt to enable web push notifications.\"})]});export const richText7=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/t(\"p\",{children:[\"In this tutorial, I\u2019ll show you how to add a realtime notification feed in your react web app. It is useful for apps where users collaborate. For example \u2014 Social networks, forums, project management tools or any app where user\u2019s interact through activities like comments, share, messages etc. Throughout this example, I\u2019ll consider the usecase of a dating app where people can send match requests, messages, like / comment on photos etc. And we should make the notification feed look cool by customizing the look and feel to match our app\u2019s theme. And we\u2019ll be using\\xa0\",/*#__PURE__*/e(o,{href:\"https://engagespot.co/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Engagespot\"})}),\"\\xa0to make this happen.Something like this!\"]}),/*#__PURE__*/e(\"h2\",{children:\"Objective\"}),/*#__PURE__*/e(\"p\",{children:\"We have three objectives -\"}),/*#__PURE__*/t(\"ol\",{style:{\"--framer-font-size\":\"20px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"To add a notification feed (like the one above) in our React app that updates in Realtime, shows unread notification count etc.\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[\"To send notifications to specific users programatically from our dating apps backend code. (For eg:\\xa0\",/*#__PURE__*/e(\"em\",{children:\"when someone comments on a user\u2019s photo\"}),\")\"]})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"To add support for browser notifications, so our users can be notified even while they\u2019re away.\"})})]}),/*#__PURE__*/e(\"h2\",{children:\"Prerequisites\"}),/*#__PURE__*/e(\"ol\",{style:{\"--framer-font-size\":\"20px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\"},children:/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Engagespot account (It\u2019s free to signup)\"})})}),/*#__PURE__*/e(\"h2\",{children:\"Step 1. Add Engagespot React Component to your existing app\"}),/*#__PURE__*/e(\"p\",{children:\"Install Engagespot React Component package which contains the pre-built UI Kit and all necessary bells and whistles needed to build a notification system.\"}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:\"npm i @engagespot/react-component\",language:\"JSX\"})})}),/*#__PURE__*/e(\"h2\",{children:\"Step 2. Import Engagespot React Component and Render\"}),/*#__PURE__*/e(\"p\",{children:\"We\u2019ll add the bell icon (and the notification feed) to the top right side of our app\u2019s navigation bar. Just like how Medium placed their bell icon.\"}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:'import Engagespot from \"@engagespot/react-component\";',language:\"JSX\"})})}),/*#__PURE__*/t(\"p\",{children:[\"I have a\\xa0\",/*#__PURE__*/e(\"strong\",{children:\"Bell\"}),\" component in my React app which I\u2019ve positioned properly in the app where I want the Engagespot notification feed to appear.\"]}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:\" \\n \\n \\n \\n ... \\n\",language:\"JSX\"})})}),/*#__PURE__*/t(\"p\",{children:[\"In the\\xa0\",/*#__PURE__*/e(\"strong\",{children:\"userId\"}),\" parameter, we should pass the email id (or any other unique identifier) of the user who is currently logged in to our app. Done! If you open your app now, You can see a bell icon, and clicking on it will open a full fledged notification center.\"]}),/*#__PURE__*/e(\"h2\",{children:\"Step 3. Customizing the Notification UI Kit\"}),/*#__PURE__*/t(\"p\",{children:[\"Now we should customize the look and feel of the notification center to match our dating app\u2019s theme. For that we should use the\\xa0\",/*#__PURE__*/e(\"strong\",{children:\"theme\"}),\" property of Engagespot component. Let\u2019s change few colors.\"]}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:\"...\\nconst theme = { \\n notificationButton: { \\n iconFill: '#5350f6', \\n }, \\n colors: { \\n brandingPrimary: '#5350f6', \\n colorSecondary: '#ecebfa', \\n }, \\n feedItem: { \\n hoverBackground: '#ecebfa', \\n }, \\n dropdown: { \\n hoverBackground: '#ecebfa', \\n menuItemHoverBackground: '#ecebfa', \\n }, \\n};\\n \\n \\n \\n \\n ... \\n\",language:\"JSX\"})})}),/*#__PURE__*/e(\"p\",{children:\"\uD83C\uDF89 Awesome!\"}),/*#__PURE__*/e(\"h2\",{children:\"Step 4. Sending notifications programatically from our node backend.\"}),/*#__PURE__*/e(\"p\",{children:\"So, In my dating app, I want to notify my users whenever someone sends them a match request. Let\u2019s open the code where we handle match requests.\"}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:\"/** Creates a new match request */\\nconst createMatchRequest = async (fromUser: User, toUser: User) => { \\n return await saveMatchRequestToDb(fromUser, toUser); \\n}\",language:\"JSX\"})})}),/*#__PURE__*/e(\"p\",{children:\"Here, we can add a simple api request to notify the user when they get a new match request.\"}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:'Notify user about a new match request **/ \\nconst notifyUserAboutNewMatchRequest = async (fromUser: User, toUser: User) => { \\n \\n return axios.post(\\'https://api.engagespot.co/v3/notifications\\', \\n { \\n \"notification\": { \\n \"title\": \"${fromUser.name} sent you a match request!\" \\n }, \\n \"recipients\": \"[\"+toUser.email+\"]\"\\n }, \\n { \\n headers:{ \\n \\'X-ENGAGESPOT-API-KEY\\':\\'ENGAGESPOT\\\\_API\\\\_KEY\\', \\n \\'X-ENGAGESPOT-API-SECRET\\':\\'ENGAGESPOT\\\\_API\\\\_SECRET\\', \\n } \\n })\\n }\\n Creates a new match request */\\nconst createMatchRequest = async (fromUser: User, toUser: User) => {\\n await notifyUserAboutNewMatchRequest(fromUser, toUser);\\n return await saveMatchRequestToDb(fromUser, toUser);\\n}',language:\"JSX\"})})}),/*#__PURE__*/e(\"p\",{children:\"That\u2019s done. Now whenever we try to send a match request to a user, they will get notified in their notification bell icon (or as a browser push). No matter how many devices they use, Engagespot will do all the task to make sure your user gets notified!\"}),/*#__PURE__*/e(\"h2\",{children:\"Conclusion\"}),/*#__PURE__*/t(\"p\",{children:[\"Now you\u2019ve implemented a complete notification center in few minutes to your dating app built in React and \",/*#__PURE__*/e(o,{href:\"https://www.toptal.com/nodejs#hiring-guide\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Node\"})}),\". Many more features are available in the Engagespot SDK. Make sure to checkout the\\xa0\",/*#__PURE__*/e(o,{href:\"https://documentation.engagespot.co/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"documentation\"})}),\"\\xa0to build even more more advanced features! Thanks for reading, and happy building better notifications, faster!\"]})]});export const richText8=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/t(\"p\",{children:[\"Sending templated emails are important because it helps us re-use the content, layout and make necessary modifications as needed. It is possible to use a library such as \",/*#__PURE__*/e(o,{href:\"https://engagespot.co/blog/how-to-send-email-notifications-with-sendgrid-dynamic-templates/%7B%7Bsite.url%7D%7D/blog/nodemailer-attachments-email-nodejs\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"nodemailer\"})}),\" to send such emails. But, in this article, we'll learn how to send email notifications using \",/*#__PURE__*/e(o,{href:\"https://sendgrid.com/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Sendgrid\"})}),\" dynamic email templates, so you don't have to harcode email content in your backend. We'll use Engagespot with Sendgrid provider to send emails with dynamic templates.\"]}),/*#__PURE__*/e(\"h2\",{children:\"Before we start\"}),/*#__PURE__*/e(\"p\",{children:\"Before we implement dynamic email template, make sure you have the following things\"}),/*#__PURE__*/t(\"ol\",{style:{\"--framer-font-size\":\"20px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\"},children:[/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Engagespot API_KEY and API_SECRET\"})}),/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/e(\"p\",{children:\"Sendgrid account & API_KEY\"})})]}),/*#__PURE__*/e(\"h2\",{children:\"Design a Dynamic Email Template\"}),/*#__PURE__*/t(\"p\",{children:[\"Let's login to Sendgrid and navigate to \",/*#__PURE__*/e(\"strong\",{children:\"Email API\"}),\" -> \",/*#__PURE__*/e(\"strong\",{children:\"Dynamic Templates\"}),\"Click \",/*#__PURE__*/e(\"strong\",{children:\"Create a Dynamic Template\"}),\", and give your template a name. For example - \",/*#__PURE__*/e(\"em\",{children:\"Welcome email template\"}),'Click on the newly created \"',/*#__PURE__*/e(\"strong\",{children:\"Welcome Email\"}),'\" template, and click on \"',/*#__PURE__*/e(\"strong\",{children:\"Add Version\"}),\"\\\"Let's choose the \",/*#__PURE__*/e(\"strong\",{children:\"Blank Design\"}),\"Choose the \",/*#__PURE__*/e(\"strong\",{children:\"Design Editor\"}),\" to edit our email templateLet's drag and drop few modules to build a simple template like thisWe've added a :::name::: placeholder, which we'll replace from our code. Now let's see how to pass data to this email template using Engagespot API.\"]}),/*#__PURE__*/e(\"h2\",{children:\"Send Email Notification From a Node.js Backend\"}),/*#__PURE__*/t(\"p\",{children:[\"We've designed an email template. Now let's setup Engagespot in our app and send a notification from our Node.js backend. First, we need to register our user's with Engagespot. In this example, we'll deliver the notification via In-App, Webpush and Email. For that, let's make use of Engagespot REST API. Make sure you've \",/*#__PURE__*/e(o,{href:\"https://documentation.engagespot.co/docs/channels/configuring-providers/email/sendgrid-provider\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"enabled Sendgrid Provider\"})}),\" on your Engagespot dashboard. You can send notification with the following code\"]}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:'{\\n \"notification\": {\\n \"title\": \"Rose accepted your friend request\"\\n },\\n \"category\":\"new_friend_request\",\\n \"data\":{\\n \"name\":\"Jack\",\\n },\\n \"recipients\": [\\n \"jack@example.com\"\\n ],\\n \"override\":{\\n \"channels\":[\"email\",\"inApp\"],\\n \"sendgrid_email:{\\n \"template_id\":\"tuj6Rfc3bCx37dFdslapqc78cbytG\"\\n }\\n }\\n}',language:\"JSX\"})})}),/*#__PURE__*/t(\"p\",{children:[\"If you notice, you can see that we're passing the \",/*#__PURE__*/e(\"strong\",{children:\"name\"}),\" in the data object, which will be sent to Sendgrid where it will be replaced in your template! Its simple as that. Now your notification will be delivered across two channels - Email and InApp.\"]})]});export const richText9=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/t(\"p\",{children:[\"Engagespot now supports Email Notifications. That means, the same notification you've been sending to your users through the In-App notification widget now will be delivered to your user's email too! We noticed that a lot of our users had to write their own code to handle notification delivery via other channels in addition to Engagespot In-App & Web Push. And building a \",/*#__PURE__*/e(o,{href:\"https://engagespot.co/#features\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Notification Preference Manager\"})}),\" for their users was even more difficult! We've finally launched the revamped version of Engagespot that supports notification delivery via multiple channels, along with a Notification Preference manager for your users.\"]}),/*#__PURE__*/e(\"h2\",{children:\"Multi Channel Delivery\"}),/*#__PURE__*/t(\"p\",{children:['A transactional notification needs to be delivered to your users via multiple channels. For example if you want to send a \"Free Trial Expiry Reminder\" notification such as \"',/*#__PURE__*/e(\"em\",{children:\"Hey, your free trial will expire in 4 days. Upgrade to continue using the service without interruption\"}),'\" to your users, you might consider sending it via Email, and also as an In-App notification, or even ',/*#__PURE__*/e(o,{href:\"https://engagespot.co/blog/introducing-email-notifications-and-other-features/%7B%7Bsite.url%7D%7D/blog/sms-api-providers-india\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"SMS\"})}),\". Now it's possible to send a notification to multiple channels, with one single API.Multi Channel Notification Workflow\"]}),/*#__PURE__*/e(\"h2\",{children:\"Notification Preference Manager for Your Users\"}),/*#__PURE__*/t(\"p\",{children:['Every app needs to send several notifications of transactional nature. Be it alerts about user interactions like - \"',/*#__PURE__*/e(\"em\",{children:\"Hey someone commented on your photo\"}),'\", or updates like \"',/*#__PURE__*/e(\"em\",{children:\"Your order #4573 has been shipped!\"}),'\", or security alerts like - \"',/*#__PURE__*/e(\"em\",{children:\"Unrecognized login from a new device at 12:00AM on 12th Jan, 2022\"}),\"\\\" You must give your user's the control to decide which notification they want to see, and through which channel. Some of them might need push notifications only for security related alerts and all other notification categories should be delivered via email. Users might block all notifications from you if we do not give them a fine graned notification preference manager. Engagespot allows you to quickly build a Notification Preference Manager to your users in minutes!How Twitter allows their user's to set their notification preferences.\"]}),/*#__PURE__*/e(\"h2\",{children:\"Support for Third Party Email Providers\"}),/*#__PURE__*/t(\"p\",{children:[\"Engagespot provides zero configuration channel providers for all channels which you can simply use out of the box. That means, when you start building your app, just plug in Engagespot, and you've got In-App, Push and Email Notifications built in! For advanced delivery, we support third party providers like \",/*#__PURE__*/e(o,{href:\"https://sendgrid.com/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Sendgrid\"})}),\". You can connect your existing Sendgrid API Key and leverage the power of their platform to power email notifications in your app.\"]}),/*#__PURE__*/e(\"h2\",{children:\"Built by Developers for Developers \u2764\uFE0F\"}),/*#__PURE__*/e(\"p\",{children:\"Engagespot is built for one purpose! To help developers focus their time and effort on what matters the most while leaving the complexities in building a great product notification system to us.\"}),/*#__PURE__*/e(\"h3\",{children:\"Easy to use APIs with extensive documentation\"}),/*#__PURE__*/t(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"POST\"}),\" - /notifications\"]}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:'\\n \"notification\": {\\n \"title\": \"Rose accepted your friend request \uD83C\uDF89\"\\n },\\n \"recipients\": [\\n \"jack@example.com\"\\n ],\\n \"override\": {\\n \"channels\": [\"email\",\"webPush\"]\\n }\\n}',language:\"JSX\"})})}),/*#__PURE__*/e(\"h3\",{children:\"Override Delivery Configurations via API\"}),/*#__PURE__*/e(\"p\",{children:\"You can override the default delivery settings via API, and even make use of all features supported by your email provider. For example, you can use Sendgrid Templates to deliver email notifications to your users!\"}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:'{\\n \"override\":{\\n \"channels\":[\"email\",\"inApp\"],\\n \"sendgrid_email\":{\\n \"_config\":{\\n \"API_KEY\":\"SG.jk6VcGa9nGsyt2nMop*#!GbxkKIhBxgf4HGMLXjHshs\"\\n },\\n \"templateId\":\"tu72hsxm9746hckDvC2PmmBCas\"\\n }\\n }\\n}',language:\"JSX\"})})}),/*#__PURE__*/e(\"h2\",{children:\"More Features on the way to build Better Notifications\"}),/*#__PURE__*/t(\"p\",{children:[\"We're working on some cool features to make product notifications better and easier for developers. We'll be soon adding support for new email providers like Amazon SES, Mailgun, Postmark etc, and support for Mobile Push via FCM, and extending the \",/*#__PURE__*/e(o,{href:\"https://engagespot.co/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Notification Center UI Component\"})}),\" to React Native and Flutter. Few of the features mentioned in this article are in closed beta. If you'd like to enable them in your account, just email us at \",/*#__PURE__*/e(o,{href:\"mailto:support@engagespot.co\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"support@engagespot.co\"})}),\". Also, do let us know if you have any suggestions to make product notifications even better. Don't have an account? \",/*#__PURE__*/e(o,{href:\"https://portal.engagespot.co/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Sign up\"})})]})]});export const richText10=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"We've launched Notification UI Kit for React that you can use to build a notification feed in your app powered by Reactjs.\"}),/*#__PURE__*/e(\"h2\",{children:\"Usage\"}),/*#__PURE__*/t(\"p\",{children:[\"Install \",/*#__PURE__*/e(o,{href:\"https://www.npmjs.com/package/@engagespot/react-component\",nodeId:\"qp7_CWH9V\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"react notification npm package\"})}),\" \"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:\"npm i @engagespot/react-component\",language:\"JSX\"})})}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:\"Then use the pre-built Engagespot component wherever you want the notification bell icon and feed to appear on your React app. Usually in the nav bar component, but it's your choice!\"}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:'import Engagespot from \"@engagespot/react-component\"; \\n \\n',language:\"JSX\"})})}),/*#__PURE__*/t(\"p\",{children:[\"It's simple as that! Also the SDK offers lot of powerful features like theme customizations, added security mechanisms, browser push notifications etc, which is explained in the \",/*#__PURE__*/e(o,{href:\"https://documentation.engagespot.co/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"docs\"})}),\".\"]})]});export const richText11=/*#__PURE__*/t(a.Fragment,{children:[/*#__PURE__*/t(\"p\",{children:[\"Hi Guys, I'm Anand, the main developer & founder of Engagespot. One of the reasons why I built Engagespot is to help other developers implement \",/*#__PURE__*/e(o,{href:\"https://engagespot.co/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"web push notifications in web apps\"})}),\" easier and without much complexities involved in backend development. In this article, I'll show how to send web push notifications to specific users. That is, how you can setup a user-specific \",/*#__PURE__*/e(o,{href:\"https://engagespot.co/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"web push notification\"})}),\" for your web application using Engagespot. This is a detailed explanation of the \",/*#__PURE__*/e(o,{href:\"https://www.quora.com/How-can-I-send-web-push-notifications-to-a-specific-user\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Quora answer written here\"})}),\".\"]}),/*#__PURE__*/e(\"h3\",{children:/*#__PURE__*/e(\"strong\",{children:\"What do you need?\"})}),/*#__PURE__*/e(\"ul\",{style:{\"--framer-font-size\":\"20px\",\"--framer-text-alignment\":\"start\",\"--framer-text-color\":\"rgb(209, 213, 219)\",\"--framer-text-transform\":\"none\"},children:/*#__PURE__*/e(\"li\",{\"data-preset-tag\":\"p\",children:/*#__PURE__*/t(\"p\",{children:[\"Engagespot API Key (\",/*#__PURE__*/e(o,{href:\"https://portal.engagespot.co/\",nodeId:\"qp7_CWH9V\",openInNewTab:!1,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Sign Up for a Free Push Notification API Key\"})}),\") I'll assume you have an Engagespot account and an API Key for your account\"]})})}),/*#__PURE__*/e(\"h3\",{children:/*#__PURE__*/e(\"strong\",{children:\"Add Engagespot Javascript SDK Code to Your Web App\"})}),/*#__PURE__*/t(\"p\",{children:[\"You need to add this code to all pages (or the one common head include file), where you want the web push notification prompt and the notification bell icon to appear. Make sure to copy this script below the closing \",/*#__PURE__*/e(\"code\",{children:\"\"}),\" tag.\"]}),/*#__PURE__*/e(i.div,{className:\"framer-text-module\",style:{height:\"auto\",width:\"100%\"},children:/*#__PURE__*/e(n,{componentIdentifier:\"module:pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js:default\",children:t=>/*#__PURE__*/e(s,{...t,code:\"