Tinkay

ASP.NET Core

Razor Pages y MVC, con identificación desde los claims del usuario.

Antes de empezar

  • Una app ASP.NET Core con Razor Pages o MVC
  • El token público del workspace

1. Guardá el token en configuración

El token del Messenger es público, pero conviene tenerlo en appsettings para cambiarlo por entorno.

appsettings.json
{  "Tinkay": {    "MessengerToken": "pk_live_xxx"  }}

2. Agregá el script al layout

Va antes del cierre de </body> en _Layout.cshtml, después de tus propios scripts.

Views/Shared/_Layout.cshtml
@inject IConfiguration Configuration<!-- ... tu contenido ... -->    <script>        window.TinkaySettings = { token: "@Configuration["Tinkay:MessengerToken"]" };    </script>    <script src="https://cdn.tinkay.app/widget.js" async></script></body></html>

En Razor Pages el archivo es Pages/Shared/_Layout.cshtml. El resto es idéntico.

3. Identificá al usuario autenticado

Leé los claims y pasalos en visitor. Tinkay asocia la conversación a un contacto real de tu workspace.

Views/Shared/_Layout.cshtml
@using System.Security.Claims@inject IConfiguration Configuration<script>    window.TinkaySettings = {        token: "@Configuration["Tinkay:MessengerToken"]"@(User.Identity?.IsAuthenticated == true ? "," : ""),        @if (User.Identity?.IsAuthenticated == true)        {            <text>        visitor: {            email: "@User.FindFirstValue(ClaimTypes.Email)",            name: "@User.FindFirstValue(ClaimTypes.Name)",            plan: "@(User.FindFirstValue("plan") ?? "Free")"        }            </text>        }    };</script><script src="https://cdn.tinkay.app/widget.js" async></script>

Alternativa: Tag Helper reutilizable

Si preferís mantener la vista limpia, encapsulá todo en un Tag Helper y usá <tinkay-messenger /> en el layout.

TagHelpers/TinkayMessengerTagHelper.cs
using System.Security.Claims;using System.Text.Json;using Microsoft.AspNetCore.Http;using Microsoft.AspNetCore.Razor.TagHelpers;namespace MyApp.TagHelpers;[HtmlTargetElement("tinkay-messenger", TagStructure = TagStructure.WithoutEndTag)]public class TinkayMessengerTagHelper : TagHelper{    private readonly IConfiguration _config;    private readonly IHttpContextAccessor _http;    public TinkayMessengerTagHelper(IConfiguration config, IHttpContextAccessor http)    {        _config = config;        _http = http;    }    public override void Process(TagHelperContext context, TagHelperOutput output)    {        var user = _http.HttpContext?.User;        var settings = new Dictionary<string, object?>        {            ["token"] = _config["Tinkay:MessengerToken"]        };        if (user?.Identity?.IsAuthenticated == true)        {            settings["visitor"] = new            {                email = user.FindFirstValue(ClaimTypes.Email),                name = user.FindFirstValue(ClaimTypes.Name),                plan = user.FindFirstValue("plan") ?? "Free"            };        }        var json = JsonSerializer.Serialize(settings);        output.TagName = null;        output.Content.SetHtmlContent(            $"<script>window.TinkaySettings = {json};</script>" +            "<script src=\"https://cdn.tinkay.app/widget.js\" async></script>");    }}

Content Security Policy

Si tu app define un CSP (por middleware o web.config), habilitá los orígenes de Tinkay.

Program.cs
app.Use(async (context, next) =>{    context.Response.Headers.Append("Content-Security-Policy",        "script-src 'self' 'unsafe-inline' https://cdn.tinkay.app; " +        "frame-src https://app.tinkay.app; " +        "connect-src 'self' https://app.tinkay.app");    await next();});

Verificar la instalación

Entrá a Configuración, Instalación en tu workspace, pegá la URL pública del sitio y tocá Probar instalación. Tinkay busca el script y valida que el dominio esté permitido.

  1. Abrí tu sitio en una pestaña nueva y confirmá que aparece el botón flotante.
  2. En la consola del navegador, escribí window.Tinkay y verificá que devuelve un objeto.
  3. Escribí un mensaje de prueba y confirmá que llega al Inbox.

Errores frecuentes

  • El widget no aparece: el dominio no está en Configuración, Dominios. Agregalo y recargá.
  • Aparece en desarrollo pero no en producción: agregá también el dominio de producción, incluida la variante con www.
  • Content Security Policy: permití https://cdn.tinkay.app en script-src y https://app.tinkay.app en frame-src y connect-src.
  • Las comillas del email salen escapadas: usá @Html.Raw(...) o serializá con JsonSerializer como en el Tag Helper.
  • No aparece en producción con IIS: confirmá que el dominio real (no el interno) esté en Configuración, Dominios.

Cómo saber que quedó bien

  • El botón flotante aparece en todas las vistas que usan el layout.
  • Con sesión iniciada, el Inbox muestra el nombre y el email del usuario.
  • La consola del navegador no reporta bloqueos de CSP.