Carregar o Widget

Incorpore o widget de fidelidade no seu site ou aplicativo móvel usando o SDK Xtremepush

Para carregar o widget no seu aplicativo ou site, você deve usar o SDK Xtremepush.

Para aplicativos Android e iOS, o widget pode aparecer como uma visualização em tela cheia ou uma visualização web incorporada.

Para sites, o widget pode aparecer como uma sobreposição flutuante ou ser adicionado como um elemento específico na sua página.

Parâmetros do Widget

Você pode passar as seguintes opções para configurar o widget pelo Xtremepush SDK:

• token (obrigatório): Um JWT assinado gerado pelo seu backend para verificar a identidade do usuário. Veja Gerenciar Autenticação de Usuários para detalhes.

• lang (opcional): O idioma a ser exibido no widget. Os valores suportados incluem en (inglês), es (espanhol), pt (português) e outros configurados no seu projeto.

• Color-mode (opcional): Tema visual do widget. Valores suportados:

  • auto: Corresponde à preferência do usuário no sistema

  • light: Tema de Força a Luz

  • dark: Força o tema sombrio

A integração envolve as seguintes etapas:

1. Defina o endpoint de fidelidade para conectar o widget ao seu projeto específico

2. Defina o token de fidelidade para autenticar a sessão do usuário. Veja Gerenciar Autenticação do Usuário para mais informações sobre como gerar e fornecer esse token.

   1. Gerencie o vencimento do token para evitar interrupções da sessão.

3. Carregue o widget no seu app ou site. Você deve definir o endpoint e o token antes de carregar o widget. Se o token estiver ausente durante a tentativa de carregamento, ocorre um erro e o conteúdo não será carregado.

Defina o Ponto Final de Lealdade

O endpoint de fidelidade é único para o seu projeto e ambiente. É necessário encaminhar requisições para a instância correta na plataforma Xtremepush.

1. Identifique seu ponto final.

O endpoint segue o seguinte formato: p<project_id>.p.loyalty.<environment>.xtremepush.com

• Meio ambiente: Sua região específica, por exemplo, Live, UE ou EUA.

• project_id: Seu ID único de projeto na plataforma Xtremepush.

O endpoint deve ser codificado fixamente na sua configuração do SDK. Atualmente, não pode ser derivado automaticamente. Entre em contato com sua equipe de onboarding do Xtremepush para confirmar o endpoint correto para o seu projeto.

2. Defina o endpoint de Lealdade

new PushConnector.Builder(XPUSH_APP_KEY, GOOGLE_PROJECT_NUMBER)
                ...
                .setLoyaltyEndpoint("LOYALTY ENDPOINT")

+ (void)setLoyaltyEndpoint:(NSString *)endpoint;

xtremepush('set','loyalty_endpoint','value')

Para integrações web, essa função armazena o endpoint em localStorage sob o xtremepush.data objeto e dentro do XPStoreInstance. O valor deve ser a string específica de endpoint de fidelidade para o seu projeto, conforme identificado na etapa anterior.

Defina o Token de Lealdade

O token de fidelidade autentica o usuário dentro do widget. Você deve usar o JWT gerado pelo seu backend, conforme descrito em Gerenciar Autenticação de Usuário.

mPushConnector.setLoyaltyToken(context, token);

+ (void)registerLoyaltyTokenHandler:(XPLoyaltyTokenHandler)handler;

xtremepush('set','loyalty_token','value')

Para integrações web, essa função armazena o token em localStorage under xtremepush.data e o configura através do XPLoyaltyManagerInstance. O valor deve ser a string codificada do seu JSON Web Token.

Expiração do Token de Controle

Os tokens expiram com base na duração definida durante o processo de autenticação. Veja Gerenciar Autenticação do Usuário para mais detalhes.

Você pode implementar um callback para permitir que seu backend atualize o token sem interromper a sessão do usuário.

Android

1. Implemente isso LoyaltyTokenHandler na sua classe de aplicação.

public class XPushApplication extends Application implements LoyaltyTokenHandler

2. Adicione a implementação à sua PushConnector.Builder configuração.

new PushConnector.Builder(XPUSH_APP_KEY, GOOGLE_PROJECT_NUMBER)
	.setLoyaltyTokenHandler(this)
	...

3. Implemente o seguinte callback para lidar com a recuperação de novos tokens. Esse processo deve ser assíncrono e deve ser chamado setLoyaltyToken assim que o novo token for recebido.

@Override
public void retrieveToken() {
    //custom handle new token retrieval, should be async and you should call set loyalty token when retrieved
}

iOS e Web

[XPush registerLoyaltyTokenHandler:^(XPLoyaltyTokenHandlerCompletion completion) {
        // Fetch/refresh JWT from client controlled service
        completion(jwt, error);
    }];

xtremepush('on','loyalty_token_expired', function(){
     //custom implementation
  });

Carregar o Widget

Depois de configurar o endpoint e o token, pode carregar o widget. Em plataformas móveis, o widget suporta tanto uma visualização em tela cheia quanto uma web visualizada embutida. Você pode opcionalmente passar um caminho para abrir uma seção específica do widget e parâmetros personalizados para configurá-lo.

Na web, o widget pode ser carregado como uma sobreposição flutuante ou incorporado diretamente na sua página.

Android e iOS

Visualização em tela cheia

Use openLoyalty para abrir a interface de fidelidade em uma visão em tela cheia. Ele pode ser chamado de três maneiras: abrir a visualização padrão, abrir uma seção específica usando um caminho, ou abrir uma seção específica com parâmetros personalizados.

// Open default view
mPushConnector.openLoyalty(activity);

// Open a specific path
mPushConnector.openLoyalty(activity, "THE_PATH");

// Open a specific path with custom parameters
JSONObject params = new JSONObject();
params.put("color-mode", "dark");
params.put("lang", "es");
mPushConnector.openLoyalty(activity, "THE_PATH", params);

// Open default view
[XPush openLoyalty];

// Open a specific path
[XPush openLoyaltyWithPath:@"THE_PATH" params:nil];

// Open a specific path with custom parameters
NSDictionary *params = @{
    @"color-mode": @"dark",
    @"lang": @"es"
};
[XPush openLoyaltyWithPath:@"THE_PATH" params:params];

// Open default view
XPush.openLoyalty()

// Open a specific path
XPush.openLoyalty(withPath: "THE_PATH", params: nil)

// Open a specific path with custom parameters
let params = [
    "color-mode": "dark",
    "lang": "es"
]
XPush.openLoyalty(withPath: "THE_PATH", params: params)

Visualização Incorporada

Para carregar conteúdo de fidelidade dentro da sua própria instância de web view, recupere a URL de fidelidade e a coloque diretamente. A URL pode ser recuperada de três maneiras: para a visualização padrão, para uma seção específica usando um caminho, ou para uma seção específica com parâmetros personalizados.

WebView webview = (WebView) findViewById(R.id.loyalty_webview);
webview.getSettings().setJavaScriptEnabled(true);
webview.setWebViewClient(new WebViewClient());
webview.addJavascriptInterface(new LoyaltyJSInterface(), "loyaltyInterface");

// Load default view
webview.loadUrl(mPushConnector.getLoyaltyUrl(context));

// Load a specific path
webview.loadUrl(mPushConnector.getLoyaltyUrl(context, "THE_PATH"));

// Load a specific path with custom parameters
JSONObject params = new JSONObject();
params.put("color-mode", "light");
params.put("category", "promotions");
webview.loadUrl(mPushConnector.getLoyaltyUrl(context, "THE_PATH", params));

WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectZero];
webView.navigationDelegate = self;

// Load default view
[XPush getLoyaltyURLWithCompletion:^(NSURL * _Nullable url, NSError * _Nullable error) {
    if (url && !error) {
        NSURLRequest *request = [NSURLRequest requestWithURL:url];
        [webView loadRequest:request];
    }
}];

// Load a specific path
[XPush getLoyaltyURLWithPath:@"THE_PATH"
                      params:nil
                  completion:^(NSURL * _Nullable url, NSError * _Nullable error) {
    if (url && !error) {
        NSURLRequest *request = [NSURLRequest requestWithURL:url];
        [webView loadRequest:request];
    }
}];

// Load a specific path with custom parameters
NSDictionary *params = @{
    @"color-mode": @"light",
    @"category": @"promotions"
  };
  [XPush getLoyaltyURLWithPath:@"THE_PATH"
                        params:params
                    completion:^(NSURL * _Nullable url, NSError * _Nullable error) {
    if (url && !error) {
        NSURLRequest *request = [NSURLRequest requestWithURL:url];
        [webView loadRequest:request];
    }
}];

let webView = WKWebView(frame: .zero)
webView.navigationDelegate = self

// Load default view
XPush.getLoyaltyURL { url, error in
    if let url = url, error == nil {
        webView.load(URLRequest(url: url))
    }
}

// Load a specific path
XPush.getLoyaltyURL(withPath: "THE_PATH", params: nil) { url, error in
    if let url = url, error == nil {
        webView.load(URLRequest(url: url))
    }
}

// Load a specific path with custom parameters
let params = [
    "color-mode": "light",
    "category": "promotions"
]
XPush.getLoyaltyURL(withPath: "THE_PATH", params: params) { url, error in
    if let url = url, error == nil {
        webView.load(URLRequest(url: url))
    }
}

Web

Use mountLoyalty para renderizar o widget. Esse método elimina a necessidade de recuperar uma URL manualmente.

xtremepush('mountLoyalty', width, height, element);

• largura (int): Defina a largura do widget em pixels. Esse valor é padrão 400 se omitido.

• Altura (int): Defina a altura do widget em pixels. Esse valor por padrão é 600 se for omitido.

• element: Um elemento DOM que especifica o elemento div para injetar o widget. Se você omitir esse parâmetro, o widget é renderizado como uma sobreposição flutuante.

Modo Widget

O widget é renderizado como uma sobreposição flutuante independente.

xtremepush('mountLoyalty', 420, 640);

Modo Embarcado

Adicione o widget a um elemento específico da sua página.

const host = document.getElementById('loyalty-container'); 
xtremepush('mountLoyalty', 900, 600, host);