Cordova WhatsApp Sticker Plugin

Um plugin para o Cordova Apache usado para compartilhar stickers do WhatsApp.

Indice

• Plataformas Suportadas
• Instalação
• Como usar
  • Ionic
    • Exemplo
• Para evitar problemas
  • Imagens

Plataformas Suportadas

• iOS

Por enquanto, há apenas suporte para iOS, visto que, a forma na qual é compartilhado o Sticker é mais simples do que a usada no Android.

Instalação

cordova plugin add cordova-whatsapp-sticker-plugin

Como usar

Ionic

Caso queira baixar um código para ver como funciona, clique aqui para ver um repositório com um código implementando o plugin.

Usar no Ionic

Por enquanto, apenas é possivel utilizar o plugin no Ionic v3, visto que, no v4 há algums problemas na criação do serviço que se conecta com o plugin no cordova. Mas, se houver uma atualização, sinta-se a vontade de criar seu próprio serviço que deve funcionar sem problemas.

Primeiro, crie um provider e adicione o seguinte código:

import { Injectable } from '@angular/core';
import { IonicNativePlugin, Plugin, Cordova } from "@ionic-native/core";

@Plugin({
  pluginName: 'WhatsAppSticker',
  plugin: 'cordova-whatsapp-sticker-plugin',
  pluginRef: 'cordova.plugins.WhatsAppSticker',
  repo: '',
  platforms: ['iOS'],
})

/**
 * A classe que representa o serviço na qual se conecta com o cordova e executa o método.
 */
@Injectable()
export class WhatsappProvider extends IonicNativePlugin {

  /**
   * Método que envia as informações do Sticker Pack para o WhatsApp
   */
  @Cordova()
  sendToWhatsapp(stickerPack: string): Promise<any> {
    return;
  }

 }

/**
 * As opções do pacote de figurinhas
 */
export interface StickerOptions {

  /**
   * O link para acessar o aplicativo loja da Apple
   *
   * @note É opcional, mas deve ser incluido mesmo que seja com uma string em branco ''
   */
  ios_app_store_link: string;

  /**
   * O link para acessar o aplicativo na PlayStore
   *
   * @note É opcional, mas deve ser incluido mesmo que seja com uma string em branco ''
   */
  android_play_store_link: string;

  /**
   * O identificador desse pacote
   */
  identifier: string;

  /**
   * O nome do pacote
   */
  name: string;

  /**
   * O nome de quem está publicando o pacote
   */
  publisher: string;

  /**
   * O url do site de quem está publicando o pacote
   *
   * @note É opcional, mas deve ser incluido mesmo que seja com uma string em branco ''
   */
  publisher_website: string;

  /**
   * O url para as politicas de privacidade
   *
   * @note É opcional, mas deve ser incluido mesmo que seja com uma string em branco ''
   */
  privacy_policy_website: string;

  /**
   * O url para o site com as licensas
   *
   * @note É opcional, mas deve ser incluido mesmo que seja com uma string em branco ''
   */
  license_agreement_website: string;

  /**
   * A imagem que representa esse pacote como um todo
   *
   * @note É necessário ser um BASE64 de um PNG
   * @note É necessário seguir as especificações impostas pelo WhatsApp
   */
  tray_image: string;

  /**
   * A lista com as informações sobre as figurinhas
   */
  stickers: StickerImageData[];

}

 /**
  * As informações sobre um Sticker
  */
export interface StickerImageData {

  /**
   * A representação do Sticker
   *
   * @note Elas devem estar em BASE64 da imagem SEM O PREFIXO data:image/webp;base64,
   * @note Elas devem ser imagens em formato WEBP que sigam os requisitos do WhatsApp
   */
  image_data: string;

  /**
   * Uma lista de emojis para representar esse Sticker, no máximo 3 emojis
   */
  emojis: string[];

}

Após isso, adicione ele no app.module.ts no array de imports:

@NgModule({
  providers: [
    ...
    WhatsappProvider,
    ...
  ]
})

Agora, você só precisa adiciona-lo no construtor para conseguir compartilhar os Stickers.

Exemplo

import { Component } from '@angular/core';
import { WhatsappProvider, StickerOptions } from "../../providers/whatsapp/whatsapp";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  /**
   * Construtor padrão
   */
  constructor(
    private whatsapp: WhatsappProvider,
  ) {}

  /**
   * Método que envia as figurinhas para o WhatsApp
   */ 
  public sendToWhatsapp(): void {
    const data: StickerOptions = {
      ios_app_store_link: '', // Opcional
      android_play_store_link: '', // Opcional
      identifier: 'COLOQUE AQUI A IDENTIFICAÇÃO DO PACOTE',
      name: 'O NOME DO PACOTE',
      publisher: 'O NOME DE QUEM ESTÁ PUBLICANDO',
      publisher_website: '', // Opcional
      privacy_policy_website: '', // Opcional
      license_agreement_website: '', // Opcional
      tray_image: 'PNG EM BASE64',
      stickers: [
        {
          image_data: 'WEBP EM BASE64',
          emoji: ["☕", "🙂"]
        },
        {
          image_data: 'WEBP EM BASE64',
          emoji: ["☕", "🙂"]
        },
        {
          image_data: 'WEBP EM BASE64',
          emoji: ["☕", "🙂"]
        },
      ]
    };
    
    const json = JSON.stringify(data);

    this.whatsapp.sendToWhatsapp(json).then(success => alert(success), error => alert(error));
  }
}

Para evitar problemas

Para não haver nenhum erro, é necessário seguir todos os padrões impostos pelo WhatsApp sobre as espeficiações das imagens na documentação oficial que você pode acessar aqui

Imagens

Para as imagens, elas não devem possuir os prefixos data:image/png;base64, ou data:image/webp;base64,, caso contrário, o WhatsApp apontará um erro na hora de compartilhar o Sticker.

Alternativa para Android

Há umas formas de se compartilhar um Sticker no Android pelo Ionic também, só que é um tanto mais trabalhoso, visto que, você precisa editar o código nativo gerado pelo Cordova.

Mas caso queira usar mesmo assim, há um código de exemplo nesse repositório.

Caso queira entender como funciona, manda uma mensagem que eu posso explicar como implementar no seu aplicativo.