# How to test my Web Push integration?

Once you have completed the steps described in the [web push integration guide](https://app.gitbook.com/s/UIK868wiiK9XOVyETGZS/other/implementation-guides/integration-steps-web), several elements should be checked to make sure you will be able to use Batch to its full potential.

There are two scenarios if you integrate web push:

## Case A: The notification prompt is triggered correctly <a href="#h_769e01e179" id="h_769e01e179"></a>

<figure><img src="https://38998153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCL8wF0y1T2vLnm3yR2MW%2Fuploads%2FzHYV1CCYHot0fJDrtDa0%2Fweb_native-prompt_200525.png?alt=media&#x26;token=b85668be-7db3-4fab-b89e-e87a66160320" alt="Google Chrome native prompt" width="563"><figcaption></figcaption></figure>

In this case, follow these steps:

{% stepper %}
{% step %}

### Send a test push to your browser <a href="#h_ec915abfce" id="h_ec915abfce"></a>

<figure><img src="https://38998153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCL8wF0y1T2vLnm3yR2MW%2Fuploads%2FILm8F4VZ91zN08XOgFfK%2Fweb_send-test-push_200525.png?alt=media&#x26;token=e17d8941-4a07-4763-8589-4c15457550ac" alt=""><figcaption></figcaption></figure>

Allow push notifications and try sending a test notification to your browser (repeat the same step on Chrome, Firefox, and Safari).

Here is how to do it: [How to send a test push notification to your web browser?](https://doc.batch.com/guides-and-best-practices/message/push-notifications/how-to-send-a-test-push-notification-to-your-web-browser)
{% endstep %}

{% step %}

### Review your website icons <a href="#h_1ec843dfe1" id="h_1ec843dfe1"></a>

Ensure icons match the required size and format ([see documentation](https://doc.batch.com/web/getting-started/prerequisites#icons-management)).

In particular, make sure that the small icon has a transparent background and is properly displayed (i.e., not a gray circle) on Android.

Here is [how to send a test notification to a web browser on Android](https://doc.batch.com/developer/technical-guides/how-to-guides/mobile/android-specific/how-to-send-a-test-notification-to-my-web-browser-on-android).
{% endstep %}

{% step %}

### Firefox and Safari custom alert (optional) <a href="#h_b68b2e33be" id="h_b68b2e33be"></a>

<figure><img src="https://38998153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCL8wF0y1T2vLnm3yR2MW%2Fuploads%2FwoMLxr2kBai7uSznCXiV%2Fweb_pre-prompt_200525.png?alt=media&#x26;token=c7dcd708-dcf6-4272-b600-73b990026df7" alt="Safari pre-prompt notification authorization"><figcaption></figcaption></figure>

If you choose to use Batch pre-permission prompts to [set a custom alert on Firefox and Safari](https://doc.batch.com/developer/technical-guides/how-to-guides/web/how-to-trigger-the-native-notification-permission-prompt-on-firefox-and-safari), ensure it is displayed when you land on the website and fits the custom UI that you want to display.
{% endstep %}

{% step %}

### Custom User ID (optional) <a href="#h_e73eda896d" id="h_e73eda896d"></a>

<figure><img src="https://38998153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCL8wF0y1T2vLnm3yR2MW%2Fuploads%2FVqx0m8X2oolSycarE3pZ%2Fweb_profile-view-cuid_200525.png?alt=media&#x26;token=f3b25c74-9c8e-4b03-a880-91909d991968" alt="User profile view highlighting Custom User ID value"><figcaption></figcaption></figure>

If you choose to[ set up a Custom User ID](https://doc.batch.com/developer/sdk/web/profile-data/custom-user-id), make sure it is sent to Batch when you log in to the website using the Profile view on the dashboard (Profiles > Search Profiles) and your [Installation ID](https://doc.batch.com/guides-and-best-practices/message/push-notifications/how-to-send-a-test-push-notification-to-your-web-browser#h_17fa92f09d).

{% hint style="danger" %}
The Custom User ID must be reset when the user logs out of the website. (i.e., the field must be empty)
{% endhint %}
{% endstep %}

{% step %}

### Language & Region (optional) <a href="#h_bc7ef32ebe" id="h_bc7ef32ebe"></a>

<figure><img src="https://38998153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCL8wF0y1T2vLnm3yR2MW%2Fuploads%2F3FHotFjgYThSElxL9njq%2Fweb_profile-view-language-region_250525.png?alt=media&#x26;token=4173fa49-160c-413a-819b-1695d8478d68" alt="User profile view highlighting language and region values"><figcaption></figcaption></figure>

If you choose to [overwrite the default values](https://doc.batch.com/web/custom-data/custom-locale) detected by the SDK with the language displayed on the website for this user, you can check that it is updated correctly using the Profile view on the dashboard (Profiles > Search Profiles) and your [Installation ID](https://doc.batch.com/guides-and-best-practices/message/push-notifications/how-to-send-a-test-push-notification-to-your-web-browser#h_17fa92f09d).

{% hint style="warning" %}
Use the **Refresh button** to see the latest data.
{% endhint %}
{% endstep %}
{% endstepper %}

## Case B: The permission prompt is not triggered on your website <a href="#h_cd4df78fd4" id="h_cd4df78fd4"></a>

In this case, check the following:

{% stepper %}
{% step %}

### Clear the data stored for your website <a href="#h_a230b707ca" id="h_a230b707ca"></a>

Make sure you [reset your browser preferences](https://doc.batch.com/guides-and-best-practices/profiles/how-to-reset-your-browser-opt-in-preferences) between each test.
{% endstep %}

{% step %}

### Staging domain name <a href="#h_5ad9b8bb02" id="h_5ad9b8bb02"></a>

<figure><img src="https://38998153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCL8wF0y1T2vLnm3yR2MW%2Fuploads%2FJndVI4cXqfis6vsKMxB6%2Fscreen_web_allowed_origins.png?alt=media&#x26;token=93936fd0-7a26-4eca-9fa7-dca8b990d029" alt="Allowing staging domains section"><figcaption></figcaption></figure>

If you deployed Batch on a staging version of your website, make sure you added your staging domain name to the list of "Allowed origins", from the dashboard Settings > Channels > Push > Website.
{% endstep %}

{% step %}

### Service worker <a href="#h_11dd75ed01" id="h_11dd75ed01"></a>

<figure><img src="https://38998153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCL8wF0y1T2vLnm3yR2MW%2Fuploads%2FZX8CyXK2LpdvKUwlOdsu%2Fweb_inspector-service-worker_200525.png?alt=media&#x26;token=42dfe535-b996-4fcb-9c71-5b540ef6b591" alt="Inspector section showing Batch service worker started"><figcaption></figcaption></figure>

Make sure that the Service Worker is well integrated at the root of your website: type the name of the service worker after the domain name (e.g., [mywebsite.com/batchsdk-worker-loader.js](http://mywebsite.com/batchsdk-worker-loader.js)).\
You may have chosen to add the service worker in a subfolder, in which case the path must be indicated in the JavaScript tag (see [documentation](https://doc.batch.com/developer/sdk/web/advanced/declare-path-service-worker#uploading-the-service-worker-to-a-folder-of-your-website)).\
In case you integrated it with an existing service worker, ensure you followed all steps of this [documentation](https://doc.batch.com/developer/sdk/web/advanced/integrating-batch-with-existing-service-worker).
{% endstep %}

{% step %}

### Unsecure environment <a href="#h_e7fa8e6c4c" id="h_e7fa8e6c4c"></a>

<figure><img src="https://38998153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCL8wF0y1T2vLnm3yR2MW%2Fuploads%2FF9TBw5Ow8vke26EDUzyO%2Fweb_unsecure_domain-200525.png?alt=media&#x26;token=afa9e4b7-9d4c-4764-8431-1e4d1e7b13ae" alt="Unsecure website error message" width="563"><figcaption></figcaption></figure>

Ensure that your test website is secure. For any service worker to work, it is essential to use HTTPS and to have an accepted/valid certificate.
{% endstep %}
{% endstepper %}