Supercharging Your v0 Project with Appizer

Before You Start

This guide assumes you already have a v0 project up and running. The integration process will differ slightly depending on whether your project is a mobile app or a website. We'll cover both scenarios!

You'll also need:

• An Appizer account (Sign up here if you don't have one)
• A WonderPush account (for push notifications)

For Website Projects

If your v0 project is a website, follow these steps:

1. Create a Website Project in WonderPush

   First, log in to your WonderPush account and create a new website project if you haven't already. This will give you a webKey that you'll need later.

2. Add Required Files to Your v0 Project

   You'll need to add some special files to your v0 project. Simply use this prompt with v0:

   prompt

   i need you to add the following files so that they are accessible via public routes directly. collect them from the following urls and use the same names: https://app.appizer.com/wonderpush-worker-loader.min.js https://app.appizer.com/wonderpush.min.html when you are done, they should be available via the web root as: /wonderpush-worker-loader.min.js /wonderpush.min.html

3. Add the WonderPush Snippet to All Pages

   Next, you need to add the following code snippet to all pages of your website. Ask v0 to add this to your site's header or before the closing </body> tag:

   html

   <script src="https://cdn.by.wonderpush.com/sdk/1.1/wonderpush-loader.min.js" async></script>
   <script>
   window.WonderPush = window.WonderPush || [];
   WonderPush.push(["init", {
       webKey: "REPLACE_WITH_WONDERPUSH_WEBKEY",
   }]);
   </script>

   Make sure to replace REPLACE_WITH_WONDERPUSH_WEBKEY with your actual WonderPush Web Key.

   Need More Details?

   For a more detailed guide on setting up WonderPush with your website, check out their official Web Push Notifications Quickstart guide: WonderPush Web Push Notifications Quickstart

4. Configure WonderPush to set the user ID

   If your application has a user authentication system, you should configure WonderPush to associate notifications with specific user IDs. Use this prompt with v0:

   prompt

   add to the project a routine that sets the wonderpush userid based on the userid if a userid is set. here is some sample code to consider:
   
   // Wait for the SDK to be ready WonderPush.ready(function() { // Set the user ID (replace 'your-user-id-here' with the actual ID from your system) WonderPush.setUserId('your-user-id-here'); });

   This will ensure that push notifications can be targeted to specific users in your application, enabling personalized messaging.

For Mobile App Projects

If your v0 project is a mobile app, the integration process will be different. Please contact our support team for specific guidance on integrating Appizer with your v0 mobile app project.

Now that you have your WonderPush credentials, let's create your app in Appizer and configure the integration:

1. Log in to your Appizer account
2. Navigate to the Dashboard and click "Create New App"
3. Name your app and provide a brief description
4. After creating the app, go to the app's Settings
5. Select "Engagement Platforms" from the sidebar
6. Choose "WonderPush" from the list of available platforms
7. Enter your WonderPush credentials:
   • Access Token: Get this from your WonderPush dashboard under Settings > API Credentials
   • Application ID: Find this in your WonderPush dashboard under Settings > API Credentials
8. Click "Save Settings" to enable the integration

For Website Projects

If your v0 project is a website, follow these steps:

1. Create a Website Project in WonderPush

   First, log in to your WonderPush account and create a new website project if you haven't already. This will give you a webKey that you'll need later.

2. Add Required Files to Your v0 Project

   You'll need to add some special files to your v0 project. Simply use this prompt with v0:

   prompt

   i need you to add the following files so that they are accessible via public routes directly. collect them from the following urls and use the same names: https://app.appizer.com/wonderpush-worker-loader.min.js https://app.appizer.com/wonderpush.min.html when you are done, they should be available via the web root as: /wonderpush-worker-loader.min.js /wonderpush.min.html

3. Add the WonderPush Snippet to All Pages

   Next, you need to add the following code snippet to all pages of your website. Ask v0 to add this to your site's header or before the closing </body> tag:

   html

   <script src="https://cdn.by.wonderpush.com/sdk/1.1/wonderpush-loader.min.js" async></script>
   <script>
   window.WonderPush = window.WonderPush || [];
   WonderPush.push(["init", {
       webKey: "REPLACE_WITH_WONDERPUSH_WEBKEY",
   }]);
   </script>

   Make sure to replace REPLACE_WITH_WONDERPUSH_WEBKEY with your actual WonderPush Web Key.

For Mobile App Projects

If your v0 project is a mobile app, the integration process will be different. Please contact our support team for specific guidance on integrating Appizer with your v0 mobile app project.

Once you've set up WonderPush with your v0 project, it's time to test that everything is working correctly.

Verify Your Setup

To make sure everything is working properly:

1. Check WonderPush Dashboard - Log in to your WonderPush account and make sure your website is properly connected.
2. Test Notifications - Use the "Send Test" feature in WonderPush to send yourself a test notification.
3. Check Browser Permissions - Make sure your browser has granted notification permissions to your website.

Now comes the fun part! With your v0 project connected to Appizer and WonderPush, you can create smart engagement campaigns:

Creating Your First Campaign

1. Log in to your Appizer dashboard
2. Navigate to "Campaigns" and click "Create Campaign"
3. Select "Re-engagement" as the campaign type
4. Define your audience using simple language (e.g., "users who haven't visited in the last 7 days")
5. Let our AI generate engaging notification messages for you
6. Set your campaign schedule and frequency
7. Review and activate your campaign