Personalize o ícone da caixa de entrada da web

Use CSS personalizado para personalizar o ícone da sua caixa de entrada e adaptá-lo ao seu site e à sua marca

Usando as configurações da plataforma , a caixa de entrada da web tem um ícone padrão e está posicionada no canto superior direito do seu site.

Usando as regras CSS, o ícone pode ser alterado e reposicionado conforme mostrado abaixo (canto inferior direito):

As customizações acima foram feitas usando o CSS personalizado a seguir. Para criar um novo ícone codificado base64, primeiro crie seu ícone da caixa de entrada como uma imagem em um formato como PNG ou JPG. Use um serviço online, ferramenta de linha de comando ou similar para converter para base64. Existem muitas ferramentas que permitem fazer isso, como: https://www.base64-image.de.

#webpush-notification-center-open {
 top: auto;
 bottom: 20px;
}

#webpush-notification-center.webpush-notification-center-layout-popup {
 top: auto;
 bottom: 20px;
}

.webpush-balloon-light {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAABHZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICAgICAgICAgIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPHhtcE1NOkRlcml2ZWRGcm9tIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgPHN0UmVmOmluc3RhbmNlSUQ+eG1wLmlpZDpFRkQ1RkZBQzAwQjdFMDExQTVFMUI2QkYyMkQyMTM0OTwvc3RSZWY6aW5zdGFuY2VJRD4KICAgICAgICAgICAgPHN0UmVmOmRvY3VtZW50SUQ+eG1wLmRpZDo3ODkwNzY1QzM1QUVFMDExOUI0MDg3MzJEODFDNjBGNzwvc3RSZWY6ZG9jdW1lbnRJRD4KICAgICAgICAgPC94bXBNTTpEZXJpdmVkRnJvbT4KICAgICAgICAgPHhtcE1NOkRvY3VtZW50SUQ+eG1wLmRpZDpGMjY1NDJGREI3MDExMUUwODBGRjhGRDhCRDE0ODk0RDwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkluc3RhbmNlSUQ+eG1wLmlpZDpGMjY1NDJGQ0I3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')
}
.webpush-balloon-dark {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAEdmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgICAgICAgICAgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wTU06RGVyaXZlZEZyb20gcmRmOnBhcnNlVHlwZT0iUmVzb3VyY2UiPgogICAgICAgICAgICA8c3RSZWY6aW5zdGFuY2VJRD54bXAuaWlkOkVGRDVGRkFDMDBCN0UwMTFBNUUxQjZCRjIyRDIxMzQ5PC9zdFJlZjppbnN0YW5jZUlEPgogICAgICAgICAgICA8c3RSZWY6ZG9jdW1lbnRJRD54bXAuZGlkOjc4OTA3NjVDMzVBRUUwMTE5QjQwODczMkQ4MUM2MEY3PC9zdFJlZjpkb2N1bWVudElEPgogICAgICAgICA8L3htcE1NOkRlcml2ZWRGcm9tPgogICAgICAgICA8eG1wTU06RG9jdW1lbnRJRD54bXAuZGlkOkYyNjU0MkZEQjcwMTExRTA4MEZGOEZEOEJEMTQ4OTREPC94bXBNTTpEb2N1bWVudElE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')
}

A caixa de entrada aberta exibe em um estilo padrão, conforme mostrado abaixo. O visual interno da caixa de entrada possui muitos atributos que podem ser modificados a partir da plataforma. Para mais detalhes, veja a página de configurações da caixa de entrada .