Para um café, uma clínica, um estúdio ou uma barraca de feira, a página acessada pelo link do perfil tem uma função mais importante que todas as outras: levar as pessoas até o local. Há 3 formas de colocar um mapa em uma página Digily Link. A escolha depende do seu plano e de você querer exibir um mapa ou oferecer um botão que inicie a navegação.
Opção 1. Botão de rotas que abre o aplicativo de mapas
Essa opção funciona em todos os planos, inclusive no Free, e é o que a maioria dos visitantes realmente procura. Ninguém quer ficar ampliando e reduzindo um mapa no celular. As pessoas tocam em "Como chegar" e esperam que a navegação comece.
- Abra o Google Maps, encontre seu estabelecimento, toque em Compartilhar e copie o link.
- No painel, crie um link curto usando esse endereço como destino e ative a opção "abrir automaticamente no aplicativo em dispositivos móveis". O Digily Link reconhece links do Google Maps e do Waze. Assim, em um celular com o aplicativo instalado, o link curto abre a navegação diretamente. O guia sobre deep linking explica por que isso é importante.
- Adicione um bloco de link à sua página, cole o link curto e use o texto "Como chegar".
Como o botão aponta para um link curto, os cliques são contabilizados nas estatísticas. Se o estabelecimento mudar de endereço, você poderá trocar o destino.
Opção 2. Mapa incorporado com o bloco iframe
O bloco iframe está disponível nos planos Starter e Pro e exibe o mapa na própria página.
- No Google Maps, encontre o local, abra a opção Compartilhar e acesse a guia "Incorporar um mapa".
- Copie o HTML exibido pelo Google. Você precisa apenas do endereço dentro de src="...", que começa com https://www.google.com/maps/embed. Se for mais fácil para localizar o endereço, cole o trecho completo no Analisador de URL.
- Adicione um bloco iframe à sua página, cole esse endereço como URL e defina uma altura de aproximadamente 300 pixels.
Coloque o botão de rotas da opção 1 logo abaixo do mapa. O mapa mostra onde você está, e o botão leva as pessoas até lá.
Opção 3. HTML personalizado para um mapa responsivo
O bloco de HTML personalizado está disponível no plano Pro e oferece controle total, inclusive para criar um mapa que mantenha as proporções em qualquer tamanho de tela. Cole o código abaixo no bloco e substitua YOUR_EMBED_URL pelo endereço obtido na guia "Incorporar um mapa".
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px"><iframe src="YOUR_EMBED_URL" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe></div>
O valor de padding-bottom define o formato. 56,25% cria um retângulo de 16:9, 75% deixa o mapa mais quadrado, na proporção 4:3, e 100% cria um quadrado. O atributo loading="lazy" impede que o mapa deixe a página mais lenta antes que o visitante role a tela até ele. Se você copiar um código de outro lugar, organize-o primeiro com o Minificador de HTML para evitar que uma quebra de linha indevida comprometa o bloco.
Qual opção escolher
| O que você quer | O que usar | Plano |
|---|---|---|
| Iniciar a navegação com um toque | Botão de rotas com abertura no aplicativo | Free e superiores |
| Exibir um mapa na página | Bloco iframe | Starter e Pro |
| Personalizar o formato e a aparência do mapa | Bloco de HTML personalizado | Pro |
| Mostrar vários locais | Um título e um botão de rotas para cada unidade, ou um mapa personalizado do Google My Maps incorporado com a opção 2 ou 3 | Depende dos blocos usados |
Dicas para negócios locais
- Coloque o CEP em um bloco de parágrafo acima do mapa para quem prefere digitá-lo no próprio aplicativo.
- Adicione o bloco de horário de funcionamento, disponível no plano Free, para que o visitante saiba se pode sair agora.
- Mantenha apenas 1 mapa por página. Dois mapas incorporados dobram o tempo de carregamento e trazem pouquíssimo benefício.
- Imprima um QR code da página para colocar na vitrine e em panfletos. Você encontra um modelo de página para estabelecimentos no guia sobre link na bio para pequenos negócios.
- Teste o botão de rotas dentro do Instagram em um iPhone e em um celular Android. O Verificador de redirecionamento de URL mostra o que o link curto faz em um computador.
Feiras, lojas temporárias e eventos
Uma barraca que muda de lugar todo fim de semana não precisa de um novo mapa a cada vez. Mantenha o botão de rotas apontando para um link curto e, na sexta-feira, altere o destino para o endereço daquele fim de semana. O endereço da página, o QR code do banner e o link do perfil permanecem iguais. Nos planos Starter e Pro, o link curto também pode ser programado. Assim, o local de sábado muda para o de domingo à meia-noite sem que ninguém precise se lembrar de fazer a alteração. Adicione um bloco de parágrafo com as datas e o CEP para quem gosta de se planejar.
Apple Maps e Waze
A abertura no aplicativo reconhece endereços do Google Maps e do Waze. Para usuários de iPhone que preferem o Apple Maps, um link comum para maps.apple.com contendo o endereço abre o Apple Maps no iPhone e um mapa na web em outros dispositivos. Isso acontece porque os próprios links da Apple funcionam dessa maneira, sem nenhuma configuração. Dois botões, "Google Maps" e "Apple Maps", atendem a quase todos os celulares no Brasil, e a contagem de cliques mostra qual deles seus visitantes realmente usam.
Perguntas frequentes
Preciso de uma chave de API do Google Maps?
Não. O código da opção "Incorporar um mapa" e o link de compartilhamento são gratuitos e não exigem uma chave. A chave de API só é necessária para desenvolvedores que criam o próprio aplicativo de mapas.
Como mostrar mais de um ponto no mapa?
Crie um mapa personalizado no Google My Maps com todos os seus locais, compartilhe-o publicamente e use o endereço de incorporação no bloco iframe ou no bloco de HTML personalizado.
O mapa incorporado deixa a página mais lenta?
Um pouco. Por isso, o código acima usa carregamento lento. Em uma página feita para levar pessoas até um endereço, o botão de rotas é mais importante que a imagem do mapa.
Posso adicionar um mapa no plano gratuito?
O botão de rotas, sim. O bloco iframe exige o plano Starter, e o bloco de HTML personalizado exige o Pro. A página de planos mostra o que está incluído em cada um.
O que faço se meu estabelecimento mudar de endereço?
Altere o destino do link curto usado no botão de rotas e substitua o endereço de incorporação. Nenhum material impresso precisa ser alterado.
Verificações finais
- O botão de rotas abre o aplicativo de mapas no celular e uma página de mapa no computador.
- O mapa incorporado mostra o ponto correto e se ajusta à largura da página no celular.
- O CEP e o horário de funcionamento estão na página.
- A página tem apenas 1 mapa.
- Você fez o teste dentro do Instagram, e não apenas no navegador.
