Now that we have the Frontend setup and the Studio setup, we should be able to test the entire integration by sending a Toast. In this section, we will go back to the Courier Designer Studio, Create a Test Event, trigger a Send request and verify that a Message pops up in your web application.

Step 1: Open or create a notification with Courier Push as a channel

Create a new notification template and add Courier Push as a channel or got to the Notification List and open an existing template with a Courier Push notification channel.

Step 2: Create a test event

Let's create a Test Event. This will emulate what is send in a HTTPS POST request to Courier's backend. Below is an example of the "Brand Published" Test Event.

image

Note the USER_ID here, this is VERY IMPORTANT as this tells the Send request who we want to deliver the In-App Message to. If your Send request does NOT include profile.courier.channel, the message will not send.

Step 3: Send Notification

Now we should have access to the Send Tab. Again, make sure the profile.courier.channel matches the userId and click "Send Notification". In our example, the Courier UI is the UI that we integrated the Courier Components into so when we clicked "Send Notification" ~ you can see our "Brand Published" event :).

image

image

Troubleshooting

1. My Toast Message doesn't appear

If your message doesn't show up after making a Send request, the first thing we want to do is make sure we are connected via WebSockets.

Open your Dev Console to the Network Tab and click the WS button show below to verify the following information.

image

From here, click "Messages" and you should see a "subscribe" call. This should contain your Client Key and your User Id. Make sure these match with the information being sent.

image

After making the Send request, we can see the incoming message like the following screenshot:

image


Did this answer your question?