Send web push

Add a Web Push action to an automation or broadcast, write your notification, and choose which of a person's browsers receive it.

Before you send, set up web push on your website, so that the people you want to reach have web devices on their profiles.

Create a web push

1. In your automation or broadcast workflow, drag a Web Push action into your workflow.
2. Click the action to change its settings, like Sending behavior, Subscription preference, and action conditions. The Platform setting shows Web, because this action only sends to browsers.
3. Click Add content to open the composer. Use the Rich Push editor. Customer.io doesn’t send Custom Payload messages to browsers.
4. Fill in the notification fields.
5. Choose which browsers receive the message in Device. See last used device or all devices.
6. Click Send test… to test your message, then save it.
7. In the action settings, check that Sending behavior is Send Automatically. Queue Draft holds messages for review until you send them manually.

The preview shows a generic notification. Each browser draws notifications differently, so see what each browser shows before you rely on images or buttons.

Notification fields

Notification Sound doesn’t affect web push. App does: browsers aren’t tied to one of your apps, so keep your default app selected. Selecting another app excludes browsers. There is no website selector.

Browsers limit how much content a notification can carry. Below the action buttons, the composer shows how many bytes your web fields use, out of a budget of 3,179 bytes. The count is before Liquid renders, so leave room for personalized values. If a rendered notification is too large, Customer.io doesn’t send it to that browser.

Advanced options

Open Advanced options to change how browsers present your notification. Browser and operating system support varies: unsupported options can be ignored. Test on the browsers your audience uses; these settings don’t override notification permissions or Focus settings.

For an event-triggered order automation using the latest Liquid version, set the tag to order-{{ event.order_id | default: "general" }}. The fallback groups updates without an order ID under order-general; choose a fallback that fits your replacement behavior. Turn on Alert again when replacing if each update should request an alert. A rendered tag with unsupported characters, like spaces or #, is dropped along with Alert again when replacing; the notification still sends without replacement.

In Show time (event time instead of arrival), use the time of the event that triggered your automation:

{{ event_timestamp | times: 1000 }}

Customer.io event timestamps use seconds; multiplying by 1000 converts them to milliseconds. If you turn on Silent, leave the vibration pattern empty. Check receipt and replacement behavior on a real browser before sending to your audience.

Personalize with Liquid

You can use Liquid in Title, Message, Image, Link, Notification icon, Badge, Action buttons, and Custom Data. In Advanced options, Liquid works in the notification tag, show time, and app badge count. Language, text direction, vibration, and toggles don’t support Liquid.

When Customer.io sends a notification, it renders these fields and checks that the icon, badge, and button URLs start with https://. If one of them doesn’t, Customer.io removes that field and sends the rest.

https://example.com/bookings/{{ event.request_id | default: "" }}

Last used device or all devices

The Device setting decides which eligible browsers on a profile receive the message, subject to the selected App.

• Last used device (default) sends to one browser: the person’s most recently used web device. Customer.io only picks among the person’s browsers, so their iOS and Android devices don’t count. Registering or updating a browser’s device updates its last_used time. The plugin re-registers when the subscription, signed-in person, or device metadata changes, including a new browser major version. When your site moves to SDK 0.7.0, the plugin also re-registers existing subscribers once on their next identified visit to record the site origin. An unchanged site visit doesn’t otherwise need to re-register or update last_used.
• All profile devices sends to every eligible browser on the profile, subject to the selected App. Use it when people should get the notification in every browser they’ve turned on alerts in, like a laptop and a work computer.

For more about these options, see choose which devices receive your message.

Test your message

Click Send test… in the composer and paste your browser’s subscription JSON. To get it, sign in to your site in the browser you want to test, open your browser’s JavaScript console, and run:

JSON.stringify(await cioanalytics.webPush.subscription())

Use the test to check that the notification appears and clicking it opens your link. Settings and composer test sends check the push relay without creating a real automation delivery. They don’t create an automation Sent tab entry or automation delivery metrics. To verify those, trigger a real test automation as described in test your setup.

The test uses your Sample data to render Liquid. If a field doesn’t render, the dialog tells you which variable is missing. Fix it before you send to your audience, because a field that doesn’t render stops the notification for real recipients too.

Transactional push doesn’t reach browsers

Transactional push messages go to a person’s iOS and Android devices only. To send push to browsers, use a web push action in an automation or broadcast.

Metrics

Web push uses the same push metrics as app push:

• Sent: Customer.io handed the notification to the browser’s push service.
• Delivered: The Customer.io service worker showed the notification. A browser that couldn’t receive the notification right away reports delivered when it shows the notification, if the push service still holds it.
• Opened: Someone clicked the notification or one of its buttons.