# Como mostrar o progresso da entrega na tela de bloqueio Permita que os clientes acompanhem o entregador na tela de bloqueio desde a realização do pedido até a entrega. Este guia constrói essa jornada com o [elemento Live Activity](/pt/product/customer-journey/journey-elements/channels/live-activity/). ## Pré-requisitos * Seu aplicativo iOS suporta Live Activities. Consulte o [guia de Live Activities do SDK para iOS](/pt/developer/pushwoosh-sdk/ios-sdk/ios-live-activities/). * Um esquema de widget de entrega está publicado para este aplicativo. Consulte a [configuração de esquemas de Live Activity do iOS](/pt/developer/first-steps/connect-messaging-services/ios-configuration/ios-live-activity-schemas-configuration/). ## Crie os eventos Estes são nomes de eventos de exemplo para este guia. Quando seu aplicativo ou backend envia um nome pela primeira vez, o Pushwoosh [cria esse evento automaticamente](/pt/product/audience-data-and-segmentation/events/#implementation). Crie os eventos no Control Panel primeiro apenas se você quiser definir os tipos de atributos antes do primeiro envio. Crie (ou reutilize) os eventos `OrderPlaced`, `CourierStatusChanged` e `OrderDelivered`. [Saiba mais sobre a criação de eventos](/pt/product/audience-data-and-segmentation/events/#implementation) ## Construa a jornada Abra o [Customer Journey Builder](/pt/product/customer-journey/pushwoosh-journey-overview/), crie uma campanha e construa tudo abaixo em uma única tela. 1. Vá para **Campaigns → Customer Journey Builder**. 2. Clique em **Create campaign**. 3. Clique em **Build a journey from scratch**. ### Defina a entrada 1. Adicione um elemento **Trigger-based entry** à tela. 2. Defina-o como `OrderPlaced`. ![Painel de Trigger-based entry com EVENT definido como OrderPlaced](/live-activity-how-to-track-deliveries-with-live-activity-3.webp) ### Inicie o card do pedido 1. Adicione um elemento **Live Activity** após a entrada. 2. Nomeie-o como `Order card start`. 3. Defina **Action** como **Start**. 4. Selecione o **Widget** de entrega e a **Schema version**. ![Início do card de pedido com Action definida como Start e Widget e Schema version de entrega selecionados](/live-activity-how-to-track-deliveries-with-live-activity-1.webp) 5. Defina **Card key: event** como `OrderPlaced`. ![Card key: event definido como OrderPlaced](/live-activity-how-to-track-deliveries-with-live-activity-4.webp) 6. Preencha o **Card content** (`courierName`, `eta`, `distanceMeters`) e os campos de alerta. ![Campos de Card content courierName, eta e distanceMeters preenchidos, com campos de alerta abaixo](/live-activity-how-to-track-deliveries-with-live-activity-5.webp) 7. Clique em **Apply**. ### Aguarde e atualize o card Continue na mesma tela após o elemento Start. 1. Adicione um elemento **Wait for Trigger**. 2. Aguarde por `CourierStatusChanged`. 3. Defina um período de espera que se ajuste às suas atualizações de entrega. ![Wait for Trigger definido como CourierStatusChanged com um período de espera](/live-activity-how-to-track-deliveries-with-live-activity-6.webp) 4. Na ramificação que é acionada quando o evento acontece, adicione um elemento **Live Activity**. 5. Nomeie-o como `Order card update`. 6. Defina **Action** como **Update**. 7. Escolha o mesmo **Widget** e **Schema version**. ![Atualização do card de pedido com Action definida como Update e o mesmo Widget e Schema version selecionados](/live-activity-how-to-track-deliveries-with-live-activity-7.webp) 8. Selecione `Order card start` em **Card created by**. ![Card created by definido como Order card start no elemento Update](/live-activity-how-to-track-deliveries-with-live-activity-8.webp) 9. Atualize o **Card content**. ![Campos de Card content atualizados no elemento de atualização do card de pedido](/live-activity-how-to-track-deliveries-with-live-activity-9.webp) 10. Clique em **Apply**. ### Aguarde e finalize o card Continue na mesma tela após o elemento Update. 1. Adicione outro elemento **Wait for Trigger**. 2. Aguarde por `OrderDelivered`. ![Wait for Trigger definido como OrderDelivered](/live-activity-how-to-track-deliveries-with-live-activity-10.webp) 3. Na ramificação que é acionada quando o evento acontece, adicione um elemento **Live Activity**. 4. Nomeie-o como `Order card end`. 5. Defina **Action** como **End**. 6. Escolha o mesmo **Widget** e **Schema version**. 7. Selecione `Order card start` em **Card created by**. ![Fim do card de pedido com Action definida como End, o mesmo Widget e Schema version selecionados, e Card created by definido como Order card start](/live-activity-how-to-track-deliveries-with-live-activity-11.webp) 8. Defina o alerta e **Dismiss after, min** se necessário. ![Campos de alerta e Dismiss after, min no elemento de fim do card de pedido](/live-activity-how-to-track-deliveries-with-live-activity-12.webp) 9. Clique em **Apply**. ![Jornada de entrega completa na tela com entrada, Start, Wait for Trigger, Update, Wait for Trigger e End](/live-activity-how-to-track-deliveries-with-live-activity-13.webp) ## O que o cliente vê Na tela de bloqueio, o cliente recebe um card de Live Activity que muda conforme o progresso da entrega. Por exemplo: Entregador `Alex M.`, tempo estimado de chegada `18:30`, distância `1200` metros. ![Card de Live Activity na tela de bloqueio após o pedido ser realizado, mostrando o entregador Alex M., tempo estimado de chegada 18:30 e distância de 1200 metros](/live-activity-how-to-track-deliveries-with-live-activity-14.webp) O mesmo card é atualizado, por exemplo, entregador `Alex M.`, tempo estimado de chegada `18:15`, distância `400` metros. ![Card de Live Activity na tela de bloqueio após uma atualização do entregador, mostrando tempo estimado de chegada 18:15 e distância de 400 metros](/live-activity-how-to-track-deliveries-with-live-activity-15.webp) O card fecha e sai da tela de bloqueio.