Componente Web Stories

- Recomendamos o uso de imagens em formato jpg nos tamanhos 640x853px ou 3x4.

- Para o funcionamento correto do web stories, recomendamos sempre habilitar para Indexar nos buscadores na aba de Tags da página e Habilitar versão Amp desta Página na aba de settings da página.

 

- Para visualizar o web stories no preview do storyblok, precisar mudar para a url: https://cms-claro-stg.clarobrasil.mobi/api/preview?secret=sYz8FlDsQc3VROj9dSMn6Att&slug=amp/site/

- A caixa de texto da descrição possui a formatação dos textos com  Parágrafo, Espaço, Negrito, Lista (com pontos), hiperlinks e Emojis.

 

- Segue a regra de cores para o background dos textos:

Para textos branco, o background será preto:

Para textos preto, o background pode será branco:

Para textos amarelos, o background será preto:

 

- Foi implementado a opção de inserir audio no formato Wav e mp3 nos WebStories, para aumentar os acessos orgânicos aos conteúdos de musica e filmes.

- Duração do vídeo: Limitar a duração do vídeo com menos de 15 segundos.

- Formatos de vídeo suportados: MP4 e WEBM para fazer uplod do vídeo no Storyblok.

- Tamanho máximo do arquivo de vídeo: Mantenha vídeos menores que 4MB para o melhor desempenho. (Considere dividir vídeos grandes em múltiplas páginas)

- Fotografe em 720p girado (1280h x 720w).

- Pelo menos 24 quadros por segundos.

- Recomendamos no máximo 250mb para o upload de vídeo no Storyblok (Plano Enterprise).

- O Cache tem o mesmo padrão que é utilizado hoje para as imagens no nosso plano.

- Recomenda-se deixar padrão de auto play para os vídeos.

- Não conseguimos utilizar vídeos de outras plataformas como Youtube, vimeo, Instagram, Tiktok dentro do web story, somente vídeos em MP4 e  WEBM carregados para dentro do storyblok.

 

*Ao criar um Web Stories com Vídeo, indicamos que sejam cadastrados os campos Título e Descrição, para que seja exibido corretamente no Hub de Web Stories.

 

Página de teste:

Navegar em: 

1- Conteúdo > Conteúdos Compartilhados > Web Story > Itens > Clicar em +Item e inserir o nome do arquivo.

2- Inserir o Web Story criado anteriormente na lista: Conteúdos Compartilhados > Web Story > Listas

 

Criar o item de Web Stories e inserir ele em uma lista, no item precisa preencher os campos abaixo:

- Background* Pode escolher Imagem ou vídeo

 

Na aba do menu "Campos personalizados":

- Você pode habilitar ou desabilidar uma cor de fundo para os textos

- Escolher uma cor individual para os textos Título, Subtítulo e Descrição (Primária, Secundária e vendas) 

- E pode selecionar o alinhamento vertical dos textos (Topo, Centro e Rodapé).

- Alinhamento horizontal dos textos (Esquerda, Centro e Direita)

- E por último você consegue determinar por quantos segundos vai durar a transição de cada stories, por padrão usamos 15 segundos.

 

Este campo serve para ser a Capa do WebStories com Smart Content ou para Web Stories comum. basta cadastrar um item na lista.

 

Este campo serve para cadastrar vários itens no Web Stories ou pode ser usado como a Capa do WebStories com Smart Content. A diferença de uma lista é que ela já vem pronta e o Item precisa selecionar um item por vez.

 

Este campo serve para listar itens vindos da Api de Claro tv+. Caso não seja cadastrada uma capa será exibido o primeiro item vindo da Api do Smart Content.

*Regra para o componente Hub de Web Stories: Para exibir o Smart Content no Hub, é obrigatório cadastrar a capa no Hub de Web stories.

 

- Contracapa do Smart Content: 

Este campo só deve ser usado ao cadastrar um Web Stories com Smart Content.

 

Este campo deve ser usado somente no caso em que o usuário queira alterar a capa do Web stories no componente Hub.

 

 

 

 

 

 

Smart Content Popularity Amp

 

Smart Content Popularity Near Real Time Amp

A partir daqui é só seguir com o cadastro que desejar para estes 2 tipos. Para maiores informações acessar a página: 

 

Para usar uma capa no Web Stories com SmartContent precisa:

- Criar uma lista de Web Stories, colocar o item criado nessa lista com a imagem que vai ser a capa e depois inserir essa lista na página dentro de "Lista de Web Story".

 

 

 

 

A partir daqui é só seguir com o cadastro de link normal, que funciona como qualquer link que usamos em outros componentes, lembrando que temos as opções de inserirmos ele à esquerda, centro ou direita com as cores "Primária", "Secundária" e de "Vendas" no webstories.

Para a funcionalidade do "Web Story Item" temos no menu a opçõa "Campos Personalizados" onde podemos inserir as variações para a cor de fundo sendo, Cor do Título, Cor do Subtítulo, Cor da Descrição, Alinhamento vertical dos textos, Alinhamento horizontal dos textos e a Duração da transição em segundos so seu Webstories.

Obs: Temos a opção de inserirmos mais de 2 links para um mesmo webstory, portanto é de suma importância avaliarmos como um todo na sua composição após montagem, para verificarmos se ficou funcional a apresentação para o usuário final.