Phone Mockup

Sobre Phone Mockup

O Phone Mockup não representa um modelo específico de celular e é utilizado para exemplificar como mensagens e notificações aparecerão para o usuário final. Também é utilizado para simular a interação do usuário final com as mensagens e notificações enviadas.

Como usar

Olá {name}! Sua consulta foi agendada para {date} às {time}. Para cancelar o agendamento, ligue para 0800 4001100.

Ok!

Obrigado pela sua mensagem!
Por enquanto este canal é utilizado apenas para avisos. Se tiver alguma dúvida, entre em contato pelo 0800 4001100.

<div class="phone-mockup">
  <div class="phone-mockup-header">
    <img src="https://assets.zenvia.com/images/new-logo-horizontal.svg" alt="Logo Zenvia">
  </div>
  <div class="phone-mockup-content">
    <div class="message-mockup">
      Olá {name}! Sua consulta foi agendada para {date} às {time}. Para cancelar o agendamento, ligue para 0800 4001100.
    </div>
    <div class="message-mockup is-out">
      Ok!
    </div>
    <div class="message-mockup">
      Obrigado pela sua mensagem!<br> Por enquanto este canal é utilizado apenas para avisos. Se tiver alguma dúvida, entre em contato pelo 0800 4001100.
    </div>
  </div>
</div>

Para alturas limitadas

Olá {name}! Sua consulta foi agendada para {date} às {time}. Para cancelar o agendamento, ligue para 0800 4001100.

Ok!

<div class="phone-mockup is-half">
  <div class="phone-mockup-header">
    <img src="https://assets.zenvia.com/images/new-logo-horizontal.svg" alt="Logo Zenvia">
  </div>
  <div class="phone-mockup-content">
    <div class="message-mockup">
      Olá {name}! Sua consulta foi agendada para {date} às {time}. Para cancelar o agendamento, ligue para 0800 4001100.
    </div>
    <div class="message-mockup is-out">
      Ok!
    </div>
  </div>
</div>