Uso do External Content building block

Use este building block para incorporar conteúdo externo em seu Editor de Gráficos (por exemplo, vídeos, widget de contagem regressiva, mapas, entre outros).

Importante

O Elemento de External Content aceita apenas recursos externos servidos pelo protocolo HTTPS .

Como funciona?

O Conteúdo Externo renderiza uma página ou conteúdo incorporável de um URL

  1. Obtenha o URL que deseja incorporar:
    • URL de postagens públicas do Instagram (não oferece suporte ao vivo ou IGTV/Reels)
    • Google Maps
    • Widgets de clima
    • Contagem regressiva
    • Waze
    • Qualquer conteúdo com um URL.
  2. Cole o URL na seção Conteúdo incorporado do Inspetor.
  3. No Canvas você verá renderizado o conteúdo externo que acabou de adicionar. Você pode então usá-lo como um elemento entre o resto do seu Pacote de Gráficos.

Leve em consideração que, embora o produtor possa controlar quando o elemento é exibido por meio de sobreposições, não há uma maneira de controlar / operar o próprio conteúdo incorporado a partir do controle remoto porque ele está vindo de outro site.

A única maneira de interagir com o conteúdo dentro do elemento Embedded é clicando diretamente na janela de saída.

Propriedades

Conteúdo Embedado

Use este campo para adicionar o URL para exibir o conteúdo externo em seu Gráfico. Este campo pode ser vinculado, o que significa que você pode alterar o conteúdo dinamicamente se estiver usando um provedor de dados que fornece URLs.

Posição e tamanho


Posição: altera a posição do elemento External Content no Canvas de acordo com os eixos X e Y (em porcentagem em relação à resolução da tela configurada).

Tamanho: Altere o tamanho do elemento dentro do Canvas de acordo com sua largura e altura (em porcentagem em relação à resolução de tela configurada).

Aparência

Opacidade: Use para alterar a porcentagem de transparência do Elemento.

Bordas

Estilo: define os lados e o estilo da borda.

Largura: define a largura da borda.

Cor: escolha uma cor para a borda.

Raio: aumentar este número arredondará os cantos do elemento.

Aprenda como alterar essas propriedades específicas de bordas clicando aqui .

Casos de uso inspiradores

Clima

1. Selecione o elemento Conteúdo externo.

2. Obtenha o link e cole no campo URL do Inspetor.

Construindo o exemplo

No exemplo acima:

  • Usamos o widget meteorológico do site MetService https://www.metservice.com/
  • Há uma seleção de layouts, tamanhos e cores para escolher.
  • O widget mostra a previsão para diferentes cidades da Nova Zelândia.
  • Copiamos o código embed e ele foi inserido no Gráfico como um Conteúdo Externo.
  • Em seguida, apenas duplicamos o elemento copiando e colando e alterando a URL.
  • Também obtivemos o URL incorporado do Google Maps ( https://www.google.com/maps ) para mostrar o mapa em tela inteira.

Mapa de tráfego ao vivo

1. Selecione o elemento Conteúdo externo.

2. Obtenha o link e cole no campo URL do Inspetor.

Construindo o exemplo

Neste exemplo:

  • Estamos mostrando o tráfego ao vivo fornecido pelo Waze.
  • Vá para https://www.waze.com/en/livemap
  • Defina um local.
  • Obtenha informações de localização acionáveis incorporáveis para adicionar como um Conteúdo Externo em Gráficos.

Conteúdo Estatístico

1. Selecione o elemento Conteúdo externo.

2. Obtenha o link e cole no campo URL do Inspetor.

Construindo o exemplo

No exemplo acima:

  • Estamos exibindo um conteúdo de estatísticas em tela cheia com uma taxa de inflação.
  • Neste exemplo, construímos um gráfico com https://flourish.studio/
  • Transforme rapidamente suas planilhas em gráficos, mapas e histórias interativas online.
  • Obtenha o URL de incorporação para adicionar como um Conteúdo Externo em Gráficos.

Contagem regressiva

1. Selecione o elemento Conteúdo externo.

2. Obtenha o link e cole no campo URL do Inspetor.

Construindo o exemplo

No exemplo acima:

  • Estamos mostrando um cronômetro de contagem regressiva que pode ajudá-lo a fazer a contagem regressiva para qualquer evento especial, como uma stream ao vivo.
  • A contagem regressiva que usamos para este exemplo é um arquivo transparente que construímos em https://www.timeanddate.com/
  • Depois de definir e personalizar sua própria contagem regressiva, obtenha a URL incorporada para adicionar como um Conteúdo Externo em Gráficos.

Was this article helpful?