Viewer: visualize o produto
Apresentação do modelo 3D e de sua aparência. Útil quando o mais importante é mostrar o produto de diferentes ângulos sem disponibilizar a edição da estampa.
Integração de e-commerce - do projeto ao pedido
Incorpore o Alter Product ao seu site: WordPress + WooCommerce ou API
Adicione apresentação em 3D, configuração de variações e personalização de produtos ao seu site. O cliente visualiza o produto, escolhe as opções e prepara o projeto na sua loja, enquanto você gerencia o catálogo e os pedidos no seu sistema.
Escolha o plugin para WordPress com WooCommerce instalado para realizar a configuração sem escrever código de integração. Se você desenvolve seu próprio site ou loja, conecte as ferramentas incorporadas ao backend e ao carrinho usando a Public API e eventos postMessage.
As ilustrações mostram a interface real, extraída de gravações e do painel do plugin. Os nomes dos botões nas imagens estão em inglês; a aparência da ferramenta depende da configuração da loja.
Dois caminhos para ter sua loja com personalização
Você pode preparar o mesmo projeto de produto para apresentação, configuração ou edição da estampa. Escolha como conectá-lo à loja de acordo com seu site e o trabalho de desenvolvimento necessário.
Plugin ou integração própria?
O plugin oferece suporte pronto para WordPress e WooCommerce. A API permite criar sua própria conexão com outra plataforma, uma aplicação headless ou um sistema de pedidos existente.
| Área | WordPress + WooCommerce | Sistema próprio pela API |
|---|---|---|
| Configuração inicial | Instalação do plugin e assistente de conexão no painel do WordPress. | Implementação da conexão no backend e da incorporação no site. |
| Produtos e variações | Associação do projeto ao produto WooCommerce e sincronização das variações. | Associação dos identificadores de produtos e opções aos dados da sua loja. |
| Carrinho e pedidos | Suporte pronto para configurações, projetos dos clientes e prévias no WooCommerce. | Tratamento dos eventos da ferramenta incorporada e sincronização dos pedidos no seu sistema. |
| Arquivos e recursos | Biblioteca local, projetos e arquivos de pedidos no servidor do WordPress. | Armazenamento e acesso aos dados de acordo com o modo de integração escolhido. A opção com armazenamento próprio exige que você implemente esse suporte. |
Qual ferramenta disponibilizar ao cliente?
Escolha a ferramenta de acordo com o que o cliente deve fazer no site. Prepare previamente o projeto e as regras de personalização no Designer.
Configurator: escolha uma variação
Seleção de opções de produto previamente preparadas, como tamanho, cor ou material. O cliente vê a mudança no modelo e envia a configuração ao carrinho.
Customizer: prepare sua própria estampa
Personalização usando as ferramentas, imagens, textos e modelos disponibilizados. O projeto salvo pelo cliente fica associado a um item do carrinho ou do pedido.
Designer: prepare seu catálogo
Área de trabalho do proprietário da loja. Aqui você prepara a composição, as variações, as áreas de impressão e as configurações das ferramentas para os clientes. O acesso à edição administrativa é separado do uso da loja.
WordPress + WooCommerce: da instalação ao produto pronto
O Alter Product é um plugin para WordPress. Para integrar a loja, ele exige que o WooCommerce esteja instalado e ativo. A configuração habitual é feita no painel, sem criar sua própria implementação de API e carrinho.
Requisitos: WordPress, WooCommerce, HTTPS e plano Business
Para incorporar o Alter Product ao seu site, você precisa de uma assinatura Business ativa ou de um plano superior que inclua esse recurso. Isso se aplica tanto ao plugin WordPress + WooCommerce quanto à integração própria pela API. Os planos Personal FREE e Personal não incluem a incorporação à sua loja.
Para usar o plugin, prepare o WordPress com WooCommerce instalado e ativo, além de uma conta Alter Product. Armazenar arquivos na sua hospedagem não substitui a assinatura necessária: o Alter Product continua fornecendo a aplicação e autorizando sua execução.
- Disponibilize a loja por HTTPS com um certificado SSL/TLS válido para o domínio. Isso é necessário para que as ferramentas incorporadas funcionem corretamente no site público.
- Ative os links permanentes amigáveis do WordPress conforme as instruções de instalação.
- Reserve espaço na hospedagem para modelos, imagens, projetos e arquivos de pedidos. A biblioteca da loja utiliza os recursos do seu servidor.
Por que HTTPS e um certificado SSL/TLS são necessários?
O Alter Product funciona no site da loja dentro de um iframe. Os navegadores restringem o acesso a algumas funções usadas pela aplicação quando a página não oferece um contexto seguro. O HTTPS criptografa a conexão, e um certificado válido permite ao navegador verificar o domínio.
O navegador também verifica a página que contém o iframe. Por isso, o endereço HTTPS da aplicação Alter Product não basta se a loja usa HTTP. O HTTPS também precisa estar ativo no seu site, onde a ferramenta é incorporada. Isso decorre das regras de segurança dos navegadores para aplicações incorporadas.
- Ative um certificado SSL/TLS no seu provedor de hospedagem e confira se ele é válido para o domínio da loja.
- Configure os endereços do site WordPress e o domínio da integração para usar HTTPS. Ative o redirecionamento de HTTP para HTTPS.
- Abra a página do produto por HTTPS e confira se o navegador indica problemas com o certificado ou com recursos carregados por HTTP.
Conecte a loja pelo Auto Connect
A conexão automática orienta você na autorização da conta Alter Product e na configuração da loja. Nesse processo, não é necessário transferir as chaves de API manualmente.
- No WordPress, acesse Plugins → Adicionar novo, procure Alter Product, instale e ative o plugin.
- Abra o painel do Alter Product e escolha Auto Connect. Entre na conta Alter Product correta, confira a loja e autorize a conexão.
- Volte ao WordPress. Escolha o modelo inicial e baixe os recursos necessários. Aguarde a conclusão dos downloads e das verificações de prontidão.
- Confira as páginas de ferramentas criadas e as configurações de exibição; depois, prepare o produto.
Associe o projeto e sincronize as variações
Na edição do produto WooCommerce, abra a aba Alter Product. Crie um projeto ou escolha um existente e abra o Designer. Configure a estampa, as opções disponíveis e as áreas de impressão desse produto.
- Para um produto variável, prepare os atributos, como tamanhos, e as variações correspondentes no WooCommerce.
- No Designer, use Sync variants para associar as opções do projeto às variações do produto. Confira também as seleções padrão que não são atributos de variação no WooCommerce.
- Salve o projeto e o produto. Escolha a ferramenta exibida na página e a forma de abri-la.
- Confira o resultado na página do produto: selecione algumas variações, prepare um projeto e prossiga para o carrinho.
Sua biblioteca no servidor do WordPress
Você armazena modelos, projetos, imagens e arquivos de pedidos na hospedagem em que seu WordPress funciona. Os recursos adicionados localmente atendem à sua loja e não passam a fazer parte da biblioteca pública do Alter Product para outras lojas.
O que é armazenado localmente?
O plugin salva arquivos de modelos, bibliotecas, projetos, mockups e pedidos no ambiente do WordPress. Os dados dos projetos do gerador e de suas revisões também são salvos no banco de dados dessa instalação.
Você pode adicionar seus próprios materiais e importar recursos selecionados do Alter Product. Após o download, passa a usar uma cópia local. Importar, verificar atualizações e baixar novas versões são ações separadas.
| Local no painel | O que você faz ali |
|---|---|
| Recursos | Gerencie modelos, imagens, modelos de projeto, fundos, logotipos, texturas e ambientes, entre outros. As formas de adicionar dependem do tipo de recurso. |
| Gerador de modelos | Crie projetos locais a partir de modelos e trabalhe com modelos associados ao gerador. |
| Projetos de produtos / Designer | Prepare ou importe um projeto, edite-o e associe-o a um produto da loja. |
| Pedidos WooCommerce | Acesse os projetos salvos dos clientes, as prévias e os arquivos necessários para atender ao pedido. |
Arquivos locais, aplicação Alter Product incorporada
Você mantém os recursos na sua hospedagem, enquanto a interface das ferramentas é carregada do Alter Product em um iframe. O serviço Alter Product verifica o acesso da conta, o plano e as sessões, além de fornecer o catálogo para importação. A integração exige conexão com esse serviço.
Nos backups, preserve o banco de dados, o diretório de arquivos e as chaves e salts do WordPress necessários para ler os dados criptografados do plugin. Assim, você consegue restaurar tanto as imagens visíveis quanto os dados necessários para continuar trabalhando.
Personalização no site da sua marca
A ferramenta incorporada pode fazer parte da página do produto ou de uma página separada do WordPress. O cliente permanece no fluxo de compra da sua loja, e o WooCommerce cuida do carrinho e do pedido.
Página do produto, página da ferramenta ou bloco
Escolha a forma de exibição de acordo com o layout da loja: ferramenta na página do produto, botão para uma página dedicada ou incorporação pelos blocos e shortcodes disponíveis. Viewer, Configurator e Customizer têm funções diferentes; você não precisa disponibilizar todos ao cliente ao mesmo tempo.
- Exiba o Viewer onde o cliente deve visualizar o modelo do produto.
- Use o Configurator quando vender variações e opções previamente preparadas.
- Escolha o Customizer quando o cliente precisar adicionar texto, uma imagem ou alterar a composição da estampa.
Fundos, logotipo e idioma próprios
Adapte a apresentação do produto à sua marca. No plugin, você gerencia fundos e logotipos locais e as configurações visuais das ferramentas incorporadas. A disponibilidade de cada opção depende do plano.
- O fundo da cena, as cores da interface e a aparência preparada para o projeto ajudam a manter a identidade visual da loja.
- A aplicação e o plugin oferecem 22 idiomas. O idioma do painel do WordPress é definido por usuário, e o idioma do site, nas configurações do site.
- Prepare os nomes dos produtos, os textos das estampas e as descrições do catálogo nos idiomas dos seus clientes. O suporte a um idioma na interface não significa a tradução automática do conteúdo da loja.
Do projeto do cliente ao item do pedido
O cliente escolhe uma variação e prepara a personalização. O plugin associa a configuração e o projeto salvo ao item do carrinho e, depois, ao pedido WooCommerce. Os mockups disponíveis ajudam a identificar a estampa encomendada.
- O cliente abre o produto ou a ferramenta associada e escolhe as opções.
- Ao personalizar, salva o projeto e adiciona o produto ao carrinho.
- No carrinho, confere o produto, a configuração e a prévia disponível do projeto; depois, segue para a finalização de compra do WooCommerce.
- No painel do pedido, o proprietário abre o projeto salvo e prepara sua produção.
Processamento de pedidos, POD e IA opcional
Conectar a loja às ferramentas 3D é o início do processo. A partir do projeto preparado, você pode baixar arquivos para produção própria ou usar a integração do plugin com um fornecedor de impressão sob demanda.
Conecte o Printify ou o Printful
Nas configurações do plugin, configure a conexão com o fornecedor escolhido. Depois, associe o produto, as variações e os locais de impressão ao catálogo do fornecedor, prepare os arquivos e envie o pedido para produção pelo WooCommerce.
- Ajuste as áreas de impressão e o formato dos arquivos ao produto e ao fornecedor específicos.
- Confira os arquivos gerados e a variação do pedido antes de enviá-lo para produção.
- Use a atualização dos status dos pedidos e dos dados de envio no plugin.
- Se você realiza a produção, baixe arquivos PDF, SVG ou PNG conforme os recursos do projeto e as configurações de exportação.
IA para preparar imagens no painel do proprietário
Você pode configurar sua própria conexão com um provedor de IA e usar os recursos disponíveis de geração ou aprimoramento de imagens durante a criação do projeto. As solicitações do plugin saem do WordPress para o provedor escolhido e são cobradas na sua conta desse provedor.
Sessões de incorporação: validade e consumo do limite
Uma sessão é uma autorização temporária para abrir uma ferramenta específica na sua loja. Ela ajuda a disponibilizar produtos aos clientes com segurança e é uma unidade contabilizada no limite mensal de sessões de incorporação. Não equivale a um clique, um visitante único ou um pedido.
Por quanto tempo a chave de sessão é válida?
Ao iniciar uma ferramenta incorporada, a integração obtém um token temporário, ou chave de sessão. As credenciais permanentes da conta permanecem no servidor. O cliente não precisa copiar chaves nem entrar na conta Alter Product do proprietário.
Na implementação atual, a validade padrão do token é de 15 minutos. O servidor pode definir outro prazo; por isso, a integração utiliza a data de expiração da sessão recebida. Reutilizar o token não estende esse prazo. Para autorizar novamente o acesso após a expiração, é necessária uma nova sessão.
Atualizar a página consome outra sessão?
Depende da ferramenta e de ela ainda ter uma sessão adequada e válida. O plugin não usa uma sessão compartilhada entre todos os visitantes e todos os produtos. As regras abaixo descrevem seu funcionamento atual.
| Situação | O que acontece com a sessão? | Impacto no limite |
|---|---|---|
| Primeira abertura da ferramenta sem uma sessão correspondente | A integração solicita um novo token para a ferramenta e o contexto do produto. | A emissão bem-sucedida de um novo token consome uma sessão. |
| Girar o modelo, mudar a cor ou editar um texto na ferramenta aberta | O trabalho ocorre dentro da sessão iniciada. | Essas ações, por si só, não significam que novos tokens sejam emitidos. |
| Atualização completa da página com Viewer ou Configurator | O plugin geralmente obtém um novo token após a página ser recarregada. A memória de sessão dessas ferramentas não é preservada entre atualizações completas. | Cada nova emissão bem-sucedida de um token consome outra sessão. |
| Atualização do Customizer na mesma aba | O Customizer pode reutilizar a sessão salva se ela corresponder à loja, ao produto, ao pedido e ao modo de trabalho e não estiver próxima da expiração. | A reutilização não aumenta o contador. Se as condições não forem atendidas, será necessária uma nova sessão. |
| Expiração do token, outro produto ou mudança de contexto de trabalho | Pode ser necessária uma nova autorização e um novo token. A disponibilidade do armazenamento do navegador também afeta a possibilidade de reutilização. | Um token recém-emitido aumenta o consumo do limite. |
Como considerar as sessões nos custos e no plano da loja?
O contador aumenta quando a API emite um novo token com sucesso. Usar um token válido já emitido não é uma nova emissão. Por isso, ao escolher um plano, considere as inicializações das ferramentas, as atualizações e as reaberturas, além do número de pedidos ou visitantes.
As ferramentas incorporadas à mesma loja compartilham um limite mensal de sessões. O contador é mantido separadamente para cada loja, por mês do calendário em UTC. Novas sessões do Designer e do Gerador de modelos incorporados ao painel do WordPress também aumentam esse contador. Apenas baixar um modelo disponível pela API de importação não abre uma sessão do editor.
Quando o limite é atingido, o sistema recusa a emissão de novas sessões. Trata-se de um limite de uso da assinatura; confira a quantidade atual incluída no seu plano.
- Inicie a ferramenta onde o cliente realmente a utiliza. Para apresentar listas de produtos, você pode usar fotos comuns e mockups prontos.
- Na integração própria pela API, evite criar uma sessão a cada renderização do componente ou mudança de opção. Reutilize uma sessão válida apenas no contexto ao qual ela pertence.
- Planeje o limite separadamente dos custos de produção POD e geração por IA, que decorrem do uso desses serviços externos.
Integração própria pela API
Você tem uma loja própria, uma aplicação headless ou um sistema de pedidos próprio? Pode criar sua própria camada de integração usando a Public API do Alter Product e incorporar as ferramentas necessárias ao site. Esse caminho exige desenvolvimento.
Conecte o Alter Product usando sua tecnologia
A Public API utiliza requisições HTTP e dados JSON. Assim, você pode criar a integração na linguagem e no ambiente do seu backend. Não é necessário reconstruir sua loja em WordPress para incorporar as ferramentas Alter Product.
Abaixo estão exemplos de tecnologias para implementar a conexão no servidor. Em todas elas, as etapas são as mesmas: autorizar o acesso à API, criar a sessão da ferramenta e conectar produtos, carrinho e pedidos ao seu sistema.
JavaScript e TypeScript / Node.js
Adicione a integração ao backend em Node.js, por exemplo, com Express ou NestJS. Chame a API pelo servidor e disponibilize ao frontend os dados necessários para incorporar a ferramenta.
Python
Conecte sua aplicação Python existente, como Django ou FastAPI, aos produtos, sessões e pedidos do Alter Product por requisições HTTP.
PHP
Use PHP em uma loja ou aplicação própria, por exemplo, Laravel ou Symfony. Você pode criar sua própria integração pela API independentemente do plugin pronto para WordPress.
Java
Integre as ferramentas a um backend Java, como Spring, e associe os dados dos projetos ao seu catálogo de produtos e processamento de pedidos.
C# / .NET
Use um backend .NET, como ASP.NET Core, para autorizar o acesso, criar sessões e enviar dados aos processos existentes da loja.
Go
Implemente a conexão em um serviço escrito em Go. O cliente HTTP padrão permite processar requisições à API e respostas JSON.
Ruby
Adicione a integração a uma aplicação Ruby, como Ruby on Rails, e use seu próprio modelo de produtos, carrinho e processamento de pedidos.
Rust
Conecte o backend Rust usando um cliente HTTP e suporte a JSON. Você pode incluir sessões e eventos de compra na sua arquitetura de serviços.
Frontend adaptado ao seu site
No navegador, você pode usar React, Vue, Angular ou HTML e JavaScript puros. TypeScript também é adequado para implementar a comunicação. A página incorpora o iframe, trata eventos postMessage e se conecta ao seu backend.
O frontend cuida da aparência da página e das respostas do carrinho; o backend cuida das chamadas autenticadas à Public API. Em frameworks que combinam as duas camadas, como Next.js, mantenha as chaves permanentes e a criação de sessões exclusivamente na parte do servidor.
Você pode manter sua própria finalização de compra, sistema de pagamentos, CMS e processo de atendimento de pedidos. Na implementação, conecte esses elementos aos dados do projeto e aos eventos da ferramenta Alter Product escolhida.
O que a API fornece e o que seu sistema prepara?
O Alter Product fornece ferramentas 3D, dados de projetos e mecanismos de sessão. Seu backend os conecta aos produtos, contas de clientes, carrinho e processamento de pedidos. Você pode criar endpoints intermediários para seu frontend sem expor as credenciais do Alter Product no navegador.
| Camada | Responsabilidade |
|---|---|
| Frontend do seu site | Exibe o iframe, responde à comunicação da ferramenta e atualiza a interface da loja. |
| Seu backend | Autentica requisições à Public API, cria sessões, controla o acesso do cliente e salva associações com seu carrinho ou pedidos. |
| Public API do Alter Product | Fornece funções de conexão, produtos, associações de ferramentas, pedidos e acesso a arquivos e recursos. |
| Ferramenta incorporada | Exibe o modelo e permite configurar ou personalizar conforme o modo escolhido e o projeto preparado. |
Da autorização ao seu carrinho
Primeiro, configure a conexão e uma sessão de incorporação para um produto. Depois, adicione o tratamento da configuração, do salvamento do projeto e dos pedidos, conforme a ferramenta escolhida.
- Configure as credenciais da API e o domínio da loja. Teste a conexão com uma requisição executada no backend.
- Associe o produto da sua loja ao projeto e à ferramenta Alter Product adequada.
- Incorpore o iframe e implemente o início da comunicação. Crie uma sessão temporária no servidor e forneça-a à ferramenta conforme a documentação.
- Trate o evento de configuração ou personalização e salve os dados necessários no seu carrinho.
- Após a compra, sincronize o pedido e os dados e arquivos necessários com seu próprio sistema de atendimento.
Acesse as instruções da sua ferramenta
As instruções de incorporação apresentam parâmetros e exemplos. Os capítulos sobre postMessage explicam a comunicação com a página, e a documentação da API descreve as operações executadas pelo backend.
Viewer: incorporação básicaConfigurator: incorporação básicaCustomizer: incorporação básicaViewer: comunicação com a páginaConfigurator: comunicação com o carrinhoCustomizer: sessão e salvamento do projeto do clienteAPI: sincronização de pedidosAPI: recursos e importação de projetosAPI: acesso a arquivos
Teste todo o fluxo antes de começar a vender
Teste o produto como um cliente: da abertura da página até o projeto aparecer no pedido. Faça o teste no computador e no celular, inclusive sem estar conectado ao painel administrativo.
Lista rápida de verificação
Depois de preparar um produto, percorra todo o processo. Só então repita a configuração validada para os demais itens do catálogo.
- Confira se o plano Business ou superior está ativo e se o domínio funciona por HTTPS com um certificado SSL/TLS válido.
- Confira a visibilidade das páginas de ferramentas, a associação do projeto e a forma de incorporação escolhida.
- Escolha diferentes tamanhos e cores. Compare as opções do projeto com as variações e os preços da loja.
- No Customizer, adicione texto ou uma imagem, salve o projeto e adicione-o ao carrinho. Teste também a edição de uma personalização já adicionada.
- Confira a prévia, a quantidade e a configuração no carrinho e após fazer um pedido de teste.
- Abra o projeto associado ao pedido e confira os arquivos de impressão gerados. Se usar POD, teste também o mapeamento do fornecedor e o envio controlado da solicitação de produção.
- Confira a biblioteca disponível ao cliente, o idioma, a identidade visual e o comportamento do site no celular.