# Push Notification

This mobile app builder offers the capability to send push notifications to your app users whenever they open the app. Incorporating push notifications in your mobile shopping app can help you effectively engage with customers.&#x20;

It allows you to send personalized messages, promotions, and updates to enhance user experience and boost sales.

Utilizing push notifications to communicate with your customers in real time is an effective strategy for keeping them updated and engaged with your brand.&#x20;

This can lead to increased loyalty and retention. Our app provides the capability to create and customize multiple push notifications to enhance your communication efforts.

To enable **Push Notifications** in your mobile app, it is essential to first set up a Firebase project. Follow the steps below:

**Step 1: Create a Firebase Project**

1. Go to <https://console.firebase.google.com>.
2. Sign in with your existing Google account or create a new one.
3. Click **‘Create a project’**

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F24PAOOep5qn88N001nRC%2Ffirebase%202.png?alt=media&#x26;token=b3afb61b-e6ab-46db-8333-35244954c8f4" alt=""><figcaption></figcaption></figure>

4. Complete the following steps:

* Enter your project name (e.g., your store or app name).
* Accept Firebase’s terms and click **Continue**.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FR30TIpu4O5dirE8ZdA0c%2FFIREBASE%203.png?alt=media&#x26;token=88fa6785-b015-4861-9c26-111d4ee86002" alt=""><figcaption></figcaption></figure>

* Accept Firebase’s terms and click **Continue**.
* Click **Continue** again.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2Fw5xEvqMMbb1FLEnIQG4D%2FFIREBASE%204.png?alt=media&#x26;token=c97cd4b0-f737-4a49-8ad0-eb52d4e2d1ba" alt=""><figcaption></figcaption></figure>

Choose your default account as a firebase account, and click **Create Project**.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FjTIa1qongGJrJGOLMnmr%2FFIREBASE%205.png?alt=media&#x26;token=26f9650d-41b3-425c-8afa-e1d7f888d6ad" alt=""><figcaption></figcaption></figure>

Once the project is created, click **Continue**.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FOTQQqmoyRrYMO1lSliMh%2Ffirebase%206.png?alt=media&#x26;token=09155d94-ebb8-4785-af67-9a72970ae570" alt=""><figcaption></figcaption></figure>

5. On your Firebase project dashboard, click the **Android icon** to add a new app.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FB6MLEzxb5Mzu8FUvml82%2FScreenshot_6.png?alt=media&#x26;token=60907a06-2740-440b-a0d8-6b3da1fb1e77" alt=""><figcaption></figcaption></figure>

* **Android package name**: Enter your app’s package name (e.g., `com.mystore.app`). (Ask our team if you have questions)
* **App nickname**: Optional.
* **Debug signing certificate SHA-1**: Optional at this stage.
* Click **Register App**.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FfD8ojtrnn5yzS7MW9unD%2FScreenshot_7.png?alt=media&#x26;token=9d9a22dd-d647-41b8-944c-b6bff8276b63" alt=""><figcaption></figcaption></figure>

* Download the **`google-services.json`** file after registering your app.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FDNaOaVrEhXZ5nsyM58tJ%2FScreenshot_8.png?alt=media&#x26;token=34f3a2e9-af15-4961-a088-582ffc49d9e5" alt=""><figcaption></figcaption></figure>

Now go back to your project overview (Setting button) and copy the **project id** from there.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F88H87KgqqVPaI2hQxzzC%2FScreenshot_14.png?alt=media&#x26;token=5cad6d39-d98a-4d65-b5af-23a5cb90b270" alt=""><figcaption></figcaption></figure>

Upload the `google-services.json` file into our app panel:

* Go to **Notifications > Config** in the app admin panel.
* **Enter project ID** and **upload the JSON file** and then **click on Save** button.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F6WxsO5ycVJETypaYuKVR%2FScreenshot_9.png?alt=media&#x26;token=7a87f09c-d47a-4658-8e8d-4589c3821971" alt=""><figcaption></figcaption></figure>

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FcbilIX1AIpxg4LLnfJxV%2FScreenshot_10.png?alt=media&#x26;token=d57046bf-4692-4a2b-aedc-70dcf53c0280" alt=""><figcaption></figcaption></figure>

Once Firebase is set up and the configuration file is uploaded, you can begin sending customized push notifications to your app users.

To create a new notification:

1. Go to the **Notifications** section of your app panel.
2. Click **Add Notification**.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FWqYu4OsrYJEiQetHD8nd%2FScreenshot_11.png?alt=media&#x26;token=7d0d487b-30bc-461d-9d41-a00a3fb7418b" alt=""><figcaption></figcaption></figure>

3. Fill in the following fields:

* Choose the notification templete.
* **Title**: Set a concise and relevant title for your push message.
* **Body**: Write the message content that will be shown to users.
* **Link to**: Provide a URL or deep link to direct users when they tap the notification.
* **Media**: Upload an image or banner to make your notification more engaging.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FK9PQlNr2WjArB3itWOnO%2FScreenshot_12.png?alt=media&#x26;token=6af5a013-3367-4458-b067-4970ed0cde2e" alt=""><figcaption></figcaption></figure>

4. Click **Save**.

Once configured, your push notification will be delivered to users when they open the app.

### **Automated Notifications**

Automated Notifications allow you to send push notifications to customers automatically based on their actions or predefined schedules. This helps you engage users at the right time without any manual effort.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FoKx1aEiQ6flwEKxZrqzP%2Fimage.png?alt=media&#x26;token=c1c815e6-a57d-4723-b7e1-8e85598e1c20" alt=""><figcaption></figcaption></figure>

#### <mark style="color:$primary;">**Automated Notifications – Abandoned Checkout**</mark>

The Abandoned Checkout notification automatically reminds customers who have added items to their cart but did not complete the purchase.&#x20;

This helps recover lost sales and improve conversion rates.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FFPsePe7u6uMdTXzhS0kO%2Fimage.png?alt=media&#x26;token=788c64e5-512a-47f1-b792-d35b1c3ae82b" alt=""><figcaption></figcaption></figure>

#### **How It Works**

1. A customer adds products to the cart but leaves without completing checkout.
2. The system automatically detects the abandoned cart.
3. A push notification is sent based on the configured schedule (e.g., every hour).
4. Notifications stop once the customer completes the purchase.

#### **Setting**

This notification is triggered automatically when the abandoned cart triggers. Ensure the notification is **enabled** to start sending updates to customers.

#### **Configuration Settings**

**1. Send Frequency**\
\- How often does the system check and send notifications?\
**Example:** Every hour

**2. Notification Title**\
Short headline shown in the push notification.\
**Example:** *You left something behind!*

**3. Notification Body**\
Custom message with dynamic placeholders.

**Available Placeholders:**

* {Customer\_name} → Customer’s name
* {items}→ Products added to cart
* {total}→ Total cart value

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FjF0Ia1hQ13ZHrWc7Lyk6%2Fimage.png?alt=media&#x26;token=ad85f273-767b-4fbb-9974-e95ef9e2ff49" alt=""><figcaption></figcaption></figure>

#### **Example**

**Customer Details:**

* Name: Rahul
* Cart Items: T-shirt, Jeans
* Total: ₹2,499

**Configured Message:**

Hi **{customer\_name}**, your cart **({items})** worth **{total}** is waiting for you.

**Notification Sent:**\
Hi Rahul, your cart (T-shirt, Jeans) worth ₹2,499 is waiting for you.

#### <mark style="color:$primary;">**Order Confirmed Notification**</mark>

The Order Confirmed notification is automatically sent to customers immediately after they successfully place an order. It reassures customers that their order has been received and is being processed.

#### **How It Works**

* A customer completes the checkout process
* The order is successfully placed
* The system instantly triggers a push notification

#### **Setting**

This notification is triggered automatically when the order is confirmed. Ensure the notification is **enabled** to start sending updates to customers.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FtZekG6JrbEB25zW7evQh%2Fimage.png?alt=media&#x26;token=38925f93-fb89-4b7f-8054-4b71a556d901" alt=""><figcaption></figcaption></figure>

#### **Notification Configuration**

**Notification Title**\
Order Confirmed!

**Notification Body**

Hi **{customer\_name}**, your order **{order\_name}** has been placed successfully.

**Available Placeholders:**

* {customer\_name} → Customer’s name
* {order\_name}  → Order number or name
* {total} → Total order amount

#### **Example**

**Customer Details:**

* Name: Rahul
* Order Name: #1025
* Total: ₹1,499

**Notification Sent:**\
**Title:** Order Confirmed!\
**Message:**\
Hi Rahul, your order #1025 has been placed successfully.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FioX8haZEoPwWakCxsEdH%2Fimage.png?alt=media&#x26;token=6359b917-c344-4030-9d1f-ce3ead41072b" alt=""><figcaption></figcaption></figure>

#### **Use Case**

* Provides instant confirmation to customers
* Builds trust and improves post-purchase experience
* Keeps customers informed without manual effort

#### <mark style="color:$primary;">**Order Fulfilled Notification**</mark>

The Order Fulfilled notification is sent to customers when their order has been shipped and is on the way.&#x20;

It keeps customers informed about their order status and improves the post-purchase experience.

#### **Setting**

This notification is triggered automatically when the order is fulfilled. Ensure the notification is **enabled** to start sending updates to customers.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F0XzQmycEfGGcOSW6nRnU%2Fimage.png?alt=media&#x26;token=a3990471-6709-4c30-b5d2-8c30a7247e42" alt=""><figcaption></figcaption></figure>

#### **Notification Configuration**

**Notification Title**\
Your order is on the way!

**Notification Body**

Hi {customer\_name}, your order {order\_name} has been shipped.

**Available Placeholders:**

* {customer\_name}→ Customer’s name
* &#x20;{order\_name} → Order number or name

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FPWd6UtM1JKThMB1u5UMO%2Fimage.png?alt=media&#x26;token=969a48a9-9cd8-491f-8f1a-a3cc07fac898" alt=""><figcaption></figcaption></figure>

#### **Example**

**Customer Details:**

* Name: Priya
* Order Name: #2045

**Notification Sent:**\
**Title:** Your order is on the way!\
**Message:**\
Hi Priya, your order #2045 has been shipped.

**Use Case**

* Provides real-time shipping updates to customers
* Reduces support queries about order status
* Builds trust and enhances post-purchase experience
* Keeps customers informed automatically

#### <mark style="color:$primary;">**Order Cancelled Notification**</mark>

This notification is sent to customers when their order is cancelled, ensuring they are immediately informed about the status change.

This notification is triggered automatically when the order is cancelled. Ensure it is **enabled** to send updates to customers.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F9bKnsYejcGsi3NtwkYMa%2Fimage.png?alt=media&#x26;token=84b7ebbb-1628-456a-b242-28ac9fafe230" alt=""><figcaption></figcaption></figure>

#### **Notification Configuration**

**Notification Title**\
Order Cancelled

**Notification Body**

Hi {customer\_name}, your order {order\_name} has been cancelled.

**Available Placeholders:**

* {customer\_name} → Customer’s name
* {order\_name} → Order number or name

#### **Example**

**Customer Details:**

* Name: Amit
* Order Name: #3051

**Notification Sent:**\
**Title:** Order Cancelled\
**Message:**\
Hi Amit, your order #3051 has been cancelled.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FpxBR2eTiY0V7KeSqddga%2Fimage.png?alt=media&#x26;token=89dc54ea-4ab3-4a8c-b050-7aa3409d8551" alt=""><figcaption></figcaption></figure>

#### **Use Case**

* Provides immediate cancellation updates to customers
* Avoids confusion regarding order status
* Builds transparency and customer trust. Keeps customers informed without manual effort
