Todas as coleções
Viz Flowics
Building Blocks
Uso do External Content building block
Uso do External Content building block
Atualizado há mais de uma semana

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.

  • 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.

Respondeu à sua pergunta?