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.
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 :).
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.
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.
After making the Send request, we can see the incoming message like the following screenshot:
โ