--- title: "Carregar o Widget" slug: "load-the-widget" updated: 2026-06-18T15:07:14Z published: 2026-06-18T15:07:14Z canonical: "docs.xtremepush.com/load-the-widget" stale: true --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt > Use this file to discover all available pages before exploring further. # 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. ![](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/6bfd59b165e1f122eb18195e62b82727cf11af6169f22c9948e739bfc5ac6e27-Screenshot_2026-03-23_at_15.40.16(1).png?sv=2026-02-06&spr=https&st=2026-11-04T08%3A57%3A11Z&se=2026-11-04T09%3A57%3A11Z&sr=c&sp=r&sig=GDB57m%2BkIY%2FVT6Rg%2Bf2mdTcUE5yRRFbgTjs8MNFR1%2B4%3D) Prévia do Widget de Lealdade no Android/iOS Para sites, o widget pode aparecer como uma sobreposição flutuante ou ser adicionado como um elemento específico na sua página. ![](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/07b52185751fe0f428e6a86fe3129fec2b41265be68b2110f839e7bc4711f9a4-image_2(1).png?sv=2026-02-06&spr=https&st=2026-11-04T08%3A57%3A11Z&se=2026-11-04T09%3A57%3A11Z&sr=c&sp=r&sig=GDB57m%2BkIY%2FVT6Rg%2Bf2mdTcUE5yRRFbgTjs8MNFR1%2B4%3D) ![](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/3484c19b58b91ac468498367842c44c39be9f8e1421037718927bd827b34e8a3-Screenshot_2026-03-23_at_15.47.18(1).png?sv=2026-02-06&spr=https&st=2026-11-04T08%3A57%3A11Z&se=2026-11-04T09%3A57%3A11Z&sr=c&sp=r&sig=GDB57m%2BkIY%2FVT6Rg%2Bf2mdTcUE5yRRFbgTjs8MNFR1%2B4%3D) Prévia do Loyalty Widet em Sites > [!NOTE] > 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](/documentation/docs/pt-br/manage-user-authentication) 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 > [!NOTE] > Pré-requisitos > > Você deve usar a versão do SDK Xtremepush de março de 2026. Esta versão é obrigatória para usar o Xtremepush Loyalty e incorporar o widget ao seu aplicativo. Veja [Lançamentos do SDK Android](/documentation/docs/pt-br/android-sdk-releases), [Lançamentos do SDK iOS](/documentation/docs/pt-br/ios-sdk-releases) e [Lançamentos do Web SDK](/documentation/docs/pt-br/web-sdk-releases). 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](/documentation/docs/pt-br/manage-user-authentication) 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. 1. Defina o endpoint de Lealdade **Java** ```java new PushConnector.Builder(XPUSH_APP_KEY, GOOGLE_PROJECT_NUMBER)                ...                .setLoyaltyEndpoint("LOYALTY ENDPOINT") ``` **Objective-C** ```objectivec + (void)setLoyaltyEndpoint:(NSString *)endpoint; ``` **JavaScript** ```javascript 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. **Java** ```java mPushConnector.setLoyaltyToken(context, token); ``` **Objective-C** ```objectivec + (void)registerLoyaltyTokenHandler:(XPLoyaltyTokenHandler)handler; ``` **JavaScript** ```javascript 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. ```java public class XPushApplication extends Application implements LoyaltyTokenHandler ``` 1. Adicione a implementação à sua `PushConnector.Builder` configuração. ```java new PushConnector.Builder(XPUSH_APP_KEY, GOOGLE_PROJECT_NUMBER) .setLoyaltyTokenHandler(this) ... ``` 1. 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. ```java @Override public void retrieveToken() {    //custom handle new token retrieval, should be async and you should call set loyalty token when retrieved } ``` ## iOS e Web **Objective-C** ```objectivec [XPush registerLoyaltyTokenHandler:^(XPLoyaltyTokenHandlerCompletion completion) {        // Fetch/refresh JWT from client controlled service        completion(jwt, error);    }]; ``` **JavaScript** ```javascript 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. **Java** ```java // 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); ``` **Swift** ```swift // 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) ``` **Objective-C** ```objectivec // 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]; ``` #### 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. **Java** ```java 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)); ``` **Swift** ```swift 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))    } } ``` **Objective-C** ```objectivec 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];    } }]; ``` ### Web Use `mountLoyalty` para renderizar o widget. Esse método elimina a necessidade de recuperar uma URL manualmente. ```javascript 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. ```javascript xtremepush('mountLoyalty', 420, 640); ``` #### Modo Embarcado Adicione o widget a um elemento específico da sua página. ```javascript const host = document.getElementById('loyalty-container'); xtremepush('mountLoyalty', 900, 600, host); ```