Conformidade, design, qualidade do código e listagem do Marketplace de ativos da HubSpot

Os fornecedores de ativos no marketplace devem aderir aos seguintes padrões definidos pela HubSpot ao enviar temas (juntamente com os modelos e módulos do tema). Essas normas se aplicam a todos os ativos no marketplace. 

Os fornecedores do Marketplace devem manter sempre as informações dos seus fornecedores atualizadas. A HubSpot reserva-se ao direito de remover ou não aprovar qualquer listagem de ativos onde as informações do fonecedor (como e-mail ou site) estejam imprecisas, ausentes ou não estejam mais funcionando.

No momento, você somente pode enviar temas para o Marketplace de ativos. Modelos e módulos somente podem ser enviados como parte de um tema. Os temas não podem usar recursos como HubDB e funções sem servidor. Saiba mais sobre os limites de temas.

Os arquivos de ativos de terceiros devem ser carregados no HubSpot CDN, a menos que sejam de uma fonte confiável, como JSDelivr , Google Hosted Libraries, CDNJS. Esses ativos podem ser adicionados à folha de estilo usando orecurso @import .

Observação: se você está incluindo arquivos em um módulo, deve usar os parâmetros css_assets e js_assets em seu arquivo meta.json (seção Arquivos com link em Ferramentas de design).

Os fornecedores do Marketplace de ativos podem oferecer até 20 temas gratuitos, não incluindo temas enviados por meio do programa de acelerador de temas

Todos os recursos devem conter uma estrutura de pastas adequada e ser agrupados em uma pasta principal, que deve descrever a listagem de produtos. Por exemplo, se você estiver criando um tema chamado “SuperAwesome” para o marketplace, sua estrutura deve ser semelhante à imagem abaixo.

Ao criar URLs de visualização, você deve usar seu próprio nome de domínio. Você não pode usar o domínio fornecido pela HubSpot, que segue a seguinte estrutura:
[IDconta].hs-sites.com

Abaixo estão os requisitos que devem ser cumpridos ao projetar os ativos.

Seus ativos devem ser exibidos corretamente em larguras/resoluções de desktop e dispositivos móveis comuns. Isso significa que os ativos devem ser exibidos corretamente ao serem visualizados em telas de desktop e de dispositivos móveis. Seu ativo não deve exigir que os usuários precisem rolar para fora da página (a menos que esse seja o comportamento pretendido do ativo) ou causar resultados inesperados em diferentes navegadores.

 É recomendado testar usando dispositivos físicos e diferentes navegadores, mas você também pode usar serviços de terceiros, como:

• BrowserStack
• Responsinator
• Sauce Labs

Todos os ativos devem oferecer suporte aos navegadores compatíveis com o HubSpot. Para uma lista completa, consulte o artigo na central de conhecimento.

O design deve apresentar alta qualidade estética e apelo visual. Abaixo estão alguns exemplos de estéticas de design deficientes que invalidariam um envio ao Marketplace de ativos:

• Os designs são muito semelhantes aos itens existentes: seu design se assemelha muito a um existente e pode causar confusão ao diferenciá-lo.
• Espaçamento, preenchimento, margem ou altura da linha inconsistentes nos elementos: seu design tem um espaçamento inconsistente entre os elementos, fazendo com que os usuários não consigam discernir a visibilidade entre seções ou grupos de textos.
• Uso de imagens inadequadas, com marca d'água, pixelizadas ou não licenciadas: seu design deve usar imagens apropriadas. As imagens encontradas por meio de uma pesquisa de "imagem" no mecanismo de pesquisa não são licenciadas para uso público. Se você está procurando imagens gratuitas, recomendamos ler nosso post no blog sobre sites de imagens gratuitas.
• Uso de cores que não são complementares: seu design deve conter um esquema de cores que seja esteticamente agradável. Ao escolher esquemas de cores, recomendamos fortemente que você pense em padrões de acessibilidade para criar um design inclusivo.
• Elementos desalinhados ou colocados de forma inconsistente: seu design deve ter um fluxo visual lógico e não causar desordem visual. Um exemplo disso seria ter caixas de texto flutuantes que se sobrepõem involuntariamente em áreas onde não se espera que o texto seja colocado.

Você deve usar convenções de nomenclatura descritiva ao rotular seus ativos. Por exemplo, se estiver criando um módulo que permite que os usuários mostrem imagens em um formato de listagem de galeria com filtros:

• Boa nomenclatura: galeria de imagens com filtros
• Nomenclatura ruim: galeria

Ao criar modelos, consulte a documentação de anotação do modelo. Você deve usar a anotação label que controla o rótulo que os criadores de conteúdo veem ao escolher um modelo de página no fluxo de criação de página.

Rótulos de módulo, modelo e seção não devem incluir o nome do ativo. Por exemplo, se seu tema se chamar "Gizmo", o rótulo não poderá conter o nome do tema, como "Gizmo-Slider". 

Saiba mais sobre os requisitos de conteúdo do módulo.

Todos os versos, imagens, mídias e conteúdo padrão usados no ativo deve corresponder ao que está anunciado na página de listagem e no site de demonstração.

Por exemplo, se sua listagem de tema for voltada para imóveis com uma demonstração funcional, o usuário final deverá receber esse tema. Se, após a compra, o usuário final receber um tema voltado para fitness, isso será considerado publicidade através de produto dissimulado, o que é inaceitável.

Não é permitido o envio de ativos com diferentes variações do seguinte:

• Variações de cor: ativos idênticos com esquemas de cores diferentes não serão contados como ativos exclusivos. Por exemplo, você não pode enviar um ativo com um tema na cor azul e, em seguida, enviar uma versão em vermelho dele.  
• Layouts de modelo: o envio de ativos como “Landing page com barra lateral direita” e “Landing page com barra lateral esquerda”, em que a barra lateral foi simplesmente trocada de lado, não equivale a instâncias exclusivas separadas de um ativo.
• Variação de conteúdo: enviar um ativo com conteúdo voltado para educação e enviar o mesmo ativo com conteúdo voltado para imóveis não equivale a uma instância exclusiva separada de um ativo.

Ativos não devem usar elementos de uma listagem do Marketplace de ativos existente. Qualquer ativo comprado/baixado ou que seja uma versão clonada de um comprado/baixado do Marketplace de ativos será rejeitado. 

Ao incluir folhas de estilo ou arquivos JavaScript em seus temas, é recomendável usar a função require_css e a função require_js ao incluir esses arquivos. É recomendado carregar o JavaScript de bloqueio de renderização no rodapé para melhorar o desempenho.

Ao incluir folhas de estilo ou arquivos JavaScript no módulo de um tema, é altamente recomendável vincular essas dependências de arquivo ao módulo. Saiba mais sobre os requisitos de qualidade do código do módulo.

Ao aplicar IDs e classes, você deve usar nomes apropriados e seguir uma convenção de nomenclatura consistente. Existem muitas metodologias diferentes de convenção de nomenclatura na web. Veja abaixo alguns exemplos:

• BEM: https://en.bem.info/methodology/naming-convention/
• ABEM: https://css-tricks.com/abem-useful-adaptation-bem/
• ITCSS: https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
  • https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528

Você nunca deve estilizar seu conteúdo com base em classes geradas por padrão que fazem parte da estrutura organizacional de seus sites. Isso inclui, sem limitação, a seguinte lista de classes/identificações geradas pela HubSpot em modelos e módulos:

As classes geradas por padrão pela HubSpot estão sempre sujeitas a alterações. Em vez disso, você deve usar classes personalizadas que são atribuídas por meio das Ferramentas de design nos campos de classe designados ou por meio do desenvolvimento local, adicionando uma classe personalizada às suas tags de elemento.

Você não deve incluir identificações ou classes personalizadas no conteúdo do Editor de rich text por meio da opção "Código-fonte". Classes ou identificações adicionadas por meio desta opção podem ser facilmente substituídas (direta ou indiretamente), causando problemas no modelo.

Seu ativo não deve incluir nenhum código ou itens que não sejam necessários para que ele funcione. Isso inclui, sem limitação:

• Folhas de estilo ou scripts não utilizados 
• Código comentado 
• Código não utilizado

Há uma diferença entre o código comentado e os comentários em código. Se estiver fornecendo contexto em seu código para fins de esclarecimento, use o delimitador de comentários, pois isso permitirá que você comente sobre seu código e também não exiba esses comentários nas visualizações "Exibir fonte" ou "Inspecionar" de uma página. Veja abaixo um exemplo.

No seu tema, todos os módulos padrão da HubSpot devem ser estilizados e exibidos corretamente em todos os modelos enviados.

Um tema, juntamente com seus modelos e módulos, não deve exibir nenhum erro nas Ferramentas de design ou no console do navegador. Um exemplo de erros dentro das Ferramentas de design é mostrado abaixo:

Sua listagem, se estiver usando ativos de terceiros, deve ser carregado em HTTPS para garantir a segurança adequada. Da mesma forma, todo código deve renderizar corretamente ao ser visualizado por HTTPS. Isso evita avisos de conteúdo misto no console do navegador e garante que todo o conteúdo seja exibido corretamente.

Os itens a seguir são os requisitos ao listar seu ativo no marketplace de ativos. A HubSpot reserva-se o direito de modificar as informações sobre o envio da sua listagem de ativos para cumprir os seguintes requisitos.

Ao nomear seu ativo, confira se usou um nome exclusivo que ajudará seu ativo a se destacar. O item a seguir não será permitido ao nomear seu ativo:

• Uso da palavra “tema”, “módulo” ou “seção” para identificar o tipo de ativo. Isso é desnecessário, pois já nos certificamos de categorizar os ativos por esses tipos. 
  • Exemplo: “Tema de exemplo”, “Módulo de acordeão fácil”, “E-mail de envio único”
• O nome da sua empresa. As listagens de ativos já indicam o nome e as informações do fonecedor de ativos na página de listagem. 
  • Exemplo: “Growth by HubSpot”, “Slider | HubSpot”, “HubSpot 's Super Easy Mailer”
• Números de versão. Nosso marketplace utiliza seu próprio sistema de versionamento para ativos publicados, que está indicado na listagem de ativos. 
  • Exemplo: “Growth - 1.21”, “Growth v2”, “Growth 2-1”

Saiba mais sobre nomenclatura de módulos e outros requisitos de conteúdo.

As descrições devem ser um resumo do seu ativo e incluir os principais pontos de venda e como o seu ativo pode ajudar os compradores a atingir seus objetivos. Ao escrever descrições para temas, você não precisa incluir uma lista dos módulos ou modelos incluídos no tema, pois já os listamos na página de listagem de ativos.

Suas imagens para seu ativo devem mostrar o próprio ativo como o foco principal da imagem. Pelo menos 75% do conteúdo de uma imagem deve mostrar seu ativo.

Suas imagens não podem conter nenhuma das seguintes opções abaixo. Se isso acontecer, vamos removê-las a nosso exclusivo critério.

• Excesso de palavras/slogans de marketing, texto ou branding
  • Exemplo: “Mais de 100 recursos além do suporte!!!” ou sobrepor texto/marca sobre a imagem do seu ativo.
• Imagens de indivíduos (reais ou fictícios) posando, apontando ou segurando itens.
  • Exemplo: uso de uma imagem de banco de imagens de uma pessoa segurando um computador com seu ativo na tela.
• Badges e/ou banners contendo informações relacionadas a revisões e instalações de seus ativos, níveis ou badges de parceiros da HubSpot (se houver) ou classificação de desempenho do site. Esses tipos de dados podem flutuar e têm o potencial de enganar outras pessoas. Se você for um parceiro da HubSpot e quiser exibir seu nível e/ou badge de parceiro, verifique se é a versão mais atual.

Não se esqueça de usar imagens em tamanho real do seu ativo para mostrar sua aparência e função. As seguintes dimensões de imagem são altamente recomendadas para a melhor experiência de visualização da listagem de seus ativos. 

• Imagem da miniatura:
  • Tamanho: mínimo 480px x 360px (proporção 4:3)
  • Formatos: JPG, JPEG, PNG
• Imagens do tema:
  • Largura mínima: 1160px
  • Formatos: JPG, JPEG, PNG
• Imagens em destaque: 
  • Tamanho: mínimo 480px × 360px (proporção 4:3)
  • Formatos: JPG, JPEG, PNG
• Exemplos de clientes:
  • Tamanho: mínimo 480px x 360px (proporção 4:3)
  • Formatos: JPG, JPEG, PNG

Seu vídeo de demonstração deve mostrar o ativo em ação e transmitir casos de uso adequados. Os vídeos devem estar no formato mp4 e recomendamos o uso de uma proporção de 4:3 ou 16:9 para uma visualização ideal.

Os títulos de recursos são exibidos na exibição de lista do Marketplace de ativos e são uma das primeiras coisas que seus prospects veem.

Use a seção de recursos para destacar os principais recursos que seu ativo contém. Você também deve explicar como seu ativo pode ajudar a resolver certos problemas ou casos de uso para potenciais compradores. Dentro da seção de recursos, você pode usar imagens baseadas em marketing para transmitir conjuntos de recursos. Por exemplo, usando uma colagem de imagens mostrando estilos de botão.

A HubSpot fornece um conjunto de tags padrão para atribuir ao seu tema. Se uma determinada tag não estiver disponível, você pode adicionar uma nova.

Ao escolher tags de pesquisa para seus ativos:

• Use aquelas que reflitam com precisão o ativo que está sendo listado.
• Você não pode usar tags que contenham o seguinte:
  • Nomes da empresa, como HubSpot ou Empresa de exemplo.
  • Termos relativos como "melhor avaliado", "melhor" ou "número um".
  • Tags que descrevem o tipo de ativo, como "tema", "módulo" ou "e-mail", pois estão implícitas com base no tipo de ativo que está sendo visualizado.
  • Profanação ou linguagem depreciativa.

Exemplos de clientes (ou seja, sites funcionais de seus clientes) são importantes para que os clientes vejam como outras empresas estão usando seu ativo. Isso permite que potenciais compradores tenham uma ideia de como usar seu ativo e também ver o nível de personalização que ele pode ter. É muito recomendável garantir que você tenha permissão por escrito de seus clientes para vincular o site deles. Se solicitado, disponibilize a permissão por escrito do seu cliente para verificação.

O HubSpot reserva-se ao direito de rejeitar ativos por razões não listadas acima. Em todos os casos, se a rejeição acontecer, um engenheiro de controle de qualidade da HubSpot fornecerá feedback por e-mail.

Os ativos devem ser aprovados em três reenvios ou serão automaticamente rejeitados. 

Nossos engenheiros de controle de qualidade trabalham a partir de uma fila de ativos enviados. Os ativos reprovados no controle de qualidade ficarão no final da fila quando reenviados. Também não podemos fornecer informações sobre a posição dos seus ativos ou prazo para revisão na fila devido ao volume flutuante de ativos enviados. Seguir nossas instruções para enviar os ativos ajudará a garantir que seu ativo passe pela primeira vez em nosso processo de controle de qualidade. 

Os fonecedores do Marketplace de ativos são responsáveis por todos os códigos e arquivos que são carregados. Devem apoiar seu próprio trabalho durante a listagem no marketplace se houver algum problema com seu código ou arquivos.

Os fonecedores do Marketplace de ativos e sua equipe (incluindo outras pessoas da empresa que podem não ter trabalhado nos ativos) não podem avaliar suas próprias listas.

Os fonecedores do Marketplace de ativos devem fornecer um recibo detalhado se solicitado, que inclua:

• Nome da listagem de ativos
• Descrição da listagem de ativos
• Data de compra do ativo
• Preço do ativo
• Informações de imposto de IVA (se aplicável)
• Informações da empresa do fonecedor do Marketplace de ativos

O HubSpot reserva-se o direito de remover listagens de marketplace por razões que incluem, sem limitação:

• Bugs presentes no ativo
• Ativos de terceiros na quebra de envio
• Ativo não compatível com navegadores suportados pela HubSpot (Seção 2.1.2).
• Uso de material protegido por direitos autorais, como imagens, ícones, fontes, áudio e vídeo não licenciados para distribuição
• Módulos que rastreiam usuários sem o consentimento informado e explícito.
• Ativos (incluindo links para conteúdo do Marketplace de ativos ou da sua demonstração de ativos) que incluem:
  • Promover ou participar de atividades ilegais
  • Conteúdo depreciativo e/ou malicioso 
  • Alegações desonestas ou falsas
  • Conteúdo ofensivo sobre raça, religião, idade, sexo ou orientação sexual
• Os módulos serão removidos se o módulo afetar outros elementos da página/e-mail (consulte nossos Requisitos dos módulos, seção 5 sobre a qualidade do código)

Respeitamos os direitos de propriedade intelectual de outras pessoas e solicitamos que nossos fonecedores de ativos façam o mesmo. Podemos, a nosso próprio critério, suspender o acesso ou encerrar as contas dos fonecedores de ativos que violarem os direitos de propriedade intelectual de outras pessoas. Não envie nenhum ativo (ou seja, temas, modelos e módulos) com base em ativos de terceiros, a menos que você tenha permissão para usar esse ativo do proprietário dos direitos autorais. Além disso, não envie nenhum ativo que incorpore logotipos de outras empresas, a menos que você obtenha a permissão delas. Se você comprar algum ativo (individualmente ou como parte de outro produto) por meio de mercados de terceiros e modificá-los para trabalhar com os produtos da HubSpot, não se esqueça de ser o proprietário dos direitos autorais do ativo ou de ter uma licença subjacente que permita que o ativo seja vendido e/ou distribuído em mercados de terceiros como o nosso. Caso contrário, esse ativo pode não ser aprovado por nós. Se você acredita que seu trabalho foi copiado de forma que constitua violação de direitos autorais em nosso marketplace de ativos, siga as etapas descritas na seção Reivindicações de violação de direitos autorais em nossa página Termos de uso do site.

Os ativos não devem incluir imagens da integração do Shutterstock com o HubSpot.

A HubSpot oferece duas opções de gateway de pagamento que podem ser conectadas à sua conta de fonecedor do Marketplace de ativos. São o Stripe e o PayPal. O HubSpot incentiva fortemente os fonecedores do Marketplace de ativos a usar o gateway de pagamento do Stripe, se estiver disponível em seu país. Se o Stripe não estiver disponível no seu país, recomendamos o uso do Gateway de pagamento do PayPal.