Step-by-Step Guide to Installing Push Notifications with PushRelay

Created on 26 July, 2024 • How-To Guides • 118 views • 5 minutes read

How to Install Push Notifications with PushRelay: A Step-by-Step Guide

In today's digital world, staying connected with your audience is more important than ever. Push notifications are a powerful tool for re-engaging users, delivering timely updates, and driving traffic. PushRelay offers an easy-to-use platform to integrate push notifications into your website. This article will guide you through the steps to install push notifications using PushRelay.

What is PushRelay?

PushRelay is a robust push notification service that helps businesses communicate effectively with their users. With support for various platforms and an intuitive interface, PushRelay simplifies the process of sending push notifications, whether you’re a developer or a business owner with minimal technical skills.

Why Use PushRelay?

1. Ease of Integration: Simple APIs and extensive documentation make it easy to integrate PushRelay into your website.
2. Cross-Platform Support: Send notifications to users on multiple devices, including desktops and mobiles.
3. Rich Analytics: Track the performance of your notifications with detailed analytics.
4. Customization: Tailor notifications to suit your audience’s preferences and behaviors.

Step 1: Sign Up for PushRelay

Explanation: To use PushRelay, you need to create an account. This involves providing your email address and other required information.

Steps:

1. Visit the PushRelay Website: Go to the PushRelay homepage.
2. Click “Sign Up” Button: Find and click on the “Sign Up” button.
3. Fill in Required Information: Enter your email, password, and other necessary details.
4. Verify Your Email: Check your email inbox for a verification email from PushRelay. Click on the verification link to activate your account.

Step 2: Setup Your Website

Explanation: After registering, you'll need to add your website to your PushRelay account. This step is essential as it allows PushRelay to know which website will be using its services.

Steps:

1. Visit the Dashboard: Log into your PushRelay account and go to the dashboard.
2. Add Your Website: Click the “Add Website” button to start the setup.
3. Enter Website Details: Provide a name for your website (e.g., PushRelay) and the URL (e.g., https://pushrelay.com). This information helps PushRelay identify and manage your website.

Step 3: Install Code on Your Website

Explanation: To enable push notifications, you need to integrate PushRelay's JavaScript file (pushrelay.js) into your website. This file allows PushRelay to communicate with your website and handle notifications.

Steps:

Download pushrelay.js: From the PushRelay dashboard, download the pushrelay.js file.

Upload to Root Directory: Upload the downloaded pushrelay.js file to the root directory of your website. Ensure it is accessible at example.com/pushrelay.js.

Step 4: Configure Your Widget

Explanation: Configuring your widget involves setting up how your subscription widget will appear and behave on your website. This customization makes it more likely for users to subscribe.

Steps:

Enable/Disable Widget: Use the dashboard to turn the widget on or off.

Customize Subscription Widget:

1. Title: Change the title text on the widget.
2. Description: Modify the description text.
3. Subscribe Button: Customize the text and appearance of the Subscribe button.
4. Close Button: Customize the text and appearance of the Close button.
5. Image: Choose an image URL and provide alt text for accessibility.
6. Success Message: Set the message that appears after a successful subscription.
7. Permission Denied Configuration: Determine what happens if a user denies the permission request for notifications.

Step 5: Customize Targeting

Explanation: PushRelay allows you to target specific segments of your audience based on various criteria, ensuring your notifications reach the right users.

Steps:

Segmentation: Segment your audience by:

1. Continents
2. Countries
3. Operating systems
4. Browsers
5. Browser languages

Screen Display Options: Choose whether to display notifications on small screens (e.g., mobile devices) or large screens (e.g., desktops).

Step 6: Customize Triggers

Explanation: This step involves setting up when and where the subscription widget should appear on your website. Customizing triggers helps in optimizing user engagement.

Steps:

Page Selection: Decide whether to show the widget on all pages or specific ones.

Display Configuration:

1. Delay: Set a delay (in seconds) before the widget appears.
2. Display Frequency: Determine how often the widget should appear to the same user.
3. Display Delay Type: Configure what happens after the user closes the notification (e.g., re-display after a certain period).
4. Time on Site: Set the required time a user needs to spend on the site before seeing the widget.

Step 7: Configure Display Options

Explanation: This step involves determining the visual placement and duration of your widget on the screen, ensuring it complements your website’s design.

Steps:

1. Position and Direction: Choose the screen position (e.g., bottom-right, top-left) and direction for displaying the widget.
2. Display Duration: Set how long the widget remains visible.
3. Branding: Enable or disable PushRelay branding on the widget (note: this option is not available for free plans).

Step 8: Customize Widget Appearance

Explanation: Customizing the appearance of your widget makes it more attractive and consistent with your website's design, enhancing user experience.

Steps:

Font: Change the font style of the widget text.

Internal Padding: Adjust the padding inside the widget.

1. Colors:
2. Title Color: Set the color of the title text.
3. Description Color: Choose the color of the description text.
4. Background Color: Customize the background color of the widget.
5. Subscribe Button Text Color: Set the text color for the Subscribe button.
6. Subscribe Button Background Color: Choose the background color for the Subscribe button.
7. Close Button Text Color: Customize the text color for the Close button.
8. Close Button Background Color: Set the background color for the Close button.

Display Shadow: Enable or disable the shadow around the edges of the notification for a more dynamic look.

Border:

1. Width: Set the width of the widget border.
2. Color: Choose the color of the border.
3. Style: Select the border style—straight, rounded, or highly rounded.

Animations:

1. Hover Animation: Customize the animation that plays when users hover over the widget.
2. Entrance Animation: Set the animation that occurs when the widget first appears.
3. Animation Interval: Define the interval at which the animation repeats.

Once you have customized your widget to your satisfaction, don’t forget to hit the Update button to save your changes. And that's it! Your widget is now ready to engage users with a visually appealing and interactive experience.

Conclusión

Integrating push notifications with PushRelay is a straightforward process that can significantly enhance your engagement strategy. By following the detailed steps outlined in this guide, you can set up and send push notifications efficiently. Keep your audience informed with timely updates, promotions, and more using PushRelay.

For more detailed information, be sure to explore the comprehensive documentation and support resources available on the PushRelay website. Happy notifying!