Auth on Behalf – Hero V17<\/title> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap\" rel=\"stylesheet\"> <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-auth-hero-v17 { padding: 40px 20px 80px; font-family: 'Inter', sans-serif; overflow: hidden; } #unipile-auth-hero-v17 .container { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } \/* LEFT - Content *\/ #unipile-auth-hero-v17 .hero-content { display: flex; flex-direction: column; gap: 20px; } \/* BADGE - GREEN *\/ #unipile-auth-hero-v17 .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(59, 185, 139, 0.15); color: #3BB98B; padding: 6px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; width: fit-content; } #unipile-auth-hero-v17 .hero-badge svg { width: 12px; height: 12px; } #unipile-auth-hero-v17 .hero-title { font-family: 'Poppins', sans-serif; font-size: 45px; font-weight: 700; color: #ffffff; line-height: 1.3; } #unipile-auth-hero-v17 .hero-subtitle { font-size: 16px; color: #ffffff; line-height: 1.7; max-width: 480px; } #unipile-auth-hero-v17 .hero-ctas { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; } #unipile-auth-hero-v17 .cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #DDDF4C; color: #0F2836; padding: 12px 24px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: transform 0.3s ease; } #unipile-auth-hero-v17 .cta-primary:hover { transform: translateY(-3px); } #unipile-auth-hero-v17 .cta-primary svg { width: 16px; height: 16px; } #unipile-auth-hero-v17 .cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #ffffff; padding: 12px 24px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; } #unipile-auth-hero-v17 .cta-secondary:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.35); } #unipile-auth-hero-v17 .cta-secondary svg { width: 16px; height: 16px; } \/* RIGHT - Visual *\/ #unipile-auth-hero-v17 .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; } #unipile-auth-hero-v17 .visual-frame { position: relative; padding: 20px; width: 100%; } \/* Grid layout for blocks *\/ #unipile-auth-hero-v17 .blocks-grid { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; } \/* Module Card Base *\/ #unipile-auth-hero-v17 .module-card { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(255, 255, 255, 0.04); min-height: 120px; backdrop-filter: blur(10px); } \/* Labels *\/ #unipile-auth-hero-v17 .module-label { font-size: 0.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; letter-spacing: 0.5px; text-align: center; } \/* Central Hub - Unipile *\/ #unipile-auth-hero-v17 .hub-chip { grid-column: 2; grid-row: 1; width: 100%; min-height: 120px; background: linear-gradient(135deg, rgba(59, 185, 139, 0.15), rgba(59, 185, 139, 0.05)); border: 1px solid rgba(59, 185, 139, 0.4); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: relative; box-shadow: 0 0 40px rgba(59, 185, 139, 0.12); } #unipile-auth-hero-v17 .hub-chip img { width: 40px; height: 40px; } #unipile-auth-hero-v17 .hub-chip span { font-size: 0.8rem; font-weight: 700; color: #ffffff; letter-spacing: 0.5px; } \/* Your App - top left *\/ #unipile-auth-hero-v17 .module-card.your-app { grid-column: 1; grid-row: 1; } #unipile-auth-hero-v17 .app-window { width: 100%; background: rgba(0, 0, 0, 0.35); border-radius: 8px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.08); } #unipile-auth-hero-v17 .app-window-dots { display: flex; gap: 5px; margin-bottom: 10px; } #unipile-auth-hero-v17 .app-window-dots span { width: 8px; height: 8px; border-radius: 50%; } #unipile-auth-hero-v17 .app-window-dots span:nth-child(1) { background: #ff5f57; } #unipile-auth-hero-v17 .app-window-dots span:nth-child(2) { background: #ffbd2e; } #unipile-auth-hero-v17 .app-window-dots span:nth-child(3) { background: #28ca42; } #unipile-auth-hero-v17 .app-window-lines { display: flex; flex-direction: column; gap: 5px; } #unipile-auth-hero-v17 .app-window-line { height: 5px; background: rgba(255, 255, 255, 0.12); border-radius: 3px; } #unipile-auth-hero-v17 .app-window-line:nth-child(1) { width: 75%; } #unipile-auth-hero-v17 .app-window-line:nth-child(2) { width: 50%; } \/* Providers - top right *\/ #unipile-auth-hero-v17 .module-card.providers { grid-column: 3; grid-row: 1; } #unipile-auth-hero-v17 .providers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } #unipile-auth-hero-v17 .provider-item { width: 32px; height: 32px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; } #unipile-auth-hero-v17 .provider-item img { width: 18px; height: 18px; object-fit: contain; } \/* Bottom row cards - GREEN ICONS *\/ #unipile-auth-hero-v17 .module-icon-box { width: 48px; height: 48px; background: rgba(59, 185, 139, 0.1); border: 1px solid rgba(59, 185, 139, 0.25); border-radius: 10px; display: flex; align-items: center; justify-content: center; } #unipile-auth-hero-v17 .module-icon-box svg { width: 22px; height: 22px; color: #3BB98B; } \/* Hosted Auth - bottom left *\/ #unipile-auth-hero-v17 .module-card.hosted-auth { grid-column: 1; grid-row: 2; } \/* Auto Refresh - bottom center *\/ #unipile-auth-hero-v17 .module-card.auto-refresh { grid-column: 2; grid-row: 2; } \/* Webhooks - bottom right *\/ #unipile-auth-hero-v17 .module-card.webhooks { grid-column: 3; grid-row: 2; } #unipile-auth-hero-v17 .webhook-bars { display: flex; align-items: flex-end; gap: 4px; height: 22px; } #unipile-auth-hero-v17 .webhook-bar { width: 5px; background: #3BB98B; border-radius: 2px; opacity: 0.8; } #unipile-auth-hero-v17 .webhook-bar:nth-child(1) { height: 35%; opacity: 0.5; } #unipile-auth-hero-v17 .webhook-bar:nth-child(2) { height: 65%; opacity: 0.65; } #unipile-auth-hero-v17 .webhook-bar:nth-child(3) { height: 100%; opacity: 1; } #unipile-auth-hero-v17 .webhook-bar:nth-child(4) { height: 50%; opacity: 0.6; } #unipile-auth-hero-v17 .webhook-bar:nth-child(5) { height: 80%; opacity: 0.75; } \/* =========================== RESPONSIVE - TABLET =========================== *\/ @media (max-width: 900px) { #unipile-auth-hero-v17 { padding: 40px 20px 60px; } #unipile-auth-hero-v17 .container { grid-template-columns: 1fr; gap: 40px; max-width: 600px; } #unipile-auth-hero-v17 .hero-content { text-align: center; align-items: center; } #unipile-auth-hero-v17 .hero-title { font-size: 32px; } #unipile-auth-hero-v17 .hero-subtitle { max-width: 100%; } #unipile-auth-hero-v17 .hero-ctas { justify-content: center; } \/* Grille 3 colonnes conserv\u00e9e sur tablette, plus d'espace *\/ #unipile-auth-hero-v17 .visual-frame { padding: 10px; } } \/* =========================== RESPONSIVE - MOBILE =========================== *\/ @media (max-width: 600px) { #unipile-auth-hero-v17 { padding: 0px 16px 40px; } #unipile-auth-hero-v17 .container { gap: 32px; max-width: 100%; } #unipile-auth-hero-v17 .hero-title { font-size: 26px; } #unipile-auth-hero-v17 .hero-subtitle { font-size: 15px; } #unipile-auth-hero-v17 .hero-ctas { flex-direction: column; width: 100%; } #unipile-auth-hero-v17 .cta-primary, #unipile-auth-hero-v17 .cta-secondary { justify-content: center; width: 100%; } #unipile-auth-hero-v17 .cta-primary:hover, #unipile-auth-hero-v17 .cta-secondary:hover { transform: none; } \/* Grille 2 colonnes sur mobile *\/ #unipile-auth-hero-v17 .visual-frame { padding: 0; overflow: hidden; } #unipile-auth-hero-v17 .blocks-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 12px; max-width: 100%; overflow: hidden; } \/* Row 1: Your App + Unipile Hub *\/ #unipile-auth-hero-v17 .module-card.your-app { grid-column: 1; grid-row: 1; } #unipile-auth-hero-v17 .hub-chip { grid-column: 2; grid-row: 1; min-height: auto; } \/* Row 2: Providers full width \u2014 horizontal layout *\/ #unipile-auth-hero-v17 .module-card.providers { grid-column: 1 \/ -1; grid-row: 2; flex-direction: row; justify-content: center; gap: 14px; padding: 14px 20px; min-height: auto; } #unipile-auth-hero-v17 .module-card.providers .providers-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; } #unipile-auth-hero-v17 .module-card.providers .provider-item { width: 100%; height: 36px; background: transparent; border: none; } #unipile-auth-hero-v17 .module-card.providers .provider-item img { width: 28px; height: 28px; } \/* Row 3: Hosted Auth + Auto Refresh *\/ #unipile-auth-hero-v17 .module-card.hosted-auth { grid-column: 1; grid-row: 3; } #unipile-auth-hero-v17 .module-card.auto-refresh { grid-column: 2; grid-row: 3; } \/* Row 4: Webhooks full width \u2014 horizontal layout *\/ #unipile-auth-hero-v17 .module-card.webhooks { grid-column: 1 \/ -1; grid-row: 4; flex-direction: row; justify-content: center; gap: 14px; padding: 14px 20px; min-height: auto; max-width: 100%; overflow: hidden; } \/* Ajustements cartes *\/ #unipile-auth-hero-v17 .module-card { padding: 16px 14px; min-height: auto; gap: 10px; border-radius: 10px; } #unipile-auth-hero-v17 .hub-chip { border-radius: 10px; gap: 8px; padding: 16px 14px; } #unipile-auth-hero-v17 .hub-chip img { width: 32px; height: 32px; } #unipile-auth-hero-v17 .hub-chip span { font-size: 0.7rem; } #unipile-auth-hero-v17 .module-label { font-size: 0.65rem; letter-spacing: 0.3px; } #unipile-auth-hero-v17 .module-icon-box { width: 40px; height: 40px; border-radius: 8px; } #unipile-auth-hero-v17 .module-icon-box svg { width: 18px; height: 18px; } #unipile-auth-hero-v17 .app-window { padding: 8px 10px; border-radius: 6px; } #unipile-auth-hero-v17 .app-window-dots span { width: 6px; height: 6px; } #unipile-auth-hero-v17 .app-window-dots { margin-bottom: 8px; gap: 4px; } } \/* =========================== RESPONSIVE - VERY SMALL =========================== *\/ @media (max-width: 380px) { #unipile-auth-hero-v17 { padding: 0px 12px 32px; } #unipile-auth-hero-v17 .hero-title { font-size: 24px; } #unipile-auth-hero-v17 .hero-subtitle { font-size: 14px; } #unipile-auth-hero-v17 .blocks-grid { gap: 8px; } #unipile-auth-hero-v17 .module-card { padding: 12px 10px; gap: 8px; } #unipile-auth-hero-v17 .hub-chip { padding: 12px 10px; } #unipile-auth-hero-v17 .module-card.providers .providers-grid { gap: 6px; } #unipile-auth-hero-v17 .provider-item { border-radius: 6px; } #unipile-auth-hero-v17 .module-icon-box { width: 36px; height: 36px; } #unipile-auth-hero-v17 .module-icon-box svg { width: 16px; height: 16px; } } <\/style>\n<p><\/head><body data-rsssl=1><\/p>\n<section id=\"unipile-auth-hero-v17\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"hero-content\"> <\/p>\n<div class=\"hero-badge\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect> <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path> <\/svg> Auth On Behalf <\/div>\n<p>  <\/p>\n<h1 class=\"hero-title\">User Authentication for Your Integration<\/h1>\n<p>  <pee class=\"hero-subtitle\">Execute actions as the actual user, not as a bot. Messages, emails, and invites sent from real accounts, indistinguishable from manual actions.<\/pee>  <\/p>\n<div class=\"hero-ctas\"> <a href=\"https:\/\/dashboard.unipile.com\/signup\/\" class=\"cta-primary\"> Build Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/a> <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" class=\"cta-secondary\" target=\"_blank\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path> <polyline points=\"14 2 14 8 20 8\"><\/polyline> <\/svg> Documentation <\/a> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"hero-visual\"> <\/p>\n<div class=\"visual-frame\">   <\/p>\n<div class=\"blocks-grid\">   <\/p>\n<div class=\"module-card your-app\"> <\/p>\n<div class=\"app-window\"> <\/p>\n<div class=\"app-window-dots\"> <span><\/span> <span><\/span> <span><\/span> <\/div>\n<p> <\/p>\n<div class=\"app-window-lines\"> <\/p>\n<div class=\"app-window-line\"><\/div>\n<p> <\/p>\n<div class=\"app-window-line\"><\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <span class=\"module-label\">Your App<\/span> <\/div>\n<p>   <\/p>\n<div class=\"hub-chip\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2023\/07\/Logo.svg\" alt=\"Unipile\"> <span>UNIPILE<\/span> <\/div>\n<p>   <\/p>\n<div class=\"module-card providers\"> <\/p>\n<div class=\"providers-grid\"> <\/p>\n<div class=\"provider-item\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/linkedin-5.svg\" alt=\"LinkedIn\"> <\/div>\n<p> <\/p>\n<div class=\"provider-item\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/gmail-3.svg\" alt=\"Gmail\"> <\/div>\n<p> <\/p>\n<div class=\"provider-item\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/09\/whatsapp-1.svg\" alt=\"WhatsApp\"> <\/div>\n<p> <\/p>\n<div class=\"provider-item\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/outlook-2.svg\" alt=\"Outlook\"> <\/div>\n<p> <\/p>\n<div class=\"provider-item\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/TELEGRAM-2.svg\" alt=\"Telegram\"> <\/div>\n<p> <\/p>\n<div class=\"provider-item\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/Google_Calendar_icon_2020-3-2.svg\" alt=\"Calendar\"> <\/div>\n<p> <\/div>\n<p> <span class=\"module-label\">Providers<\/span> <\/div>\n<p>   <\/p>\n<div class=\"module-card hosted-auth\"> <\/p>\n<div class=\"module-icon-box\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect> <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path> <\/svg> <\/div>\n<p> <span class=\"module-label\">Hosted Auth<\/span> <\/div>\n<p>   <\/p>\n<div class=\"module-card auto-refresh\"> <\/p>\n<div class=\"module-icon-box\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"23 4 23 10 17 10\"><\/polyline> <polyline points=\"1 20 1 14 7 14\"><\/polyline> <path d=\"M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15\"><\/path> <\/svg> <\/div>\n<p> <span class=\"module-label\">Refresh Token<\/span> <\/div>\n<p>   <\/p>\n<div class=\"module-card webhooks\"> <\/p>\n<div class=\"module-icon-box\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"><\/path> <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"><\/path> <\/svg> <\/div>\n<p> <span class=\"module-label\">Webhooks<\/span> <\/div>\n<p>  <\/div>\n<p>  <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”] <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-auth-what { background: #f4f5f7; padding: 40px 20px 80px; font-family: 'Inter', sans-serif; } #unipile-auth-what .container { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } \/* Text Content *\/ #unipile-auth-what .content { display: flex; flex-direction: column; gap: 24px; } #unipile-auth-what .section-title { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #0f2736; line-height: 1.3; } #unipile-auth-what .section-title span { color: #3BB98B; } #unipile-auth-what .section-description { font-size: 16px; color: #383838; line-height: 1.7; } #unipile-auth-what .features-list { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; } #unipile-auth-what .feature-item { display: flex; align-items: flex-start; gap: 14px; } #unipile-auth-what .feature-icon { width: 24px; height: 24px; min-width: 24px; background: rgba(59, 185, 139, 0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; } #unipile-auth-what .feature-icon svg { width: 14px; height: 14px; color: #3BB98B; } #unipile-auth-what .feature-text { display: flex; flex-direction: column; gap: 2px; } #unipile-auth-what .feature-title { font-size: 0.95rem; font-weight: 600; color: #0f2736; } #unipile-auth-what .feature-desc { font-size: 0.85rem; color: #64748b; line-height: 1.5; } \/* Visual Mockup *\/ #unipile-auth-what .visual { position: relative;max-width: 500px; } #unipile-auth-what .lifecycle-card { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; } #unipile-auth-what .lifecycle-header { background: #0f2736; padding: 16px 20px; display: flex; align-items: center; gap: 12px; } #unipile-auth-what .lifecycle-header-icon { width: 32px; height: 32px; background: rgba(59, 185, 139, 0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; } #unipile-auth-what .lifecycle-header-icon svg { width: 18px; height: 18px; color: #3BB98B; } #unipile-auth-what .lifecycle-header-text { font-size: 0.9rem; font-weight: 600; color: #ffffff; } #unipile-auth-what .lifecycle-body { padding: 24px; } #unipile-auth-what .lifecycle-steps { display: flex; flex-direction: column; gap: 0; position: relative; } #unipile-auth-what .lifecycle-step { display: flex; align-items: flex-start; gap: 16px; position: relative; padding-bottom: 24px; } #unipile-auth-what .lifecycle-step:last-child { padding-bottom: 0; } #unipile-auth-what .lifecycle-step::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: linear-gradient(180deg, #3BB98B, #e5e7eb); } #unipile-auth-what .lifecycle-step:last-child::before { display: none; } #unipile-auth-what .step-number { width: 32px; height: 32px; min-width: 32px; background: #3BB98B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #ffffff; position: relative; z-index: 1; } #unipile-auth-what .step-content { flex: 1; padding-top: 4px; } #unipile-auth-what .step-title { font-size: 0.9rem; font-weight: 600; color: #0f2736; margin-bottom: 4px; } #unipile-auth-what .step-desc { font-size: 0.8rem; color: #64748b; line-height: 1.5; } #unipile-auth-what .step-tag { display: inline-flex; align-items: center; gap: 4px; background: rgba(59, 185, 139, 0.1); color: #3BB98B; padding: 4px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 600; margin-top: 8px; } #unipile-auth-what .step-tag svg { width: 12px; height: 12px; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-auth-what .container { grid-template-columns: 1fr; gap: 50px; } #unipile-auth-what .section-title { font-size: 32px; } #unipile-auth-what .content { order: 1; } #unipile-auth-what .visual { order: 2; } } @media (max-width: 600px) { #unipile-auth-what { padding: 0px 16px; } #unipile-auth-what .section-title { font-size: 28px; } #unipile-auth-what .lifecycle-body { padding: 20px 16px; } #unipile-auth-what .lifecycle-step { gap: 12px; } } @media (max-width: 400px) { #unipile-auth-what .section-title { font-size: 26px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-auth-what\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"content\"> <\/p>\n<h2 class=\"section-title\">What is <span>Auth on Behalf<\/span>?<\/h2>\n<p>  <pee class=\"section-description\"> With Auth on Behalf, users explicitly grant your application permission to act on their connected accounts. Through a secure redirect flow, they authenticate directly with the provider, your app never touches their credentials. Once authorized, you receive a simple account_id to execute any action within their granted scope. <\/pee>  <\/p>\n<div class=\"features-list\"> <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"feature-text\"> <span class=\"feature-title\">User Identity Mapping<\/span> <span class=\"feature-desc\">Link your internal user IDs to authenticated provider accounts<\/span> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"feature-text\"> <span class=\"feature-title\">Redirect-Based Consent<\/span> <span class=\"feature-desc\">Users authorize access through provider’s native consent flow<\/span> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"feature-text\"> <span class=\"feature-title\">Token Abstraction<\/span> <span class=\"feature-desc\">Unipile manages authorization tokens, you only use a simple account_id<\/span> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"feature-text\"> <span class=\"feature-title\">API Execution on Behalf<\/span> <span class=\"feature-desc\">All API calls are executed in the context of the authenticated user<\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"visual\"> <\/p>\n<div class=\"lifecycle-card\"> <\/p>\n<div class=\"lifecycle-header\"> <\/p>\n<div class=\"lifecycle-header-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle> <polyline points=\"12 6 12 12 16 14\"><\/polyline> <\/svg> <\/div>\n<p> <span class=\"lifecycle-header-text\">Authentication Lifecycle<\/span> <\/div>\n<p>  <\/p>\n<div class=\"lifecycle-body\"> <\/p>\n<div class=\"lifecycle-steps\">  <\/p>\n<div class=\"lifecycle-step\"> <\/p>\n<div class=\"step-number\">1<\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Generate Auth Link<\/div>\n<p> <\/p>\n<div class=\"step-desc\">Your backend requests a hosted auth URL from Unipile API<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"lifecycle-step\"> <\/p>\n<div class=\"step-number\">2<\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">User Consent<\/div>\n<p> <\/p>\n<div class=\"step-desc\">User is redirected to provider’s authorization screen<\/div>\n<p> <\/p>\n<div class=\"step-tag\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path> <\/svg> Secure Redirect <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"lifecycle-step\"> <\/p>\n<div class=\"step-number\">3<\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Session Established<\/div>\n<p> <\/p>\n<div class=\"step-desc\">Provider session created and tokens securely stored<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"lifecycle-step\"> <\/p>\n<div class=\"step-number\">4<\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Callback Received<\/div>\n<p> <\/p>\n<div class=\"step-desc\">Your notify_url receives account_id and user mapping<\/div>\n<p> <\/p>\n<div class=\"step-tag\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> Webhook Ready <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"lifecycle-step\"> <\/p>\n<div class=\"step-number\">5<\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Execute API Calls<\/div>\n<p> <\/p>\n<div class=\"step-desc\">Make requests on behalf of the user using account_id<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″] <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-hosted-auth-v3 { background: #f4f5f7; padding: 0px 20px 80px; font-family: 'Inter', sans-serif; } #unipile-hosted-auth-v3 .container { max-width: 1100px; margin: 0 auto; } \/* Section Header *\/ #unipile-hosted-auth-v3 .section-header { text-align: center; margin-bottom: 60px; } #unipile-hosted-auth-v3 .section-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(59, 185, 139, 0.12); color: #3BB98B; padding: 8px 16px; border-radius: 24px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 20px; } #unipile-hosted-auth-v3 .section-badge svg { width: 16px; height: 16px; } #unipile-hosted-auth-v3 .section-title { font-family: 'Poppins', sans-serif; font-size: 42px; font-weight: 700; color: #0f2736; line-height: 1.2; margin-bottom: 20px; } #unipile-hosted-auth-v3 .section-title span { color: #3BB98B; } #unipile-hosted-auth-v3 .section-subtitle { font-size: 18px; color: #383838; max-width: 750px; margin: 0 auto; line-height: 1.7; } \/* Comparison Side by Side *\/ #unipile-hosted-auth-v3 .comparison-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 50px; } #unipile-hosted-auth-v3 .comparison-card { padding: 28px; border-radius: 16px; position: relative; height: 100%; } #unipile-hosted-auth-v3 .comparison-card.without { background: #ffffff; border: 1px solid #e5e7eb; } #unipile-hosted-auth-v3 .comparison-card.with { background: linear-gradient(135deg, rgba(59, 185, 139, 0.08), rgba(221, 223, 76, 0.05)); border: 1px solid rgba(59, 185, 139, 0.25); } #unipile-hosted-auth-v3 .comparison-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 14px; } #unipile-hosted-auth-v3 .comparison-card.without .comparison-label { color: #ef4444; } #unipile-hosted-auth-v3 .comparison-card.with .comparison-label { color: #3BB98B; } #unipile-hosted-auth-v3 .comparison-label svg { width: 14px; height: 14px; } #unipile-hosted-auth-v3 .comparison-title { font-size: 1.15rem; font-weight: 700; color: #0f2736; margin-bottom: 16px; line-height: 1.3; } #unipile-hosted-auth-v3 .comparison-items { display: flex; flex-direction: column; gap: 10px; } #unipile-hosted-auth-v3 .comparison-item { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; font-weight: 500; } #unipile-hosted-auth-v3 .comparison-card.without .comparison-item { background: rgba(239, 68, 68, 0.06); color: #b91c1c; } #unipile-hosted-auth-v3 .comparison-card.with .comparison-item { background: rgba(59, 185, 139, 0.10); color: #047857; } #unipile-hosted-auth-v3 .comparison-item svg { width: 16px; height: 16px; flex-shrink: 0; } \/* Main Content Grid *\/ #unipile-hosted-auth-v3 .main-content { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; margin-bottom: 60px; } \/* Wizard Mockup *\/ #unipile-hosted-auth-v3 .wizard-visual { position: relative; } #unipile-hosted-auth-v3 .wizard-frame { background: linear-gradient(145deg, rgba(59, 185, 139, 0.2), rgba(221, 223, 76, 0.1)); border-radius: 24px; padding: 4px; } #unipile-hosted-auth-v3 .wizard-card { background: #ffffff; border-radius: 20px; overflow: hidden; } #unipile-hosted-auth-v3 .wizard-header { background: #0f2736; padding: 14px 20px; display: flex; align-items: center; gap: 12px; } #unipile-hosted-auth-v3 .wizard-dots { display: flex; gap: 6px; } #unipile-hosted-auth-v3 .wizard-dots span { width: 10px; height: 10px; border-radius: 50%; } #unipile-hosted-auth-v3 .wizard-dots span:nth-child(1) { background: #ff5f57; } #unipile-hosted-auth-v3 .wizard-dots span:nth-child(2) { background: #ffbd2e; } #unipile-hosted-auth-v3 .wizard-dots span:nth-child(3) { background: #28ca42; } #unipile-hosted-auth-v3 .wizard-url { flex: 1; background: rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 6px 12px; font-size: 0.7rem; color: rgba(255, 255, 255, 0.7); font-family: 'Monaco', 'Menlo', monospace; display: flex; align-items: center; gap: 6px; } #unipile-hosted-auth-v3 .wizard-url svg { width: 12px; height: 12px; color: #3BB98B; } #unipile-hosted-auth-v3 .wizard-body { padding: 28px; } #unipile-hosted-auth-v3 .wizard-intro { text-align: center; margin-bottom: 24px; } #unipile-hosted-auth-v3 .wizard-logo { width: 48px; height: 48px; margin: 0 auto 12px; } #unipile-hosted-auth-v3 .wizard-logo img { width: 100%; height: 100%; object-fit: contain; } #unipile-hosted-auth-v3 .wizard-intro-title { font-size: 1.1rem; font-weight: 700; color: #0f2736; margin-bottom: 4px; } #unipile-hosted-auth-v3 .wizard-intro-desc { font-size: 0.85rem; color: #64748b; } #unipile-hosted-auth-v3 .providers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; } #unipile-hosted-auth-v3 .provider-card { background: #f8fafc; border: 2px solid #e5e7eb; border-radius: 12px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: all 0.2s ease; } #unipile-hosted-auth-v3 .provider-card.selected { border-color: #3BB98B; background: rgba(59, 185, 139, 0.05); } #unipile-hosted-auth-v3 .provider-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } #unipile-hosted-auth-v3 .provider-icon img { width: 26px; height: 26px; object-fit: contain; } #unipile-hosted-auth-v3 .provider-name { font-size: 0.7rem; font-weight: 600; color: #0f2736; } #unipile-hosted-auth-v3 .provider-method { font-size: 0.6rem; color: #94a3b8; margin-top: -4px; } #unipile-hosted-auth-v3 .wizard-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid #e5e7eb; } #unipile-hosted-auth-v3 .wizard-security { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: #64748b; } #unipile-hosted-auth-v3 .wizard-security svg { width: 14px; height: 14px; color: #3BB98B; } #unipile-hosted-auth-v3 .wizard-btn { background: #3BB98B; color: #ffffff; padding: 12px 24px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } #unipile-hosted-auth-v3 .wizard-btn svg { width: 16px; height: 16px; } \/* Features Grid *\/ #unipile-hosted-auth-v3 .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } #unipile-hosted-auth-v3 .feature-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 28px 24px; text-align: center; } #unipile-hosted-auth-v3 .feature-icon { width: 56px; height: 56px; background: linear-gradient(135deg, rgba(59, 185, 139, 0.12), rgba(59, 185, 139, 0.05)); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } #unipile-hosted-auth-v3 .feature-icon svg { width: 26px; height: 26px; color: #3BB98B; } #unipile-hosted-auth-v3 .feature-title { font-size: 1rem; letter-spacing: 0.1px; font-weight: 700; color: #0f2736; margin-bottom: 8px; } #unipile-hosted-auth-v3 .feature-desc { font-size: 0.85rem; color: #64748b; line-height: 1.5; } \/* CTA *\/ #unipile-hosted-auth-v3 .section-cta { display: flex; justify-content: center; gap: 16px; margin-top: 50px; } #unipile-hosted-auth-v3 .cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #DDDF4C; color: #0f2736; padding: 14px 28px; border-radius: 10px; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: transform 0.3s ease; } #unipile-hosted-auth-v3 .cta-primary:hover { transform: translateY(-3px); } #unipile-hosted-auth-v3 .cta-primary svg { width: 18px; height: 18px; } #unipile-hosted-auth-v3 .cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #0f2736; padding: 14px 28px; border-radius: 10px; font-size: 0.95rem; font-weight: 600; text-decoration: none; border: 1px solid #e5e7eb; transition: all 0.3s ease; } #unipile-hosted-auth-v3 .cta-secondary:hover { border-color: #3BB98B; color: #3BB98B; } #unipile-hosted-auth-v3 .cta-secondary svg { width: 18px; height: 18px; } \/* Responsive *\/ @media (max-width: 1024px) { #unipile-hosted-auth-v3 .features-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { #unipile-hosted-auth-v3 .section-title { font-size: 34px; } #unipile-hosted-auth-v3 .comparison-row { grid-template-columns: 1fr; gap: 16px; } #unipile-hosted-auth-v3 .main-content { grid-template-columns: 1fr; gap: 40px; } #unipile-hosted-auth-v3 .wizard-visual { order: -1; } } @media (max-width: 600px) { #unipile-hosted-auth-v3 { padding: 60px 5px; } #unipile-hosted-auth-v3 .section-title { font-size: 28px; } #unipile-hosted-auth-v3 .section-subtitle { font-size: 16px; } #unipile-hosted-auth-v3 .features-grid { grid-template-columns: 1fr; } #unipile-hosted-auth-v3 .providers-grid { grid-template-columns: repeat(2, 1fr); } #unipile-hosted-auth-v3 .wizard-footer { flex-direction: column; gap: 16px; } #unipile-hosted-auth-v3 .section-cta { flex-direction: column; align-items: stretch; } #unipile-hosted-auth-v3 .cta-primary, #unipile-hosted-auth-v3 .cta-secondary { justify-content: center; width: 100%; } #unipile-hosted-auth-v3 .comparison-items { gap: 8px; } #unipile-hosted-auth-v3 .comparison-item { padding: 8px 12px; font-size: 0.8rem; } } @media (max-width: 400px) { #unipile-hosted-auth-v3 .section-title { font-size: 26px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-hosted-auth-v3\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"section-header\"> <\/p>\n<div class=\"section-badge\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path> <\/svg> Key Feature <\/div>\n<p> <\/p>\n<h2 class=\"section-title\">One Link, <span>All Auth Methods<\/span> Handled<\/h2>\n<p> <pee class=\"section-subtitle\"> Skip the complexity of building OAuth flows, QR code scanners, session handlers, 2FA verification, and captcha management. Generate a single link\u2014Unipile handles everything. <\/pee> <\/div>\n<p>  <\/p>\n<div class=\"comparison-row\">   <\/p>\n<div class=\"comparison-card without\"> <\/p>\n<div class=\"comparison-label\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle> <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"><\/line> <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"><\/line> <\/svg> Without Hosted Auth <\/div>\n<p> <\/p>\n<div class=\"comparison-title\">Build & maintain each auth flow separately<\/div>\n<p> <\/p>\n<div class=\"comparison-items\"> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> OAuth flows for each provider <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> QR code scanning implementation <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> Session & token management <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> 2FA & Captcha handling <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> Token refresh logic <\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"comparison-card with\"> <\/p>\n<div class=\"comparison-label\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path> <polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline> <\/svg> With Hosted Auth <\/div>\n<p> <\/p>\n<div class=\"comparison-title\">One redirect link, everything managed<\/div>\n<p> <\/p>\n<div class=\"comparison-items\"> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> Single API call to generate link <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> All providers unified interface <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> Zero maintenance overhead <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> Webhook callback on success <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> White-label ready <\/span> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p>   <\/p>\n<div class=\"main-content\" style=\"display: flex; justify-content: center;\"> <\/p>\n<div class=\"wizard-visual\" style=\"max-width: 520px; width: 100%;\"> <\/p>\n<div class=\"wizard-frame\"> <\/p>\n<div class=\"wizard-card\"> <\/p>\n<div class=\"wizard-header\"> <\/p>\n<div class=\"wizard-dots\"> <span><\/span><span><\/span><span><\/span> <\/div>\n<p> <\/p>\n<div class=\"wizard-url\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect> <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path> <\/svg> auth.yourapp.com\/connect <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"wizard-body\"> <\/p>\n<div class=\"wizard-intro\"> <\/p>\n<div class=\"wizard-logo\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2023\/07\/Logo.svg\" alt=\"Unipile\"> <\/div>\n<p> <\/p>\n<div class=\"wizard-intro-title\">Connect your account<\/div>\n<p> <\/p>\n<div class=\"wizard-intro-desc\">Select a provider to continue<\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"providers-grid\"> <\/p>\n<div class=\"provider-card selected\"> <\/p>\n<div class=\"provider-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/linkedin-5.svg\" alt=\"LinkedIn\"> <\/div>\n<p> <span class=\"provider-name\">LinkedIn<\/span> <span class=\"provider-method\">Session<\/span> <\/div>\n<p>  <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/09\/whatsapp-1.svg\" alt=\"WhatsApp\"> <\/div>\n<p> <span class=\"provider-name\">WhatsApp<\/span> <span class=\"provider-method\">QR Code<\/span> <\/div>\n<p>  <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/gmail-3.svg\" alt=\"Gmail\"> <\/div>\n<p> <span class=\"provider-name\">Gmail<\/span> <span class=\"provider-method\">OAuth<\/span> <\/div>\n<p>  <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/outlook-2.svg\" alt=\"Outlook\"> <\/div>\n<p> <span class=\"provider-name\">Outlook<\/span> <span class=\"provider-method\">OAuth<\/span> <\/div>\n<p>  <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/TELEGRAM-2.svg\" alt=\"Telegram\"> <\/div>\n<p> <span class=\"provider-name\">Telegram<\/span> <span class=\"provider-method\">Phone<\/span> <\/div>\n<p>  <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/08\/ig-logo.png\" alt=\"Instagram\"> <\/div>\n<p> <span class=\"provider-name\">Instagram<\/span> <span class=\"provider-method\">Session<\/span> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"wizard-footer\"> <\/p>\n<div class=\"wizard-security\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path> <\/svg> End-to-end encrypted <\/div>\n<p> <\/p>\n<div class=\"wizard-btn\"> Continue <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"features-grid\">  <\/p>\n<div class=\"feature-card\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect> <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"><\/line> <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"><\/line> <\/svg> <\/div>\n<p> <\/p>\n<h3 class=\"feature-title\">Pre-built UI<\/h3>\n<p> <pee class=\"feature-desc\">Production-ready auth wizard with responsive design<\/pee> <\/div>\n<p>  <\/p>\n<div class=\"feature-card\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"><\/path> <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"><\/path> <\/svg> <\/div>\n<p> <\/p>\n<h3 class=\"feature-title\">Redirect URLs<\/h3>\n<p> <pee class=\"feature-desc\">Configure success & failure callbacks for seamless UX<\/pee> <\/div>\n<p>  <\/p>\n<div class=\"feature-card\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<h3 class=\"feature-title\">Webhooks<\/h3>\n<p> <pee class=\"feature-desc\">Instant notifications with account_id mapping<\/pee> <\/div>\n<p>  <\/p>\n<div class=\"feature-card\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle> <circle cx=\"12\" cy=\"12\" r=\"4\"><\/circle> <line x1=\"4.93\" y1=\"4.93\" x2=\"9.17\" y2=\"9.17\"><\/line> <line x1=\"14.83\" y1=\"14.83\" x2=\"19.07\" y2=\"19.07\"><\/line> <line x1=\"14.83\" y1=\"9.17\" x2=\"19.07\" y2=\"4.93\"><\/line> <line x1=\"4.93\" y1=\"19.07\" x2=\"9.17\" y2=\"14.83\"><\/line> <\/svg> <\/div>\n<p> <\/p>\n<h3 class=\"feature-title\">White-Label<\/h3>\n<p> <pee class=\"feature-desc\">Custom domain support (auth.yourapp.com)<\/pee> <\/div>\n<p>  <\/div>\n<p>   <\/p>\n<div class=\"section-cta\"> <a href=\"https:\/\/dashboard.unipile.com\/signup\/\" class=\"cta-primary\"> Build Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/a> <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" class=\"cta-secondary\" target=\"_blank\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path> <polyline points=\"14 2 14 8 20 8\"><\/polyline> <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line> <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line> <\/svg> Documentation <\/a> <\/div>\n<p>  <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.27.4″ _module_preset=”default” background_color=”#0F2736″ custom_padding=”0px|0px|0px|0px|true|true” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_row custom_padding_last_edited=”on|phone” _builder_version=”4.27.4″ _module_preset=”default” custom_margin=”0px||0px||false|false” custom_margin_tablet=”” custom_margin_phone=”0px||0px||false|false” custom_margin_last_edited=”on|phone” custom_padding_tablet=”” custom_padding_phone=”0px|0px||0px|false|true” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-auth-implementation { background: #0f2736; padding: 40px 0px 80px; font-family: 'Inter', sans-serif; } #unipile-auth-implementation .container { max-width: 1200px; margin: 0 auto; } \/* Section Header *\/ #unipile-auth-implementation .section-header { text-align: center; margin-bottom: 60px; } #unipile-auth-implementation .section-title { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #ffffff; line-height: 1.3; margin-bottom: 16px; } #unipile-auth-implementation .section-title span { color: #3BB98B; } #unipile-auth-implementation .section-subtitle { font-size: 16px; color:#ffffff; max-width: 600px; margin: 0 auto; line-height: 1.6; } \/* Steps Grid *\/ #unipile-auth-implementation .steps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } #unipile-auth-implementation .step-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; } #unipile-auth-implementation .step-header { padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; gap: 12px; } #unipile-auth-implementation .step-number { width: 28px; height: 28px; background: #3BB98B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #ffffff; } #unipile-auth-implementation .step-title { font-size: 0.9rem; font-weight: 600; color: #ffffff; } #unipile-auth-implementation .step-method { margin-left: auto; padding: 4px 10px; background: rgba(221, 223, 76, 0.15); border-radius: 6px; font-size: 0.7rem; font-weight: 600; color: #DDDF4C; font-family: 'Fira Code', monospace; } #unipile-auth-implementation .step-body { padding: 0; } #unipile-auth-implementation .code-block { background: #0a1c28; padding: 20px; overflow-x: auto; } #unipile-auth-implementation .code-block pre { margin: 0; font-family: 'Fira Code', monospace; font-size: 0.75rem; line-height: 1.7; color: #e2e8f0; } #unipile-auth-implementation .code-block .comment { color: #64748b; } #unipile-auth-implementation .code-block .keyword { color: #c792ea; } #unipile-auth-implementation .code-block .string { color: #c3e88d; } #unipile-auth-implementation .code-block .property { color: #82aaff; } #unipile-auth-implementation .code-block .value { color: #f78c6c; } #unipile-auth-implementation .code-block .function { color: #82aaff; } #unipile-auth-implementation .step-footer { padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; gap: 8px; } #unipile-auth-implementation .step-footer-icon { width: 18px; height: 18px; color: #3BB98B; } #unipile-auth-implementation .step-footer-text { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); } #unipile-auth-implementation .step-footer-text strong { color: #3BB98B; font-weight: 600; } \/* CTA *\/ #unipile-auth-implementation .section-cta { display: flex; justify-content: center; gap: 16px; margin-top: 48px; } #unipile-auth-implementation .cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #DDDF4C; color: #0f2736; padding: 14px 28px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: transform 0.3s ease; } #unipile-auth-implementation .cta-primary:hover { transform: translateY(-3px); } #unipile-auth-implementation .cta-primary svg { width: 16px; height: 16px; } #unipile-auth-implementation .cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #ffffff; padding: 14px 28px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.25); transition: all 0.3s ease; } #unipile-auth-implementation .cta-secondary:hover { border-color: #3BB98B; color: #3BB98B; } #unipile-auth-implementation .cta-secondary svg { width: 16px; height: 16px; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-auth-implementation .section-title { font-size: 32px; } #unipile-auth-implementation .steps-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { #unipile-auth-implementation { padding: 0px 16px 40px; } #unipile-auth-implementation .section-title { font-size: 28px; } #unipile-auth-implementation .code-block { padding: 16px; } #unipile-auth-implementation .code-block pre { font-size: 0.7rem; } #unipile-auth-implementation .step-header { flex-wrap: wrap; gap: 8px; } #unipile-auth-implementation .step-method { margin-left: 0; margin-top: 4px; } #unipile-auth-implementation .section-cta { flex-direction: column; align-items: stretch; } #unipile-auth-implementation .cta-primary, #unipile-auth-implementation .cta-secondary { justify-content: center; width: 100%; } } @media (max-width: 400px) { #unipile-auth-implementation .section-title { font-size: 26px; } } <\/style>\n<p><\/p>\n<section id=\"unipile-auth-implementation\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"section-header\"> <\/p>\n<h2 class=\"section-title\">Implementation in <span>4 Steps<\/span><\/h2>\n<p> <pee class=\"section-subtitle\">From generating an auth link to executing API calls on behalf of your users<\/pee> <\/div>\n<p>   <\/p>\n<div class=\"steps-grid\">   <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-header\"> <\/p>\n<div class=\"step-number\">1<\/div>\n<p> <span class=\"step-title\">Generate Hosted Auth Link<\/span> <span class=\"step-method notranslate\" translate=\"no\" data-no-translation>POST<\/span> <\/div>\n<p> <\/p>\n<div class=\"step-body\"> <\/p>\n<div class=\"code-block notranslate\" translate=\"no\" data-no-translation><\/p>\n<pre><span class=\"keyword\">const<\/span> response = <span class=\"keyword\">await<\/span> <span class=\"function\">fetch<\/span>( <span class=\"string\">\"https:\/\/api.unipile.com\/api\/v1\/hosted\/accounts\/link\"<\/span>, { <span class=\"property\">method<\/span>: <span class=\"string\">\"POST\"<\/span>, <span class=\"property\">headers<\/span>: { <span class=\"string\">\"X-API-KEY\"<\/span>: <span class=\"string\">\"YOUR_API_KEY\"<\/span>, <span class=\"string\">\"Content-Type\"<\/span>: <span class=\"string\">\"application\/json\"<\/span> }, <span class=\"property\">body<\/span>: <span class=\"function\">JSON.stringify<\/span>({ <span class=\"property\">type<\/span>: <span class=\"string\">\"create\"<\/span>, <span class=\"property\">providers<\/span>: [<span class=\"string\">\"LINKEDIN\"<\/span>, <span class=\"string\">\"GOOGLE\"<\/span>], <span class=\"property\">notify_url<\/span>: <span class=\"string\">\"https:\/\/yourapp.com\/callback\"<\/span>, <span class=\"property\">name<\/span>: <span class=\"string\">\"user_123\"<\/span> }) });<\/pre>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"step-footer\"> <svg class=\"step-footer-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle> <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"><\/line> <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"><\/line> <\/svg> <span class=\"step-footer-text\">Keep your <strong class=\"notranslate\" translate=\"no\">X-API-KEY<\/strong> server-side only<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-header\"> <\/p>\n<div class=\"step-number\">2<\/div>\n<p> <span class=\"step-title\">Receive Auth URL<\/span> <span class=\"step-method notranslate\" translate=\"no\" data-no-translation>RESPONSE<\/span> <\/div>\n<p> <\/p>\n<div class=\"step-body\"> <\/p>\n<div class=\"code-block notranslate\" translate=\"no\" data-no-translation><\/p>\n<pre><span class=\"comment\">\/\/ Response from Unipile API<\/span>{ <span class=\"property\">\"object\"<\/span>: <span class=\"string\">\"HostedAuthURL\"<\/span>, <span class=\"property\">\"url\"<\/span>: <span class=\"string\">\"https:\/\/account.unipile.com\/pqb...\"<\/span>}<span class=\"comment\">\/\/ Redirect user to this URL<\/span><span class=\"function\">window.location.href<\/span> = response.<span class=\"property\">url<\/span>;<\/pre>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"step-footer\"> <svg class=\"step-footer-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <span class=\"step-footer-text\">Link expires after defined <strong class=\"notranslate\" translate=\"no\">expiresOn<\/strong> date<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-header\"> <\/p>\n<div class=\"step-number\">3<\/div>\n<p> <span class=\"step-title\">Handle Webhook Callback<\/span> <span class=\"step-method notranslate\" translate=\"no\" data-no-translation>WEBHOOK<\/span> <\/div>\n<p> <\/p>\n<div class=\"step-body\"> <\/p>\n<div class=\"code-block notranslate\" translate=\"no\" data-no-translation><\/p>\n<pre><span class=\"comment\">\/\/ Payload received on your notify_url<\/span>{ <span class=\"property\">\"status\"<\/span>: <span class=\"string\">\"CREATION_SUCCESS\"<\/span>, <span class=\"property\">\"account_id\"<\/span>: <span class=\"string\">\"e54m8LR22bA7G5qsAc8w\"<\/span>, <span class=\"property\">\"name\"<\/span>: <span class=\"string\">\"user_123\"<\/span>}<span class=\"comment\">\/\/ Store the account_id mapping<\/span><span class=\"keyword\">await<\/span> <span class=\"function\">saveUserAccount<\/span>( payload.<span class=\"property\">name<\/span>, payload.<span class=\"property\">account_id<\/span>);<\/pre>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"step-footer\"> <svg class=\"step-footer-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path> <polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline> <\/svg> <span class=\"step-footer-text\">Map <strong class=\"notranslate\" translate=\"no\">account_id<\/strong> to your internal user<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-header\"> <\/p>\n<div class=\"step-number\">4<\/div>\n<p> <span class=\"step-title\">Execute API Calls<\/span> <span class=\"step-method notranslate\" translate=\"no\" data-no-translation>GET \/ POST<\/span> <\/div>\n<p> <\/p>\n<div class=\"step-body\"> <\/p>\n<div class=\"code-block notranslate\" translate=\"no\" data-no-translation><\/p>\n<pre><span class=\"comment\">\/\/ Send message on behalf of user<\/span><span class=\"keyword\">const<\/span> message = <span class=\"keyword\">await<\/span> <span class=\"function\">fetch<\/span>( <span class=\"string\">\"https:\/\/api.unipile.com\/api\/v1\/chats\"<\/span>, { <span class=\"property\">method<\/span>: <span class=\"string\">\"POST\"<\/span>, <span class=\"property\">headers<\/span>: { <span class=\"string\">\"X-API-KEY\"<\/span>: <span class=\"string\">\"YOUR_API_KEY\"<\/span>, <span class=\"string\">\"Content-Type\"<\/span>: <span class=\"string\">\"application\/json\"<\/span> }, <span class=\"property\">body<\/span>: <span class=\"function\">JSON.stringify<\/span>({ <span class=\"property\">account_id<\/span>: <span class=\"string\">\"e54m8LR22bA7G5qsAc8w\"<\/span>, <span class=\"property\">text<\/span>: <span class=\"string\">\"Hello from your app!\"<\/span> }) });<\/pre>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"step-footer\"> <svg class=\"step-footer-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path> <\/svg> <span class=\"step-footer-text\">All actions executed as the <strong>authenticated user<\/strong><\/span> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p>   <\/p>\n<div class=\"section-cta\"> <a href=\"https:\/\/dashboard.unipile.com\/signup\/\" class=\"cta-primary\"> Build Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/a> <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" class=\"cta-secondary\" target=\"_blank\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path> <polyline points=\"14 2 14 8 20 8\"><\/polyline> <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line> <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line> <\/svg> Documentation <\/a> <\/div>\n<p>  <\/div>\n<p><\/section>\n<p>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”] <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-comparison-v2 { background: #ffffff; padding: 40px 20px 80px; font-family: 'Inter', sans-serif; } #unipile-comparison-v2 .container { max-width: 1A00px; margin: 0 auto; } \/* Section Header *\/ #unipile-comparison-v2 .section-header { text-align: center; margin-bottom: 60px; } #unipile-comparison-v2 .section-title { font-family: 'Poppins', sans-serif; font-size: 42px; font-weight: 700; color: #0f2736; line-height: 1.2; margin-bottom: 16px; } #unipile-comparison-v2 .section-title span { color: #3BB98B; } #unipile-comparison-v2 .section-subtitle { font-size: 18px; color: #383838; max-width: 650px; margin: 0 auto; line-height: 1.7; } \/* Comparison Layout *\/ #unipile-comparison-v2 .comparison-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 60px; } \/* Comparison Cards *\/ #unipile-comparison-v2 .comparison-card { border-radius: 20px; padding: 36px; position: relative; overflow: hidden; } #unipile-comparison-v2 .comparison-card.without { background: #f8fafc; border: 1px solid #e5e7eb; } #unipile-comparison-v2 .comparison-card.with { background: linear-gradient(145deg, rgba(59, 185, 139, 0.08), rgba(221, 223, 76, 0.04)); border: 2px solid #3BB98B; } #unipile-comparison-v2 .card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } #unipile-comparison-v2 .comparison-card.with .card-header { border-bottom-color: rgba(59, 185, 139, 0.2); } #unipile-comparison-v2 .card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } #unipile-comparison-v2 .comparison-card.without .card-icon { background: rgba(239, 68, 68, 0.1); } #unipile-comparison-v2 .comparison-card.without .card-icon svg { width: 24px; height: 24px; color: #ef4444; } #unipile-comparison-v2 .comparison-card.with .card-icon { background: rgba(59, 185, 139, 0.15); } #unipile-comparison-v2 .comparison-card.with .card-icon svg { width: 24px; height: 24px; color: #3BB98B; } #unipile-comparison-v2 .card-title-group { flex: 1; } #unipile-comparison-v2 .card-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; } #unipile-comparison-v2 .comparison-card.without .card-label { color: #ef4444; } #unipile-comparison-v2 .comparison-card.with .card-label { color: #3BB98B; } #unipile-comparison-v2 .card-title { font-family: 'Poppins', sans-serif; font-size: 1.3rem; font-weight: 700; color: #0f2736; } \/* Items List *\/ #unipile-comparison-v2 .items-list { display: flex; flex-direction: column; gap: 16px; } #unipile-comparison-v2 .item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 12px; } #unipile-comparison-v2 .comparison-card.without .item { background: #ffffff; border: 1px solid #e5e7eb; } #unipile-comparison-v2 .comparison-card.with .item { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(59, 185, 139, 0.15); } #unipile-comparison-v2 .item-icon { width: 28px; height: 28px; min-width: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-top: 2px; } #unipile-comparison-v2 .comparison-card.without .item-icon { background: rgba(239, 68, 68, 0.1); } #unipile-comparison-v2 .comparison-card.without .item-icon svg { width: 14px; height: 14px; color: #ef4444; } #unipile-comparison-v2 .comparison-card.with .item-icon { background: rgba(59, 185, 139, 0.15); } #unipile-comparison-v2 .comparison-card.with .item-icon svg { width: 14px; height: 14px; color: #3BB98B; } #unipile-comparison-v2 .item-content { flex: 1; } #unipile-comparison-v2 .item-title { font-size: 0.95rem; font-weight: 600; color: #0f2736; margin-bottom: 4px; } #unipile-comparison-v2 .item-desc { font-size: 0.85rem; color: #64748b; line-height: 1.5; } \/* Summary Stats *\/ #unipile-comparison-v2 .summary-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 32px; background: #0f2736; border-radius: 16px; margin-bottom: 50px; } #unipile-comparison-v2 .stat-item { text-align: center; } #unipile-comparison-v2 .stat-value { font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 700; color: #3BB98B; margin-bottom: 4px; } #unipile-comparison-v2 .stat-label { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); } \/* CTA *\/ #unipile-comparison-v2 .section-cta { display: flex; justify-content: center; gap: 16px; } #unipile-comparison-v2 .cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #DDDF4C; color: #0f2736; padding: 14px 28px; border-radius: 10px; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: transform 0.3s ease; } #unipile-comparison-v2 .cta-primary:hover { transform: translateY(-3px); } #unipile-comparison-v2 .cta-primary svg { width: 18px; height: 18px; } #unipile-comparison-v2 .cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #0f2736; padding: 14px 28px; border-radius: 10px; font-size: 0.95rem; font-weight: 600; text-decoration: none; border: 1px solid #e5e7eb; transition: all 0.3s ease; } #unipile-comparison-v2 .cta-secondary:hover { border-color: #3BB98B; color: #3BB98B; } #unipile-comparison-v2 .cta-secondary svg { width: 18px; height: 18px; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-comparison-v2 .section-title { font-size: 34px; } #unipile-comparison-v2 .comparison-layout { grid-template-columns: 1fr; gap: 24px; } #unipile-comparison-v2 .summary-row { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 600px) { #unipile-comparison-v2 { padding: 60px 6px; } #unipile-comparison-v2 .section-title { font-size: 28px; } #unipile-comparison-v2 .section-subtitle { font-size: 16px; } #unipile-comparison-v2 .comparison-card { padding: 24px; } #unipile-comparison-v2 .summary-row { padding: 24px; } #unipile-comparison-v2 .stat-value { font-size: 1.5rem; } #unipile-comparison-v2 .section-cta { flex-direction: column; align-items: stretch; } #unipile-comparison-v2 .cta-primary, #unipile-comparison-v2 .cta-secondary { justify-content: center; width: 100%; } } @media (max-width: 400px) { #unipile-comparison-v2 .section-title { font-size: 26px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-comparison-v2\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"section-header\"> <\/p>\n<h2 class=\"section-title\">Build It Yourself vs <span>Unipile Hosted Auth<\/span><\/h2>\n<p> <pee class=\"section-subtitle\"> Connecting users to multiple providers requires handling OAuth, QR codes, sessions, 2FA, and more. See what you skip with Unipile. <\/pee> <\/div>\n<p>   <\/p>\n<div class=\"comparison-layout\">   <\/p>\n<div class=\"comparison-card without\"> <\/p>\n<div class=\"card-header\"> <\/p>\n<div class=\"card-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle> <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"><\/line> <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"><\/line> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"card-title-group\"> <\/p>\n<div class=\"card-label\">Without Unipile<\/div>\n<p> <\/p>\n<div class=\"card-title\">Build & Maintain Yourself<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"items-list\"> <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Multiple OAuth Implementations<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Build separate OAuth flows for Google, Microsoft, and each provider with different scopes and refresh logic<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">QR Code Authentication<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Implement QR code generation and scanning for WhatsApp Web-style connections<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Session Management<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Handle session-based auth for LinkedIn, Instagram with cookie management and rotation<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Security Challenges<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Manage 2FA verification, CAPTCHA solving, and device trust across providers<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Token & Session Refresh<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Build automatic refresh logic, handle expirations, and manage reconnection flows<\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"comparison-card with\"> <\/p>\n<div class=\"card-header\"> <\/p>\n<div class=\"card-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path> <polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"card-title-group\"> <\/p>\n<div class=\"card-label\">With Unipile Hosted Auth<\/div>\n<p> <\/p>\n<div class=\"card-title\">One Link, Everything Handled<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"items-list\"> <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Single API Call<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Generate one redirect URL that works for all providers\u2014OAuth, QR, or session-based<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Pre-built Auth UI<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Production-ready wizard handles provider selection, credentials, QR display automatically<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Security Managed<\/div>\n<p> <\/p>\n<div class=\"item-desc\">2FA, CAPTCHA, device verification\u2014all handled transparently by Unipile<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Automatic Refresh<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Token and session refresh happens server-side\u2014zero maintenance on your end<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Webhook Callback<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Receive account_id instantly on your notify_url when connection succeeds<\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p>   <\/p>\n<div class=\"summary-row\"> <\/p>\n<div class=\"stat-item\"> <\/p>\n<div class=\"stat-value\">1<\/div>\n<p> <\/p>\n<div class=\"stat-label\">API endpoint to integrate<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"stat-item\"> <\/p>\n<div class=\"stat-value\">8+<\/div>\n<p> <\/p>\n<div class=\"stat-label\">Providers supported<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"stat-item\"> <\/p>\n<div class=\"stat-value\">0<\/div>\n<p> <\/p>\n<div class=\"stat-label\">Auth code to maintain<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"stat-item\"> <\/p>\n<div class=\"stat-value\">2 days<\/div>\n<p> <\/p>\n<div class=\"stat-label\">Average integration time<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"section-cta\"> <a href=\"https:\/\/dashboard.unipile.com\/signup\/\" class=\"cta-primary\"> Build Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/a> <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" class=\"cta-secondary\" target=\"_blank\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path> <polyline points=\"14 2 14 8 20 8\"><\/polyline> <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line> <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line> <\/svg> Documentation <\/a> <\/div>\n<p>  <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Auth on Behalf – Section 6: Security Architecture<\/title> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap\" rel=\"stylesheet\"> <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-auth-security { background: #0f2736; padding: 40px 20px 80px; font-family: 'Inter', sans-serif; } #unipile-auth-security .container { max-width: 1100px; margin: 0 auto; } \/* Section Header *\/ #unipile-auth-security .section-header { text-align: center; margin-bottom: 50px; } #unipile-auth-security .section-title { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #ffffff; line-height: 1.3; margin-bottom: 16px; } #unipile-auth-security .section-title span { color: #3BB98B; } #unipile-auth-security .section-subtitle { font-size: 16px; color: rgba(255, 255, 255, 0.7); max-width: 450px; margin: 0 auto; line-height: 1.6; } \/* Pillars Grid - 3 colonnes *\/ #unipile-auth-security .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } #unipile-auth-security .pillar-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; } #unipile-auth-security .pillar-icon { width: 56px; height: 56px; background: rgba(59, 185, 139, 0.12); border-radius: 14px; display: flex; align-items: center; justify-content: center; } #unipile-auth-security .pillar-icon svg { width: 28px; height: 28px; color: #3BB98B; } #unipile-auth-security .pillar-content { display: flex; flex-direction: column; gap: 10px; } #unipile-auth-security .pillar-title { font-size: 1rem; letter-spacing: 0.1px; font-weight: 600; color: #ffffff; } #unipile-auth-security .pillar-desc { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); line-height: 1.6; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-auth-security .section-title { font-size: 32px; } #unipile-auth-security .pillars-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } #unipile-auth-security .pillar-card { flex-direction: row; text-align: left; align-items: flex-start; gap: 20px; padding: 28px; } #unipile-auth-security .pillar-icon { min-width: 48px; width: 48px; height: 48px; } #unipile-auth-security .pillar-icon svg { width: 24px; height: 24px; } } @media (max-width: 600px) { #unipile-auth-security { padding: 0px 16px 40px; } #unipile-auth-security .section-title { font-size: 28px; } #unipile-auth-security .pillar-card { padding: 24px 20px; } } @media (max-width: 400px) { #unipile-auth-security .section-title { font-size: 26px; } #unipile-auth-security .pillar-card { flex-direction: column; align-items: center; text-align: center; gap: 16px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-auth-security\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"section-header\"> <\/p>\n<h2 class=\"section-title\">Security <span>Architecture<\/span><\/h2>\n<p> <pee class=\"section-subtitle\">Enterprise-grade protection by design<\/pee> <\/div>\n<p>   <\/p>\n<div class=\"pillars-grid\">   <\/p>\n<div class=\"pillar-card\"> <\/p>\n<div class=\"pillar-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect> <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"><\/line> <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"><\/line> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"pillar-content\"> <\/p>\n<h3 class=\"pillar-title\">Session Isolation<\/h3>\n<p> <pee class=\"pillar-desc\">Each account connection is isolated and sandboxed. No cross-contamination between user sessions.<\/pee> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"pillar-card\"> <\/p>\n<div class=\"pillar-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle> <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"><\/path> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"pillar-content\"> <\/p>\n<h3 class=\"pillar-title\">Token Abstraction<\/h3>\n<p> <pee class=\"pillar-desc\">Authorization tokens are managed server-side by Unipile. You only interact with a simple account_id.<\/pee> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"pillar-card\"> <\/p>\n<div class=\"pillar-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"pillar-content\"> <\/p>\n<h3 class=\"pillar-title\">Webhook Verification<\/h3>\n<p> <pee class=\"pillar-desc\">Secure callbacks with optional authentication parameters to verify request authenticity.<\/pee> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p>  <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Automatic Reconnection Handling<\/title> <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"> <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fira+Code:wght@400;600&family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap\" rel=\"stylesheet\"> <\/p>\n<style> \/* ===== FIX RAYURES ===== *\/ #unipile-auth-reconnection { position: relative; z-index: 1; isolation: isolate; } #unipile-auth-reconnection::before, #unipile-auth-reconnection::after { display: none !important; background-image: none !important; content: none !important; } #unipile-auth-reconnection *::before, #unipile-auth-reconnection *::after { background-image: none !important; } \/* ===== FIN FIX ===== *\/ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0f2736; } #unipile-auth-reconnection { background: #0f2736; padding: 0px 20px 80px; font-family: 'Inter', sans-serif; } #unipile-auth-reconnection .container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } \/* Text Content *\/ #unipile-auth-reconnection .content { display: flex; flex-direction: column; gap: 24px; } #unipile-auth-reconnection .section-title { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #ffffff; line-height: 1.3; } #unipile-auth-reconnection .section-title span { color: #3BB98B; } #unipile-auth-reconnection .section-description { font-size: 16px; color: #ffffff; line-height: 1.7; } #unipile-auth-reconnection .features-list { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; } #unipile-auth-reconnection .feature-item { display: flex; align-items: flex-start; gap: 14px; } #unipile-auth-reconnection .feature-icon { width: 24px; height: 24px; min-width: 24px; background: rgba(59, 185, 139, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; } #unipile-auth-reconnection .feature-icon svg { width: 14px; height: 14px; color: #3BB98B; } #unipile-auth-reconnection .feature-text { font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); line-height: 1.5; } #unipile-auth-reconnection .feature-text code { background: rgba(221, 223, 76, 0.15); color: #DDDF4C; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-family: 'Fira Code', monospace; } \/* Visual Mockup *\/ #unipile-auth-reconnection .visual { position: relative; } #unipile-auth-reconnection .flow-diagram { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 28px; } #unipile-auth-reconnection .flow-steps { display: flex; flex-direction: column; gap: 0; } #unipile-auth-reconnection .flow-step { display: flex; align-items: flex-start; gap: 16px; position: relative; padding-bottom: 28px; } #unipile-auth-reconnection .flow-step:last-child { padding-bottom: 0; } \/* Ligne de connexion verticale *\/ #unipile-auth-reconnection .flow-step .step-line { position: absolute; left: 20px; top: 40px; bottom: 0; width: 2px; background: linear-gradient(180deg, #3BB98B, rgba(59, 185, 139, 0.2)); transform: translateX(-50%); } #unipile-auth-reconnection .flow-step:last-child .step-line { display: none; } #unipile-auth-reconnection .step-icon { width: 40px; height: 40px; min-width: 40px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } #unipile-auth-reconnection .step-icon.webhook { background: rgba(234, 67, 53, 0.15); } #unipile-auth-reconnection .step-icon.webhook svg { color: #EA4335; } #unipile-auth-reconnection .step-icon.notify { background: rgba(251, 188, 4, 0.15); } #unipile-auth-reconnection .step-icon.notify svg { color: #FBBC04; } #unipile-auth-reconnection .step-icon.reconnect { background: rgba(59, 185, 139, 0.15); } #unipile-auth-reconnection .step-icon.reconnect svg { color: #3BB98B; } #unipile-auth-reconnection .step-icon.success { background: rgba(59, 185, 139, 0.15); } #unipile-auth-reconnection .step-icon.success svg { color: #3BB98B; } #unipile-auth-reconnection .step-icon svg { width: 20px; height: 20px; } #unipile-auth-reconnection .step-content { flex: 1; padding-top: 2px; } #unipile-auth-reconnection .step-title { font-size: 0.9rem; font-weight: 600; color: #ffffff; margin-bottom: 4px; } #unipile-auth-reconnection .step-desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); line-height: 1.5; } #unipile-auth-reconnection .step-tag { display: inline-flex; align-items: center; gap: 4px; background: rgba(221, 223, 76, 0.12); color: #DDDF4C; padding: 4px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; font-family: 'Fira Code', monospace; margin-top: 8px; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-auth-reconnection .container { grid-template-columns: 1fr; gap: 50px; } #unipile-auth-reconnection .section-title { font-size: 32px; } #unipile-auth-reconnection .visual { order: 2; } #unipile-auth-reconnection .content { order: 1; } } @media (max-width: 600px) { #unipile-auth-reconnection { padding: 0px 16px 40px; } #unipile-auth-reconnection .section-title { font-size: 28px; } #unipile-auth-reconnection .flow-diagram { padding: 20px; } } @media (max-width: 400px) { #unipile-auth-reconnection .section-title { font-size: 26px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-auth-reconnection\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"content\"> <\/p>\n<h2 class=\"section-title\">Automatic <span>Reconnection<\/span> Handling<\/h2>\n<p>  <pee class=\"section-description\"> Handle disconnections gracefully with automated workflows. When a user’s session expires or credentials become invalid, Unipile notifies you instantly so you can trigger a seamless reconnection flow. <\/pee>  <\/p>\n<div class=\"features-list\"> <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <span class=\"feature-text\">Webhook monitoring for <code>CREDENTIALS<\/code> status<\/span> <\/div>\n<p>  <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <span class=\"feature-text\">Automated user notification workflow<\/span> <\/div>\n<p>  <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <span class=\"feature-text\">Seamless reconnection experience<\/span> <\/div>\n<p>  <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <span class=\"feature-text\">Same flow, <code>type: \"reconnect\"<\/code><\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"visual\"> <\/p>\n<div class=\"flow-diagram\"> <\/p>\n<div class=\"flow-steps\">   <\/p>\n<div class=\"flow-step\"> <\/p>\n<div class=\"step-icon webhook\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"><\/path> <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"><\/line> <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Webhook Alert Received<\/div>\n<p> <\/p>\n<div class=\"step-desc\">Account status changes to CREDENTIALS<\/div>\n<p> <\/p>\n<div class=\"step-tag\">status: “CREDENTIALS”<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"step-line\"><\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"flow-step\"> <\/p>\n<div class=\"step-icon notify\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path> <polyline points=\"22,6 12,13 2,6\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Notify User<\/div>\n<p> <\/p>\n<div class=\"step-desc\">Send email or in-app notification to reconnect<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"step-line\"><\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"flow-step\"> <\/p>\n<div class=\"step-icon reconnect\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"23 4 23 10 17 10\"><\/polyline> <polyline points=\"1 20 1 14 7 14\"><\/polyline> <path d=\"M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15\"><\/path> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Generate Reconnect Link<\/div>\n<p> <\/p>\n<div class=\"step-desc\">Request hosted auth with type: reconnect<\/div>\n<p> <\/p>\n<div class=\"step-tag\">type: “reconnect”<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"step-line\"><\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"flow-step\"> <\/p>\n<div class=\"step-icon success\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path> <polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Account Restored<\/div>\n<p> <\/p>\n<div class=\"step-desc\">User re-authenticates, session is restored<\/div>\n<p> <\/p>\n<div class=\"step-tag\">status: “RECONNECTED”<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Auth on Behalf – Section 8: Supported Providers<\/title> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap\" rel=\"stylesheet\"> <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-auth-providers { background: #f4f5f7; padding: 40px 20px 80px; font-family: 'Inter', sans-serif; } #unipile-auth-providers .container { max-width: 1000px; margin: 0 auto; } \/* Section Header *\/ #unipile-auth-providers .section-header { text-align: center; margin-bottom: 50px; } #unipile-auth-providers .section-title { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #0f2736; line-height: 1.3; margin-bottom: 16px; } #unipile-auth-providers .section-title span { color: #3BB98B; } #unipile-auth-providers .section-subtitle { font-size: 16px; color: #383838; max-width: 500px; margin: 0 auto; line-height: 1.6; } \/* Providers Grid *\/ #unipile-auth-providers .providers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 50px; } #unipile-auth-providers .provider-card { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px 20px; display: flex; align-items: center; gap: 16px; transition: all 0.2s ease; } #unipile-auth-providers .provider-card:hover { border-color: #3BB98B; } #unipile-auth-providers .provider-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 8px; } #unipile-auth-providers .provider-icon.linkedin { background: rgba(10, 102, 194, 0.1); } #unipile-auth-providers .provider-icon.whatsapp { background: rgba(37, 211, 102, 0.1); } #unipile-auth-providers .provider-icon.instagram { background: rgba(225, 48, 108, 0.1); } #unipile-auth-providers .provider-icon.telegram { background: rgba(0, 136, 204, 0.1); } #unipile-auth-providers .provider-icon.gmail { background: rgba(234, 67, 53, 0.1); } #unipile-auth-providers .provider-icon.outlook { background: rgba(0, 120, 212, 0.1); } #unipile-auth-providers .provider-icon.imap { background: rgba(15, 39, 54, 0.08); } #unipile-auth-providers .provider-icon.gcalendar { background: rgba(66, 133, 244, 0.1); } #unipile-auth-providers .provider-icon.ocalendar { background: rgba(0, 120, 212, 0.1); } #unipile-auth-providers .provider-icon img { width: 28px; height: 28px; object-fit: contain; } #unipile-auth-providers .provider-info { display: flex; flex-direction: column; gap: 2px; } #unipile-auth-providers .provider-name { font-size: 0.95rem; font-weight: 600; color: #0f2736; } #unipile-auth-providers .provider-type { font-size: 0.75rem; color: #64748b; } \/* CTA *\/ #unipile-auth-providers .section-cta { display: flex; justify-content: center; gap: 16px; } #unipile-auth-providers .cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #DDDF4C; color: #0f2736; padding: 14px 28px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: transform 0.3s ease; } #unipile-auth-providers .cta-primary:hover { transform: translateY(-3px); } #unipile-auth-providers .cta-primary svg { width: 16px; height: 16px; } #unipile-auth-providers .cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #0f2736; padding: 14px 28px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; border: 1px solid #e5e7eb; transition: all 0.3s ease; } #unipile-auth-providers .cta-secondary:hover { border-color: #3BB98B; color: #3BB98B; } #unipile-auth-providers .cta-secondary svg { width: 16px; height: 16px; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-auth-providers .section-title { font-size: 32px; } #unipile-auth-providers .providers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { #unipile-auth-providers { padding: 0px 16px 40px; } #unipile-auth-providers .section-title { font-size: 28px; } #unipile-auth-providers .providers-grid { grid-template-columns: 1fr; } #unipile-auth-providers .section-cta { flex-direction: column; align-items: stretch; } #unipile-auth-providers .cta-primary, #unipile-auth-providers .cta-secondary { justify-content: center; width: 100%; } } @media (max-width: 400px) { #unipile-auth-providers .section-title { font-size: 26px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-auth-providers\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"section-header\"> <\/p>\n<h2 class=\"section-title\">Supported <span>Providers<\/span><\/h2>\n<p> <pee class=\"section-subtitle\">Full Auth on Behalf support across all integrations<\/pee> <\/div>\n<p>   <\/p>\n<div class=\"providers-grid\">   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon linkedin\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/linkedin-5.svg\" alt=\"LinkedIn\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">LinkedIn<\/span> <span class=\"provider-type\">Messaging<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon whatsapp\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/09\/whatsapp-1.svg\" alt=\"WhatsApp\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">WhatsApp<\/span> <span class=\"provider-type\">Messaging<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon instagram\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/08\/ig-logo.png\" alt=\"Instagram\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">Instagram<\/span> <span class=\"provider-type\">Messaging<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon telegram\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/TELEGRAM-2.svg\" alt=\"Telegram\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">Telegram<\/span> <span class=\"provider-type\">Messaging<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon gmail\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/gmail-3.svg\" alt=\"Gmail\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">Gmail<\/span> <span class=\"provider-type\">Google OAuth<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon outlook\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/outlook-2.svg\" alt=\"Outlook\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">Outlook<\/span> <span class=\"provider-type\">Microsoft OAuth<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon imap\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/imap-1.svg\" alt=\"IMAP\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">IMAP<\/span> <span class=\"provider-type\">Email Protocol<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon gcalendar\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/Google_Calendar_icon_2020-3-2.svg\" alt=\"Google Calendar\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">Google Calendar<\/span> <span class=\"provider-type\">Calendar<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon ocalendar\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/outloook-calendar-3.svg\" alt=\"Outlook Calendar\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">Outlook Calendar<\/span> <span class=\"provider-type\">Calendar<\/span> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p>   <\/p>\n<div class=\"section-cta\"> <a href=\"https:\/\/dashboard.unipile.com\/signup\/\" class=\"cta-primary\"> Build Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/a> <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" class=\"cta-secondary\" target=\"_blank\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path> <polyline points=\"14 2 14 8 20 8\"><\/polyline> <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line> <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line> <\/svg> Documentation <\/a> <\/div>\n<p>  <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Auth on Behalf – Section 9: CTA Final<\/title> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap\" rel=\"stylesheet\"> <\/p>\n<style> \/* ===== FIX RAYURES ===== *\/ #unipile-auth-cta-final { position: relative; z-index: 1; isolation: isolate; } #unipile-auth-cta-final::before, #unipile-auth-cta-final::after { display: none !important; background-image: none !important; content: none !important; } #unipile-auth-cta-final *::before, #unipile-auth-cta-final *::after { background-image: none !important; } \/* ===== FIN FIX ===== *\/ * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-auth-cta-final { background: #0f2736; padding: 40px 20px 80px; font-family: 'Inter', sans-serif; } #unipile-auth-cta-final .container { max-width: 1200px; margin: 0 auto; } \/* Layout Grid *\/ #unipile-auth-cta-final .cta-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; } \/* Content Side *\/ #unipile-auth-cta-final .cta-content { display: flex; flex-direction: column; gap: 24px; } #unipile-auth-cta-final .section-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(59, 185, 139, 0.12); color: #3BB98B; padding: 8px 16px; border-radius: 24px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; width: fit-content; } #unipile-auth-cta-final .section-title { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #ffffff; line-height: 1.25; } #unipile-auth-cta-final .section-title span { color: #3BB98B; } #unipile-auth-cta-final .section-desc { font-size: 17px; color: #ffffff; line-height: 1.7; } \/* Action List *\/ #unipile-auth-cta-final .action-list { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; } #unipile-auth-cta-final .action-item { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; transition: all 0.3s ease; text-decoration: none; cursor: pointer; } #unipile-auth-cta-final .action-item:hover { background: rgba(59, 185, 139, 0.08); border-color: rgba(59, 185, 139, 0.3); transform: translateX(4px); } #unipile-auth-cta-final .action-icon { width: 36px; height: 36px; background: rgba(59, 185, 139, 0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #unipile-auth-cta-final .action-icon svg { width: 18px; height: 18px; color: #3BB98B; } #unipile-auth-cta-final .action-content { flex: 1; } #unipile-auth-cta-final .action-title { font-size: 15px; font-weight: 600; color: #ffffff; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } #unipile-auth-cta-final .action-title svg { width: 14px; height: 14px; color: #DDDF4C; transition: transform 0.2s ease; } #unipile-auth-cta-final .action-item:hover .action-title svg { transform: translateX(3px); } #unipile-auth-cta-final .action-desc { font-size: 13px; color: rgba(255, 255, 255, 0.6); line-height: 1.4; } \/* CTA Buttons *\/ #unipile-auth-cta-final .cta-buttons { display: flex; gap: 16px; margin-top: 16px; } #unipile-auth-cta-final .cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #DDDF4C; color: #0f2736; padding: 14px 28px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: transform 0.3s ease; } #unipile-auth-cta-final .cta-primary:hover { transform: translateY(-3px); } #unipile-auth-cta-final .cta-primary svg { width: 16px; height: 16px; } #unipile-auth-cta-final .cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #ffffff; padding: 14px 28px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.25); transition: all 0.3s ease; } #unipile-auth-cta-final .cta-secondary:hover { border-color: #3BB98B; color: #3BB98B; } #unipile-auth-cta-final .cta-secondary svg { width: 16px; height: 16px; } \/* Dashboard Mockup *\/ #unipile-auth-cta-final .dashboard-visual { position: relative; } #unipile-auth-cta-final .dashboard-frame { background: linear-gradient(145deg, rgba(59, 185, 139, 0.25), rgba(221, 223, 76, 0.15), rgba(59, 185, 139, 0.1)); border-radius: 20px; padding: 3px; } #unipile-auth-cta-final .dashboard-inner { background: #ffffff; border-radius: 18px; overflow: hidden; } \/* Dashboard Header *\/ #unipile-auth-cta-final .dash-header { background: #0f2736; padding: 10px 16px; display: flex; align-items: center; gap: 10px; } #unipile-auth-cta-final .dash-dots { display: flex; gap: 5px; } #unipile-auth-cta-final .dash-dots span { width: 10px; height: 10px; border-radius: 50%; } #unipile-auth-cta-final .dash-dots span:nth-child(1) { background: #ff5f57; } #unipile-auth-cta-final .dash-dots span:nth-child(2) { background: #ffbd2e; } #unipile-auth-cta-final .dash-dots span:nth-child(3) { background: #28ca42; } #unipile-auth-cta-final .dash-logo { display: flex; align-items: center; gap: 6px; margin-left: 12px; } #unipile-auth-cta-final .dash-logo img { height: 18px; width: auto; } \/* Dashboard Content *\/ #unipile-auth-cta-final .dash-content { display: flex; min-height: 260px; } #unipile-auth-cta-final .dash-sidebar { width: 150px; background: #ffffff; border-right: 1px solid #e5e7eb; padding: 16px 0; } #unipile-auth-cta-final .dash-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 0.75rem; color: #64748b; cursor: default; transition: all 0.2s ease; } #unipile-auth-cta-final .dash-nav-item:hover { background: #f8f9fa; color: #0f2736; } #unipile-auth-cta-final .dash-nav-item.active { background: rgba(59, 185, 139, 0.08); color: #0f2736; border-left: 3px solid #3BB98B; font-weight: 500; } #unipile-auth-cta-final .dash-nav-item svg { width: 14px; height: 14px; } #unipile-auth-cta-final .dash-main { flex: 1; padding: 20px; background: #fafbfc; } #unipile-auth-cta-final .dash-main-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } #unipile-auth-cta-final .dash-main-title { font-size: 1rem; font-weight: 700; color: #0f2736; } #unipile-auth-cta-final .dash-add-btn { display: flex; align-items: center; gap: 6px; background: #0f2736; color: white; padding: 8px 14px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; border: none; } #unipile-auth-cta-final .dash-add-btn svg { width: 12px; height: 12px; } \/* Status Pills *\/ #unipile-auth-cta-final .dash-status-row { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; } #unipile-auth-cta-final .dash-status-pill { display: flex; align-items: center; gap: 5px; font-size: 0.65rem; color: #64748b; } #unipile-auth-cta-final .dash-status-dot { width: 7px; height: 7px; border-radius: 50%; } #unipile-auth-cta-final .dash-status-dot.green { background: #34A853; } #unipile-auth-cta-final .dash-status-dot.yellow { background: #FBBC04; } #unipile-auth-cta-final .dash-status-pill .count { font-weight: 600; } #unipile-auth-cta-final .dash-status-pill.green .count { color: #34A853; } \/* Table *\/ #unipile-auth-cta-final .dash-table { background: #ffffff; border-radius: 10px; border: 1px solid #e5e7eb; overflow: hidden; } #unipile-auth-cta-final .dash-table-header { display: grid; grid-template-columns: 2fr 1.5fr 1fr; padding: 10px 14px; background: #f8f9fa; border-bottom: 1px solid #e5e7eb; font-size: 0.6rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; } #unipile-auth-cta-final .dash-table-row { display: grid; grid-template-columns: 2fr 1.5fr 1fr; padding: 12px 14px; align-items: center; border-bottom: 1px solid #f0f0f0; } #unipile-auth-cta-final .dash-table-row:last-child { border-bottom: none; } #unipile-auth-cta-final .dash-account { display: flex; align-items: center; gap: 10px; } #unipile-auth-cta-final .dash-account-icon { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid #e5e7eb; } #unipile-auth-cta-final .dash-account-icon img { width: 16px; height: 16px; object-fit: contain; } #unipile-auth-cta-final .dash-account-name { font-weight: 600; font-size: 0.75rem; color: #0f2736; } #unipile-auth-cta-final .dash-account-id { font-family: 'Monaco', 'Menlo', monospace; font-size: 0.65rem; color: #3BB98B; } #unipile-auth-cta-final .dash-status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.65rem; color: #34A853; font-weight: 500; } \/* Responsive *\/ @media (max-width: 968px) { #unipile-auth-cta-final .cta-layout { grid-template-columns: 1fr; gap: 50px; } #unipile-auth-cta-final .section-title { font-size: 32px; } #unipile-auth-cta-final .dash-sidebar { display: none; } } @media (max-width: 600px) { #unipile-auth-cta-final { padding: 0px 16px 40px; } #unipile-auth-cta-final .section-title { font-size: 28px; } #unipile-auth-cta-final .cta-buttons { flex-direction: column; } #unipile-auth-cta-final .cta-primary, #unipile-auth-cta-final .cta-secondary { justify-content: center; width: 100%; } #unipile-auth-cta-final .dash-table-header, #unipile-auth-cta-final .dash-table-row { grid-template-columns: 2fr 1fr; } #unipile-auth-cta-final .dash-table-header > *:nth-child(2), #unipile-auth-cta-final .dash-table-row > *:nth-child(2) { display: none; } #unipile-auth-cta-final .action-item { padding: 14px 16px; } } @media (max-width: 400px) { #unipile-auth-cta-final .section-title { font-size: 26px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-auth-cta-final\"> <\/p>\n<div class=\"container\"> <\/p>\n<div class=\"cta-layout\">   <\/p>\n<div class=\"cta-content\"> <\/p>\n<div class=\"section-badge\">Get Started<\/div>\n<p>  <\/p>\n<h2 class=\"section-title\">Start Building with <span>Auth on Behalf<\/span><\/h2>\n<p>  <pee class=\"section-desc\">Integrate in 2 days with comprehensive documentation and dedicated support. Connect your users’ accounts securely.<\/pee>  <\/p>\n<div class=\"action-list\"> <a href=\"https:\/\/dashboard.unipile.com\/signup\/\" target=\"_blank\" class=\"action-item\"> <\/p>\n<div class=\"action-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/> <circle cx=\"9\" cy=\"7\" r=\"4\"\/> <line x1=\"19\" y1=\"8\" x2=\"19\" y2=\"14\"\/> <line x1=\"16\" y1=\"11\" x2=\"22\" y2=\"11\"\/> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"action-content\"> <\/p>\n<div class=\"action-title\"> Create your Unipile account <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg> <\/div>\n<p> <\/p>\n<div class=\"action-desc\">Sign up for free and get instant access to the dashboard<\/div>\n<p> <\/div>\n<p> <\/a>  <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" target=\"_blank\" class=\"action-item\"> <\/p>\n<div class=\"action-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/> <polyline points=\"14 2 14 8 20 8\"\/> <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/> <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"action-content\"> <\/p>\n<div class=\"action-title\"> Access Hosted Auth documentation <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg> <\/div>\n<p> <\/p>\n<div class=\"action-desc\">Step-by-step guide to implement Auth on Behalf<\/div>\n<p> <\/div>\n<p> <\/a> <\/div>\n<p>   <\/p>\n<div class=\"cta-buttons\"> <a href=\"https:\/\/dashboard.unipile.com\/signup\/\" class=\"cta-primary\"> Build Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/a> <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" class=\"cta-secondary\" target=\"_blank\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path> <polyline points=\"14 2 14 8 20 8\"><\/polyline> <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line> <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line> <\/svg> Documentation <\/a> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"dashboard-visual\"> <\/p>\n<div class=\"dashboard-frame\"> <\/p>\n<div class=\"dashboard-inner\">  <\/p>\n<div class=\"dash-header\"> <\/p>\n<div class=\"dash-dots\"> <span><\/span><span><\/span><span><\/span> <\/div>\n<p> <\/p>\n<div class=\"dash-logo\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/07\/logo-unipile.svg\" alt=\"Unipile\"> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"dash-content\">  <\/p>\n<aside class=\"dash-sidebar\"> <\/p>\n<div class=\"dash-nav-item active\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"\/><\/svg> Accounts <\/div>\n<p> <\/p>\n<div class=\"dash-nav-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\/><\/svg> Webhooks <\/div>\n<p> <\/p>\n<div class=\"dash-nav-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4\"\/><\/svg> API Keys <\/div>\n<p> <\/aside>\n<p>   <main class=\"dash-main\"> <\/p>\n<div class=\"dash-main-header\"> <\/p>\n<h3 class=\"dash-main-title\">Accounts<\/h3>\n<p> <button class=\"dash-add-btn\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg> Link account <\/button> <\/div>\n<p>  <\/p>\n<div class=\"dash-status-row\"> <\/p>\n<div class=\"dash-status-pill green\"> <span class=\"dash-status-dot green\"><\/span> <span class=\"count\">3<\/span> Operational <\/div>\n<p> <\/p>\n<div class=\"dash-status-pill\"> <span class=\"dash-status-dot yellow\"><\/span> <span>0<\/span> Auth required <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"dash-table\"> <\/p>\n<div class=\"dash-table-header\"> <span>Name<\/span> <span>Account ID<\/span> <span>Status<\/span> <\/div>\n<p> <\/p>\n<div class=\"dash-table-row\"> <\/p>\n<div class=\"dash-account\"> <\/p>\n<div class=\"dash-account-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/linkedin-5.svg\" alt=\"LinkedIn\"> <\/div>\n<p> <span class=\"dash-account-name\">John Doe<\/span> <\/div>\n<p> <span class=\"dash-account-id\">acc_01jgpb44…<\/span> <span class=\"dash-status-badge\"><span class=\"dash-status-dot green\"><\/span> OK<\/span> <\/div>\n<p> <\/p>\n<div class=\"dash-table-row\"> <\/p>\n<div class=\"dash-account\"> <\/p>\n<div class=\"dash-account-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/gmail-3.svg\" alt=\"Gmail\"> <\/div>\n<p> <span class=\"dash-account-name\">Sarah Miller<\/span> <\/div>\n<p> <span class=\"dash-account-id\">acc_01jgpb55…<\/span> <span class=\"dash-status-badge\"><span class=\"dash-status-dot green\"><\/span> OK<\/span> <\/div>\n<p> <\/p>\n<div class=\"dash-table-row\"> <\/p>\n<div class=\"dash-account\"> <\/p>\n<div class=\"dash-account-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/09\/whatsapp-1.svg\" alt=\"WhatsApp\"> <\/div>\n<p> <span class=\"dash-account-name\">Alex Turner<\/span> <\/div>\n<p> <span class=\"dash-account-id\">acc_01jgpc1a…<\/span> <span class=\"dash-status-badge\"><span class=\"dash-status-dot green\"><\/span> OK<\/span> <\/div>\n<p> <\/div>\n<p> <\/main> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p> <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ custom_padding_last_edited=”on|desktop” admin_label=”Section 4 Tesimonials & Security” module_id=”reviews” _builder_version=”4.27.4″ _module_preset=”default” background_color=”#f4f5f7″ background_enable_image=”off” custom_padding=”20px|16px|1px|16px|false|false” custom_padding_tablet=”20px|16px|1px|16px|false|false” custom_padding_phone=”20px|16px|1px|16px|false|false” custom_css_free_form=”.custom_row {|| margin: 0 auto; \/* Ensure no extra spacing *\/|| padding: 20px 0; \/* Adjust padding as needed *\/||}||” da_popup_slug=”reviews” da_disable_devices=”off|off|off” global_module=”258961″ saved_tabs=”all” locked=”off” collapsed=”on” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_row _builder_version=”4.27.4″ _module_preset=”default” custom_margin=”20px||0px||false|false” custom_margin_tablet=”20px||0px||false|false” custom_margin_phone=”0px||0px||false|false” custom_margin_last_edited=”on|desktop” locked=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”] <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-companies-section { font-family: 'Inter', sans-serif;  padding: 40px 20px; } #unipile-companies-section .companies-container { max-width: 1100px; margin: 0 auto; } \/* Header avec badge *\/ #unipile-companies-section .section-header { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 50px; flex-wrap: wrap; } #unipile-companies-section .badge-number { display: inline-flex; align-items: center; gap: 10px; background: rgba(59, 185, 139, 0.12); color: #3BB98B; padding: 12px 24px; border-radius: 28px; font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; } #unipile-companies-section .badge-number svg { width: 32px; height: 32px; } #unipile-companies-section .header-text { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #0f2736; } \/* Logos Section *\/ #unipile-companies-section .logos-section { margin-bottom: 50px; } #unipile-companies-section .logos-label { font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; margin-bottom: 24px; } #unipile-companies-section .logos-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 32px 70px; justify-content: center; align-items: center; } #unipile-companies-section .partner-logo { height: 72px; opacity: 1; transition: all 0.3s ease; } \/* Stats Row *\/ #unipile-companies-section .stats-row { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; } #unipile-companies-section .stat-item { text-align: center; } #unipile-companies-section .stat-value { font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 700; color: #3BB98B; line-height: 1; margin-bottom: 6px; } #unipile-companies-section .stat-label { font-size: 13px; color: #6b7280; line-height: 1.5; max-width: 180px; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-companies-section .section-header { flex-direction: column; gap: 8px; } #unipile-companies-section .badge-number { font-size: 28px; } #unipile-companies-section .badge-number svg { width: 24px; height: 24px; } #unipile-companies-section .header-text { font-size: 28px; text-align: center; } #unipile-companies-section .stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } #unipile-companies-section .stats-row .stat-item:last-child { grid-column: 1 \/ -1; justify-self: center; } #unipile-companies-section .stat-value { font-size: 30px; } #unipile-companies-section .logos-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 40px; justify-items: center; } #unipile-companies-section .partner-logo { height: 54px; } } @media (max-width: 600px) { #unipile-companies-section { padding: 50px 16px; } #unipile-companies-section .badge-number { font-size: 24px; padding: 10px 18px; } #unipile-companies-section .header-text { font-size: 22px; } #unipile-companies-section .stat-value { font-size: 26px; } #unipile-companies-section .stats-row { gap: 24px; } #unipile-companies-section .logos-grid { gap: 24px 32px; } #unipile-companies-section .partner-logo { height: 44px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1> <\/p>\n<section id=\"unipile-companies-section\"> <\/p>\n<div class=\"companies-container\">   <\/p>\n<div class=\"section-header\"> <span class=\"badge-number\"> <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M3 21h18\"\/> <path d=\"M5 21V7l8-4v18\"\/> <path d=\"M19 21V11l-6-4\"\/> <path d=\"M9 9v.01\"\/> <path d=\"M9 12v.01\"\/> <path d=\"M9 15v.01\"\/> <path d=\"M9 18v.01\"\/> <\/svg> 2000+ <\/span> <span class=\"header-text\">Companies Innovating with Unipile<\/span> <\/div>\n<p>  <\/p>\n<div class=\"logos-section\"> <\/p>\n<div class=\"logos-label\">Trusted by industry leaders<\/div>\n<p> <\/p>\n<div class=\"logos-grid\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/09\/Lemlist_Logo-1.svg\" alt=\"Lemlist\" class=\"partner-logo\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2026\/01\/logo-reply-io-1.svg\" alt=\"Reply io\" class=\"partner-logo\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/03\/relevance_logo_unipile_partner_.svg\" alt=\"Relevance AI\" class=\"partner-logo\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/03\/valley_logo_unipile_partner_.svg\" alt=\"Valley\" class=\"partner-logo\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/03\/recruitcrm_logo_unipile_partner_.svg\" alt=\"Recruit CRM\" class=\"partner-logo\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/03\/artisanco_logo_unipile_partner_.svg\" alt=\"Artisan\" class=\"partner-logo\"> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"stats-row\"> <\/p>\n<div class=\"stat-item\"> <\/p>\n<div class=\"stat-value\">1 API<\/div>\n<p> <\/p>\n<div class=\"stat-label\">Streamline operations for all major communication channels<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"stat-item\"> <\/p>\n<div class=\"stat-value\">2 Days<\/div>\n<p> <\/p>\n<div class=\"stat-label\">Achieve live integration quickly with minimal setup<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"stat-item\"> <\/p>\n<div class=\"stat-value\">30%<\/div>\n<p> <\/p>\n<div class=\"stat-label\">Reduction in maintenance efforts and resources<\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/section>\n<p><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.27.4″ _module_preset=”default” custom_margin=”80px||40px||false|false” custom_margin_tablet=”” custom_margin_phone=”” custom_margin_last_edited=”on|desktop” global_module=”275886″ saved_tabs=”all” locked=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”] <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-security-section { font-family: 'Inter', sans-serif;  padding: 40px 20px; } #unipile-security-section .security-container { max-width: 1100px; margin: 0 auto; } \/* Security Header *\/ #unipile-security-section .security-header { text-align: center; margin-bottom: 40px; } #unipile-security-section .security-header h3 { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #0f2736; margin-bottom: 12px; } #unipile-security-section .security-header p { font-size: 15px; color: #6b7280; margin-bottom: 16px; } #unipile-security-section .security-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #3BB98B; text-decoration: none; transition: all 0.3s ease; } #unipile-security-section .security-cta:hover { gap: 10px; color: #2da077; } #unipile-security-section .security-cta svg { width: 16px; height: 16px; transition: transform 0.3s ease; } #unipile-security-section .security-cta:hover svg { transform: translateX(2px); } \/* Compliance Cards *\/ #unipile-security-section .compliance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto 50px auto; } #unipile-security-section .compliance-card { background: #ffffff; border-radius: 16px; padding: 24px; border: 1px solid #e5e7eb; display: flex; align-items: flex-start; gap: 20px; } #unipile-security-section .compliance-icon { width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; } #unipile-security-section .compliance-content { flex: 1; text-align: left; } #unipile-security-section .compliance-header-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } #unipile-security-section .compliance-title { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; color: #0f2736; line-height: 1.2; } #unipile-security-section .compliance-status { font-size: 10px; font-weight: 600; color: #3BB98B; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 4px; background: rgba(59, 185, 139, 0.1); padding: 4px 10px; border-radius: 10px; } #unipile-security-section .compliance-status::before { content: ''; width: 6px; height: 6px; background: #3BB98B; border-radius: 50%; } #unipile-security-section .compliance-desc { font-size: 13px; color: #6b7280; line-height: 1.5; } \/* Metrics Row *\/ #unipile-security-section .metrics-row { display: flex; justify-content: center; gap: 80px; flex-wrap: wrap; } #unipile-security-section .metric-item { text-align: center; } #unipile-security-section .metric-value { font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 700; color: #3BB98B; line-height: 1; margin-bottom: 6px; } #unipile-security-section .metric-label { font-size: 13px; color: #6b7280; line-height: 1.5; max-width: 180px; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-security-section .security-header h3 { font-size: 28px; } #unipile-security-section .compliance-grid { grid-template-columns: 1fr; max-width: 500px; } #unipile-security-section .metrics-row { gap: 50px; } #unipile-security-section .metric-value { font-size: 30px; } } @media (max-width: 600px) { #unipile-security-section { padding: 50px 16px; } #unipile-security-section .security-header h3 { font-size: 22px; } #unipile-security-section .metric-value { font-size: 26px; } #unipile-security-section .compliance-card { padding: 20px; gap: 16px; } #unipile-security-section .compliance-icon { width: 52px; height: 52px; } #unipile-security-section .metrics-row { gap: 40px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1> <\/p>\n<section id=\"unipile-security-section\"> <\/p>\n<div class=\"security-container\">  <\/p>\n<div class=\"security-header\"> <\/p>\n<h3>Built-In Security and Compliance<\/h3>\n<p> <pee>Enterprise-grade protection for your data and workflows<\/pee> <a href=\"https:\/\/www.unipile.com\/security-compliance\/\" class=\"security-cta\"> Learn more about our security <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/a> <\/div>\n<p>  <\/p>\n<div class=\"compliance-grid\"> <\/p>\n<div class=\"compliance-card\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/01\/soc2-logo-1-1.png\" alt=\"SOC 2 Type II\" class=\"compliance-icon\"> <\/p>\n<div class=\"compliance-content\"> <\/p>\n<div class=\"compliance-header-row\"> <\/p>\n<div class=\"compliance-title\">SOC 2 Type II<\/div>\n<p> <\/p>\n<div class=\"compliance-status\">Certified<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"compliance-desc\">Independently audited security controls ensuring data protection and operational integrity.<\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"compliance-card\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/01\/GDPR-compliance-1.png\" alt=\"GDPR\" class=\"compliance-icon\"> <\/p>\n<div class=\"compliance-content\"> <\/p>\n<div class=\"compliance-header-row\"> <\/p>\n<div class=\"compliance-title\">GDPR<\/div>\n<p> <\/p>\n<div class=\"compliance-status\">Compliant<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"compliance-desc\">Full compliance with European data protection regulations for user privacy.<\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"metrics-row\"> <\/p>\n<div class=\"metric-item\"> <\/p>\n<div class=\"metric-value\">99.9%<\/div>\n<p> <\/p>\n<div class=\"metric-label\">Platform Uptime over the last 24 months<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"metric-item\"> <\/p>\n<div class=\"metric-value\">24\/7<\/div>\n<p> <\/p>\n<div class=\"metric-label\">Global Support with high-performance API<\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/section>\n<p><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”] <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-auth-faq { background: #F4F5F7; padding: 40px 20px 80px; font-family: 'Inter', sans-serif; } \/* Section Container *\/ #unipile-auth-faq .container { max-width: 900px; margin: 0 auto; } \/* Header *\/ #unipile-auth-faq .faq-header { text-align: center; margin-bottom: 60px; } #unipile-auth-faq .faq-title { font-family: 'Poppins', sans-serif; font-size: clamp(32px, 5vw, 38px); font-weight: 700; color: #0f2736; margin-bottom: 16px; line-height: 1.2; } #unipile-auth-faq .faq-title span { color: #3BB98B; } #unipile-auth-faq .faq-subtitle { font-size: 1.1rem; color: #383838; max-width: 700px; margin: 0 auto; } \/* FAQ List *\/ #unipile-auth-faq .faq-list { display: flex; flex-direction: column; gap: 12px; } \/* FAQ Item *\/ #unipile-auth-faq .faq-item { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; transition: all 0.3s ease; } #unipile-auth-faq .faq-item:hover { border-color: #3BB98B; box-shadow: 0 4px 20px rgba(59, 185, 139, 0.08); } #unipile-auth-faq .faq-item.active { border-color: #3BB98B; box-shadow: 0 8px 30px rgba(59, 185, 139, 0.12); } \/* Question Button *\/ #unipile-auth-faq .faq-question { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 28px; background: transparent; border: none; cursor: pointer; text-align: left; transition: all 0.2s ease; } #unipile-auth-faq .faq-question-content { display: flex; align-items: flex-start; gap: 16px; flex: 1; } #unipile-auth-faq .faq-number { flex-shrink: 0; padding: 6px 12px; background: rgba(59, 185, 139, 0.12); color: #3BB98B; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; transition: all 0.3s ease; } #unipile-auth-faq .faq-item.active .faq-number { background: rgba(59, 185, 139, 0.2); color: #2a9d6e; } #unipile-auth-faq .faq-question-text { font-family: 'Poppins', sans-serif; font-size: 1.1rem; font-weight: 600; color: #0f2736; line-height: 1.4; padding-top: 4px; } \/* Icon Toggle *\/ #unipile-auth-faq .faq-icon { flex-shrink: 0; width: 36px; height: 36px; background: #f8f9fa; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; margin-top: 2px; } #unipile-auth-faq .faq-icon svg { width: 18px; height: 18px; color: #64748b; transition: all 0.3s ease; } #unipile-auth-faq .faq-item:hover .faq-icon { background: rgba(59, 185, 139, 0.1); } #unipile-auth-faq .faq-item:hover .faq-icon svg { color: #3BB98B; } #unipile-auth-faq .faq-item.active .faq-icon { background: #3BB98B; transform: rotate(45deg); } #unipile-auth-faq .faq-item.active .faq-icon svg { color: #ffffff; } \/* Answer Panel *\/ #unipile-auth-faq .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; } #unipile-auth-faq .faq-item.active .faq-answer { max-height: 500px; } #unipile-auth-faq .faq-answer-content { padding: 0 28px 28px 76px; color: #475569; font-size: 1rem; line-height: 1.7; } #unipile-auth-faq .faq-answer-content strong { color: #0f2736; font-weight: 600; } #unipile-auth-faq .faq-answer-content code { background: rgba(59, 185, 139, 0.1); color: #3BB98B; padding: 2px 8px; border-radius: 4px; font-size: 0.9rem; font-family: 'Fira Code', monospace; } #unipile-auth-faq .faq-answer-content a { color: #0f2736; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; } #unipile-auth-faq .faq-answer-content a:hover { color: #3BB98B; } \/* CTA at bottom *\/ #unipile-auth-faq .faq-cta { margin-top: 50px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 28px; background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 12px; } #unipile-auth-faq .faq-cta-text { color: #475569; font-size: 1rem; margin: 0; } #unipile-auth-faq .faq-cta-button { display: inline-flex; align-items: center; gap: 10px; background: #DDDF4C; color: #0F2836; padding: 13px 20px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 1rem; border: none; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; } #unipile-auth-faq .faq-cta-button:hover { transform: translateY(-2px); } #unipile-auth-faq .faq-cta-button svg { width: 18px; height: 18px; } \/* Responsive *\/ @media (max-width: 768px) { #unipile-auth-faq { padding: 20px 16px 40px; } #unipile-auth-faq .faq-header { margin-bottom: 40px; } #unipile-auth-faq .faq-question { padding: 20px; gap: 16px; } #unipile-auth-faq .faq-question-content { gap: 12px; } #unipile-auth-faq .faq-number { padding: 5px 10px; font-size: 0.75rem; } #unipile-auth-faq .faq-question-text { font-size: 1rem; padding-top: 2px; } #unipile-auth-faq .faq-icon { width: 32px; height: 32px; } #unipile-auth-faq .faq-icon svg { width: 16px; height: 16px; } #unipile-auth-faq .faq-answer-content { padding: 0 20px 20px 60px; font-size: 0.95rem; } #unipile-auth-faq .faq-cta { padding: 30px 20px; margin-top: 40px; flex-direction: column; text-align: center; gap: 16px; } #unipile-auth-faq .faq-cta-text { font-size: 0.95rem; } } @media (max-width: 480px) { #unipile-auth-faq .faq-question-content { flex-direction: column; gap: 8px; } #unipile-auth-faq .faq-number { padding: 4px 8px; font-size: 0.7rem; } #unipile-auth-faq .faq-question-text { padding-top: 0; } #unipile-auth-faq .faq-answer-content { padding: 0 20px 20px 20px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-auth-faq\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"faq-header\"> <\/p>\n<h2 class=\"faq-title\">Auth on Behalf <span>FAQ<\/span><\/h2>\n<p> <pee class=\"faq-subtitle\">Common questions about user authentication and the Hosted Auth flow<\/pee> <\/div>\n<p>  <\/p>\n<div class=\"faq-list\">  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">01<\/span> <span class=\"faq-question-text\">What is Auth on Behalf and how is it different from bot APIs?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> Auth on Behalf enables your app to perform actions <strong>as the actual user<\/strong>\u2014not as a bot or app identity. With traditional bot APIs, recipients see the app’s name instead of the user’s real identity. With Auth on Behalf, messages appear exactly as if the user sent them manually\u2014<strong>indistinguishable from native actions<\/strong>. <\/div>\n<p> <\/div>\n<p><\/div>\n<p>  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">02<\/span> <span class=\"faq-question-text\">Do I need to store user credentials or tokens?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> <strong>No.<\/strong> Unipile manages all authorization tokens server-side\u2014whether they’re OAuth tokens (Google, Microsoft), session tokens (LinkedIn, Instagram), or QR-based sessions (WhatsApp). You only store the <code>account_id<\/code> returned after successful authentication. This eliminates security risks associated with credential storage. <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">03<\/span> <span class=\"faq-question-text\">What is Hosted Auth and why should I use it?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> Hosted Auth is a pre-built authentication wizard that handles <strong>all auth methods<\/strong> for you: OAuth flows (Google, Microsoft), QR code scanning (WhatsApp), session-based login (LinkedIn, Instagram), 2FA verification, and CAPTCHA challenges. Instead of building each flow separately, you generate <strong>one redirect link<\/strong>\u2014Unipile handles everything else. <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">04<\/span> <span class=\"faq-question-text\">How do I implement the Hosted Auth flow?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> Implementation takes 4 steps: <strong>1)<\/strong> Generate a hosted auth link via our API, <strong>2)<\/strong> Redirect the user to the returned URL, <strong>3)<\/strong> Handle the webhook callback on your <code>notify_url<\/code>, <strong>4)<\/strong> Store the <code>account_id<\/code> mapping and start making API calls. Most teams complete integration in <strong>1-2 days<\/strong>. <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">05<\/span> <span class=\"faq-question-text\">What happens when a user’s session expires?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> When a session expires or credentials become invalid, you’ll receive a webhook notification with <code>status: \"CREDENTIALS\"<\/code>. You can then notify the user and generate a reconnection link using <code>type: \"reconnect\"<\/code>. The flow is identical to initial authentication\u2014seamless for both you and your users. <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">06<\/span> <span class=\"faq-question-text\">Can I use my own domain for the auth flow?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> Yes. We support <strong>white-label custom domains<\/strong>. You can use your own subdomain (e.g., <code>auth.yourapp.com<\/code>) instead of Unipile’s default URL. Simply configure a CNAME record pointing to <code>account.unipile.com<\/code> and contact our support to finalize the setup. <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">07<\/span> <span class=\"faq-question-text\">Which providers are supported?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> Hosted Auth supports all Unipile providers: <strong>LinkedIn, WhatsApp, Instagram, Telegram<\/strong> (messaging), <strong>Gmail, Outlook, IMAP<\/strong> (email), and <strong>Google Calendar, Outlook Calendar<\/strong> (calendar). Each provider uses its native auth method (OAuth, QR code, or session)\u2014all unified through one API. <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">08<\/span> <span class=\"faq-question-text\">What’s the difference between building auth myself vs using Hosted Auth?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> Building yourself means implementing <strong>multiple auth flows<\/strong> (OAuth for Google\/Microsoft, QR scanning for WhatsApp, session management for LinkedIn), handling <strong>2FA and CAPTCHA challenges<\/strong>, managing <strong>token refresh<\/strong>, and maintaining it all as providers change. With Hosted Auth, you generate <strong>one link<\/strong>\u2014everything else is handled by Unipile with zero maintenance on your end. <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"faq-cta\"> <pee class=\"faq-cta-text\">Still have questions about Auth on Behalf?<\/pee> <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" class=\"faq-cta-button\" target=\"_blank\"> View Documentation <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <polyline points=\"12 5 19 12 12 19\"\/> <\/svg> <\/a> <\/div>\n<p> <\/div>\n<p><\/section>\n<p><script> document.querySelectorAll('#unipile-auth-faq .faq-question').forEach(button => { button.addEventListener('click', () => { const item = button.closest('.faq-item'); const isActive = item.classList.contains('active');  \/\/ Close all other items document.querySelectorAll('#unipile-auth-faq .faq-item').forEach(otherItem => { otherItem.classList.remove('active'); otherItem.querySelector('.faq-question').setAttribute('aria-expanded', 'false'); });  \/\/ Toggle current item if (!isActive) { item.classList.add('active'); button.setAttribute('aria-expanded', 'true'); } }); });<\/script><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Implementation in 4 Steps From generating an auth link to executing API calls on behalf of your users 1 Generate Hosted Auth Link POST const response = await fetch( “https:\/\/api.unipile.com\/api\/v1\/hosted\/accounts\/link”, { method: “POST”, headers: { “X-API-KEY”: “YOUR_API_KEY”, “Content-Type”: “application\/json” }, body: JSON.stringify({ type: “create”, providers: [“LINKEDIN”, “GOOGLE”], notify_url: “https:\/\/yourapp.com\/callback”, name: “user_123” }) }); Keep your […]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"folder":[],"class_list":["post-276546","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Auth on Behalf: Secure Delegated Access for Your API Integration - Unipile<\/title>\n<meta name=\"description\" content=\"Auth on Behalf lets your app securely act on behalf of users across LinkedIn, Email, WhatsApp & Calendar. Zero credential storage, single unified endpoint.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.unipile.com\/it\/auth-dello-sviluppatore-per-conto\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Auth on Behalf: Secure Delegated Access for Your API Integration - Unipile\" \/>\n<meta property=\"og:description\" content=\"Auth on Behalf lets your app securely act on behalf of users across LinkedIn, Email, WhatsApp & Calendar. Zero credential storage, single unified endpoint.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unipile.com\/it\/auth-dello-sviluppatore-per-conto\/\" \/>\n<meta property=\"og:site_name\" content=\"Unipile\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/unipilefr\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-05T10:59:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2023\/07\/Logo.svg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@UnipileAPI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/\",\"url\":\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/\",\"name\":\"Auth on Behalf: Secure Delegated Access for Your API Integration - Unipile\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.unipile.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.unipile.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Logo.svg\",\"datePublished\":\"2026-01-13T14:47:03+00:00\",\"dateModified\":\"2026-02-05T10:59:56+00:00\",\"description\":\"Auth on Behalf lets your app securely act on behalf of users across LinkedIn, Email, WhatsApp & Calendar. Zero credential storage, single unified endpoint.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.unipile.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.unipile.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Logo.svg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.unipile.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Auth on Behalf: Secure Delegated Access for Your API Integration\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.unipile.com\\\/#website\",\"url\":\"https:\\\/\\\/www.unipile.com\\\/\",\"name\":\"Unipile\",\"description\":\"Integrate Messaging & Email, Connect with Ease via API\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.unipile.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.unipile.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.unipile.com\\\/#organization\",\"name\":\"Unipile\",\"url\":\"https:\\\/\\\/www.unipile.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.unipile.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.unipile.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/logo-unipile.png\",\"contentUrl\":\"https:\\\/\\\/www.unipile.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/logo-unipile.png\",\"width\":200,\"height\":49,\"caption\":\"Unipile\"},\"image\":{\"@id\":\"https:\\\/\\\/www.unipile.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/unipilefr\",\"https:\\\/\\\/x.com\\\/UnipileAPI\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/unipile\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Auth on Behalf: Accesso delegato sicuro per la vostra integrazione API - Unipile","description":"Auth on Behalf consente alla vostra app di agire in modo sicuro per conto degli utenti su LinkedIn, e-mail, WhatsApp e calendario. Nessuna memorizzazione di credenziali, un unico endpoint unificato.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.unipile.com\/it\/auth-dello-sviluppatore-per-conto\/","og_locale":"it_IT","og_type":"article","og_title":"Auth on Behalf: Secure Delegated Access for Your API Integration - Unipile","og_description":"Auth on Behalf lets your app securely act on behalf of users across LinkedIn, Email, WhatsApp & Calendar. Zero credential storage, single unified endpoint.","og_url":"https:\/\/www.unipile.com\/it\/auth-dello-sviluppatore-per-conto\/","og_site_name":"Unipile","article_publisher":"https:\/\/www.facebook.com\/unipilefr","article_modified_time":"2026-02-05T10:59:56+00:00","og_image":[{"url":"https:\/\/www.unipile.com\/wp-content\/uploads\/2023\/07\/Logo.svg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@UnipileAPI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.unipile.com\/developer-auth-on-behalf\/","url":"https:\/\/www.unipile.com\/developer-auth-on-behalf\/","name":"Auth on Behalf: Accesso delegato sicuro per la vostra integrazione API - Unipile","isPartOf":{"@id":"https:\/\/www.unipile.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unipile.com\/developer-auth-on-behalf\/#primaryimage"},"image":{"@id":"https:\/\/www.unipile.com\/developer-auth-on-behalf\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unipile.com\/wp-content\/uploads\/2023\/07\/Logo.svg","datePublished":"2026-01-13T14:47:03+00:00","dateModified":"2026-02-05T10:59:56+00:00","description":"Auth on Behalf consente alla vostra app di agire in modo sicuro per conto degli utenti su LinkedIn, e-mail, WhatsApp e calendario. Nessuna memorizzazione di credenziali, un unico endpoint unificato.","breadcrumb":{"@id":"https:\/\/www.unipile.com\/developer-auth-on-behalf\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unipile.com\/developer-auth-on-behalf\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.unipile.com\/developer-auth-on-behalf\/#primaryimage","url":"https:\/\/www.unipile.com\/wp-content\/uploads\/2023\/07\/Logo.svg","contentUrl":"https:\/\/www.unipile.com\/wp-content\/uploads\/2023\/07\/Logo.svg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.unipile.com\/developer-auth-on-behalf\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.unipile.com\/"},{"@type":"ListItem","position":2,"name":"Auth on Behalf: Secure Delegated Access for Your API Integration"}]},{"@type":"WebSite","@id":"https:\/\/www.unipile.com\/#website","url":"https:\/\/www.unipile.com\/","name":"Unipile","description":"Integrazione di messaggistica ed e-mail, connessione semplice tramite API","publisher":{"@id":"https:\/\/www.unipile.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unipile.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.unipile.com\/#organization","name":"Unipile","url":"https:\/\/www.unipile.com\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.unipile.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.unipile.com\/wp-content\/uploads\/2021\/05\/logo-unipile.png","contentUrl":"https:\/\/www.unipile.com\/wp-content\/uploads\/2021\/05\/logo-unipile.png","width":200,"height":49,"caption":"Unipile"},"image":{"@id":"https:\/\/www.unipile.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/unipilefr","https:\/\/x.com\/UnipileAPI","https:\/\/www.linkedin.com\/company\/unipile\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/pages\/276546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/comments?post=276546"}],"version-history":[{"count":56,"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/pages\/276546\/revisions"}],"predecessor-version":[{"id":277119,"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/pages\/276546\/revisions\/277119"}],"wp:attachment":[{"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/media?parent=276546"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/folder?post=276546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":276546,"date":"2026-01-13T15:47:03","date_gmt":"2026-01-13T14:47:03","guid":{"rendered":"https:\/\/www.unipile.com\/?page_id=276546"},"modified":"2026-02-05T11:59:56","modified_gmt":"2026-02-05T10:59:56","slug":"auth-dello-sviluppatore-per-conto","status":"publish","type":"page","link":"https:\/\/www.unipile.com\/it\/developer-auth-on-behalf\/","title":{"rendered":"Auth on Behalf: Accesso delegato sicuro per l'integrazione API"},"content":{"rendered":"

[et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″] Auth on Behalf – Hero V17<\/title> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap\" rel=\"stylesheet\"> <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-auth-hero-v17 { padding: 40px 20px 80px; font-family: 'Inter', sans-serif; overflow: hidden; } #unipile-auth-hero-v17 .container { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } \/* LEFT - Content *\/ #unipile-auth-hero-v17 .hero-content { display: flex; flex-direction: column; gap: 20px; } \/* BADGE - GREEN *\/ #unipile-auth-hero-v17 .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(59, 185, 139, 0.15); color: #3BB98B; padding: 6px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; width: fit-content; } #unipile-auth-hero-v17 .hero-badge svg { width: 12px; height: 12px; } #unipile-auth-hero-v17 .hero-title { font-family: 'Poppins', sans-serif; font-size: 45px; font-weight: 700; color: #ffffff; line-height: 1.3; } #unipile-auth-hero-v17 .hero-subtitle { font-size: 16px; color: #ffffff; line-height: 1.7; max-width: 480px; } #unipile-auth-hero-v17 .hero-ctas { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; } #unipile-auth-hero-v17 .cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #DDDF4C; color: #0F2836; padding: 12px 24px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: transform 0.3s ease; } #unipile-auth-hero-v17 .cta-primary:hover { transform: translateY(-3px); } #unipile-auth-hero-v17 .cta-primary svg { width: 16px; height: 16px; } #unipile-auth-hero-v17 .cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #ffffff; padding: 12px 24px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; } #unipile-auth-hero-v17 .cta-secondary:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.35); } #unipile-auth-hero-v17 .cta-secondary svg { width: 16px; height: 16px; } \/* RIGHT - Visual *\/ #unipile-auth-hero-v17 .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; } #unipile-auth-hero-v17 .visual-frame { position: relative; padding: 20px; width: 100%; } \/* Grid layout for blocks *\/ #unipile-auth-hero-v17 .blocks-grid { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; } \/* Module Card Base *\/ #unipile-auth-hero-v17 .module-card { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(255, 255, 255, 0.04); min-height: 120px; backdrop-filter: blur(10px); } \/* Labels *\/ #unipile-auth-hero-v17 .module-label { font-size: 0.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; letter-spacing: 0.5px; text-align: center; } \/* Central Hub - Unipile *\/ #unipile-auth-hero-v17 .hub-chip { grid-column: 2; grid-row: 1; width: 100%; min-height: 120px; background: linear-gradient(135deg, rgba(59, 185, 139, 0.15), rgba(59, 185, 139, 0.05)); border: 1px solid rgba(59, 185, 139, 0.4); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: relative; box-shadow: 0 0 40px rgba(59, 185, 139, 0.12); } #unipile-auth-hero-v17 .hub-chip img { width: 40px; height: 40px; } #unipile-auth-hero-v17 .hub-chip span { font-size: 0.8rem; font-weight: 700; color: #ffffff; letter-spacing: 0.5px; } \/* Your App - top left *\/ #unipile-auth-hero-v17 .module-card.your-app { grid-column: 1; grid-row: 1; } #unipile-auth-hero-v17 .app-window { width: 100%; background: rgba(0, 0, 0, 0.35); border-radius: 8px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.08); } #unipile-auth-hero-v17 .app-window-dots { display: flex; gap: 5px; margin-bottom: 10px; } #unipile-auth-hero-v17 .app-window-dots span { width: 8px; height: 8px; border-radius: 50%; } #unipile-auth-hero-v17 .app-window-dots span:nth-child(1) { background: #ff5f57; } #unipile-auth-hero-v17 .app-window-dots span:nth-child(2) { background: #ffbd2e; } #unipile-auth-hero-v17 .app-window-dots span:nth-child(3) { background: #28ca42; } #unipile-auth-hero-v17 .app-window-lines { display: flex; flex-direction: column; gap: 5px; } #unipile-auth-hero-v17 .app-window-line { height: 5px; background: rgba(255, 255, 255, 0.12); border-radius: 3px; } #unipile-auth-hero-v17 .app-window-line:nth-child(1) { width: 75%; } #unipile-auth-hero-v17 .app-window-line:nth-child(2) { width: 50%; } \/* Providers - top right *\/ #unipile-auth-hero-v17 .module-card.providers { grid-column: 3; grid-row: 1; } #unipile-auth-hero-v17 .providers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } #unipile-auth-hero-v17 .provider-item { width: 32px; height: 32px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; } #unipile-auth-hero-v17 .provider-item img { width: 18px; height: 18px; object-fit: contain; } \/* Bottom row cards - GREEN ICONS *\/ #unipile-auth-hero-v17 .module-icon-box { width: 48px; height: 48px; background: rgba(59, 185, 139, 0.1); border: 1px solid rgba(59, 185, 139, 0.25); border-radius: 10px; display: flex; align-items: center; justify-content: center; } #unipile-auth-hero-v17 .module-icon-box svg { width: 22px; height: 22px; color: #3BB98B; } \/* Hosted Auth - bottom left *\/ #unipile-auth-hero-v17 .module-card.hosted-auth { grid-column: 1; grid-row: 2; } \/* Auto Refresh - bottom center *\/ #unipile-auth-hero-v17 .module-card.auto-refresh { grid-column: 2; grid-row: 2; } \/* Webhooks - bottom right *\/ #unipile-auth-hero-v17 .module-card.webhooks { grid-column: 3; grid-row: 2; } #unipile-auth-hero-v17 .webhook-bars { display: flex; align-items: flex-end; gap: 4px; height: 22px; } #unipile-auth-hero-v17 .webhook-bar { width: 5px; background: #3BB98B; border-radius: 2px; opacity: 0.8; } #unipile-auth-hero-v17 .webhook-bar:nth-child(1) { height: 35%; opacity: 0.5; } #unipile-auth-hero-v17 .webhook-bar:nth-child(2) { height: 65%; opacity: 0.65; } #unipile-auth-hero-v17 .webhook-bar:nth-child(3) { height: 100%; opacity: 1; } #unipile-auth-hero-v17 .webhook-bar:nth-child(4) { height: 50%; opacity: 0.6; } #unipile-auth-hero-v17 .webhook-bar:nth-child(5) { height: 80%; opacity: 0.75; } \/* =========================== RESPONSIVE - TABLET =========================== *\/ @media (max-width: 900px) { #unipile-auth-hero-v17 { padding: 40px 20px 60px; } #unipile-auth-hero-v17 .container { grid-template-columns: 1fr; gap: 40px; max-width: 600px; } #unipile-auth-hero-v17 .hero-content { text-align: center; align-items: center; } #unipile-auth-hero-v17 .hero-title { font-size: 32px; } #unipile-auth-hero-v17 .hero-subtitle { max-width: 100%; } #unipile-auth-hero-v17 .hero-ctas { justify-content: center; } \/* Grille 3 colonnes conserv\u00e9e sur tablette, plus d'espace *\/ #unipile-auth-hero-v17 .visual-frame { padding: 10px; } } \/* =========================== RESPONSIVE - MOBILE =========================== *\/ @media (max-width: 600px) { #unipile-auth-hero-v17 { padding: 0px 16px 40px; } #unipile-auth-hero-v17 .container { gap: 32px; max-width: 100%; } #unipile-auth-hero-v17 .hero-title { font-size: 26px; } #unipile-auth-hero-v17 .hero-subtitle { font-size: 15px; } #unipile-auth-hero-v17 .hero-ctas { flex-direction: column; width: 100%; } #unipile-auth-hero-v17 .cta-primary, #unipile-auth-hero-v17 .cta-secondary { justify-content: center; width: 100%; } #unipile-auth-hero-v17 .cta-primary:hover, #unipile-auth-hero-v17 .cta-secondary:hover { transform: none; } \/* Grille 2 colonnes sur mobile *\/ #unipile-auth-hero-v17 .visual-frame { padding: 0; overflow: hidden; } #unipile-auth-hero-v17 .blocks-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 12px; max-width: 100%; overflow: hidden; } \/* Row 1: Your App + Unipile Hub *\/ #unipile-auth-hero-v17 .module-card.your-app { grid-column: 1; grid-row: 1; } #unipile-auth-hero-v17 .hub-chip { grid-column: 2; grid-row: 1; min-height: auto; } \/* Row 2: Providers full width \u2014 horizontal layout *\/ #unipile-auth-hero-v17 .module-card.providers { grid-column: 1 \/ -1; grid-row: 2; flex-direction: row; justify-content: center; gap: 14px; padding: 14px 20px; min-height: auto; } #unipile-auth-hero-v17 .module-card.providers .providers-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; } #unipile-auth-hero-v17 .module-card.providers .provider-item { width: 100%; height: 36px; background: transparent; border: none; } #unipile-auth-hero-v17 .module-card.providers .provider-item img { width: 28px; height: 28px; } \/* Row 3: Hosted Auth + Auto Refresh *\/ #unipile-auth-hero-v17 .module-card.hosted-auth { grid-column: 1; grid-row: 3; } #unipile-auth-hero-v17 .module-card.auto-refresh { grid-column: 2; grid-row: 3; } \/* Row 4: Webhooks full width \u2014 horizontal layout *\/ #unipile-auth-hero-v17 .module-card.webhooks { grid-column: 1 \/ -1; grid-row: 4; flex-direction: row; justify-content: center; gap: 14px; padding: 14px 20px; min-height: auto; max-width: 100%; overflow: hidden; } \/* Ajustements cartes *\/ #unipile-auth-hero-v17 .module-card { padding: 16px 14px; min-height: auto; gap: 10px; border-radius: 10px; } #unipile-auth-hero-v17 .hub-chip { border-radius: 10px; gap: 8px; padding: 16px 14px; } #unipile-auth-hero-v17 .hub-chip img { width: 32px; height: 32px; } #unipile-auth-hero-v17 .hub-chip span { font-size: 0.7rem; } #unipile-auth-hero-v17 .module-label { font-size: 0.65rem; letter-spacing: 0.3px; } #unipile-auth-hero-v17 .module-icon-box { width: 40px; height: 40px; border-radius: 8px; } #unipile-auth-hero-v17 .module-icon-box svg { width: 18px; height: 18px; } #unipile-auth-hero-v17 .app-window { padding: 8px 10px; border-radius: 6px; } #unipile-auth-hero-v17 .app-window-dots span { width: 6px; height: 6px; } #unipile-auth-hero-v17 .app-window-dots { margin-bottom: 8px; gap: 4px; } } \/* =========================== RESPONSIVE - VERY SMALL =========================== *\/ @media (max-width: 380px) { #unipile-auth-hero-v17 { padding: 0px 12px 32px; } #unipile-auth-hero-v17 .hero-title { font-size: 24px; } #unipile-auth-hero-v17 .hero-subtitle { font-size: 14px; } #unipile-auth-hero-v17 .blocks-grid { gap: 8px; } #unipile-auth-hero-v17 .module-card { padding: 12px 10px; gap: 8px; } #unipile-auth-hero-v17 .hub-chip { padding: 12px 10px; } #unipile-auth-hero-v17 .module-card.providers .providers-grid { gap: 6px; } #unipile-auth-hero-v17 .provider-item { border-radius: 6px; } #unipile-auth-hero-v17 .module-icon-box { width: 36px; height: 36px; } #unipile-auth-hero-v17 .module-icon-box svg { width: 16px; height: 16px; } } <\/style>\n<p><\/head><body data-rsssl=1><\/p>\n<section id=\"unipile-auth-hero-v17\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"hero-content\"> <\/p>\n<div class=\"hero-badge\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect> <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path> <\/svg> Auth On Behalf <\/div>\n<p>  <\/p>\n<h1 class=\"hero-title\">User Authentication for Your Integration<\/h1>\n<p>  <pee class=\"hero-subtitle\">Execute actions as the actual user, not as a bot. Messages, emails, and invites sent from real accounts, indistinguishable from manual actions.<\/pee>  <\/p>\n<div class=\"hero-ctas\"> <a href=\"https:\/\/dashboard.unipile.com\/signup\/\" class=\"cta-primary\"> Build Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/a> <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" class=\"cta-secondary\" target=\"_blank\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path> <polyline points=\"14 2 14 8 20 8\"><\/polyline> <\/svg> Documentation <\/a> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"hero-visual\"> <\/p>\n<div class=\"visual-frame\">   <\/p>\n<div class=\"blocks-grid\">   <\/p>\n<div class=\"module-card your-app\"> <\/p>\n<div class=\"app-window\"> <\/p>\n<div class=\"app-window-dots\"> <span><\/span> <span><\/span> <span><\/span> <\/div>\n<p> <\/p>\n<div class=\"app-window-lines\"> <\/p>\n<div class=\"app-window-line\"><\/div>\n<p> <\/p>\n<div class=\"app-window-line\"><\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <span class=\"module-label\">Your App<\/span> <\/div>\n<p>   <\/p>\n<div class=\"hub-chip\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2023\/07\/Logo.svg\" alt=\"Unipile\"> <span>UNIPILE<\/span> <\/div>\n<p>   <\/p>\n<div class=\"module-card providers\"> <\/p>\n<div class=\"providers-grid\"> <\/p>\n<div class=\"provider-item\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/linkedin-5.svg\" alt=\"LinkedIn\"> <\/div>\n<p> <\/p>\n<div class=\"provider-item\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/gmail-3.svg\" alt=\"Gmail\"> <\/div>\n<p> <\/p>\n<div class=\"provider-item\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/09\/whatsapp-1.svg\" alt=\"WhatsApp\"> <\/div>\n<p> <\/p>\n<div class=\"provider-item\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/outlook-2.svg\" alt=\"Outlook\"> <\/div>\n<p> <\/p>\n<div class=\"provider-item\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/TELEGRAM-2.svg\" alt=\"Telegram\"> <\/div>\n<p> <\/p>\n<div class=\"provider-item\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/Google_Calendar_icon_2020-3-2.svg\" alt=\"Calendar\"> <\/div>\n<p> <\/div>\n<p> <span class=\"module-label\">Providers<\/span> <\/div>\n<p>   <\/p>\n<div class=\"module-card hosted-auth\"> <\/p>\n<div class=\"module-icon-box\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect> <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path> <\/svg> <\/div>\n<p> <span class=\"module-label\">Hosted Auth<\/span> <\/div>\n<p>   <\/p>\n<div class=\"module-card auto-refresh\"> <\/p>\n<div class=\"module-icon-box\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"23 4 23 10 17 10\"><\/polyline> <polyline points=\"1 20 1 14 7 14\"><\/polyline> <path d=\"M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15\"><\/path> <\/svg> <\/div>\n<p> <span class=\"module-label\">Refresh Token<\/span> <\/div>\n<p>   <\/p>\n<div class=\"module-card webhooks\"> <\/p>\n<div class=\"module-icon-box\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"><\/path> <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"><\/path> <\/svg> <\/div>\n<p> <span class=\"module-label\">Webhooks<\/span> <\/div>\n<p>  <\/div>\n<p>  <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”] <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-auth-what { background: #f4f5f7; padding: 40px 20px 80px; font-family: 'Inter', sans-serif; } #unipile-auth-what .container { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } \/* Text Content *\/ #unipile-auth-what .content { display: flex; flex-direction: column; gap: 24px; } #unipile-auth-what .section-title { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #0f2736; line-height: 1.3; } #unipile-auth-what .section-title span { color: #3BB98B; } #unipile-auth-what .section-description { font-size: 16px; color: #383838; line-height: 1.7; } #unipile-auth-what .features-list { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; } #unipile-auth-what .feature-item { display: flex; align-items: flex-start; gap: 14px; } #unipile-auth-what .feature-icon { width: 24px; height: 24px; min-width: 24px; background: rgba(59, 185, 139, 0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; } #unipile-auth-what .feature-icon svg { width: 14px; height: 14px; color: #3BB98B; } #unipile-auth-what .feature-text { display: flex; flex-direction: column; gap: 2px; } #unipile-auth-what .feature-title { font-size: 0.95rem; font-weight: 600; color: #0f2736; } #unipile-auth-what .feature-desc { font-size: 0.85rem; color: #64748b; line-height: 1.5; } \/* Visual Mockup *\/ #unipile-auth-what .visual { position: relative;max-width: 500px; } #unipile-auth-what .lifecycle-card { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; } #unipile-auth-what .lifecycle-header { background: #0f2736; padding: 16px 20px; display: flex; align-items: center; gap: 12px; } #unipile-auth-what .lifecycle-header-icon { width: 32px; height: 32px; background: rgba(59, 185, 139, 0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; } #unipile-auth-what .lifecycle-header-icon svg { width: 18px; height: 18px; color: #3BB98B; } #unipile-auth-what .lifecycle-header-text { font-size: 0.9rem; font-weight: 600; color: #ffffff; } #unipile-auth-what .lifecycle-body { padding: 24px; } #unipile-auth-what .lifecycle-steps { display: flex; flex-direction: column; gap: 0; position: relative; } #unipile-auth-what .lifecycle-step { display: flex; align-items: flex-start; gap: 16px; position: relative; padding-bottom: 24px; } #unipile-auth-what .lifecycle-step:last-child { padding-bottom: 0; } #unipile-auth-what .lifecycle-step::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: linear-gradient(180deg, #3BB98B, #e5e7eb); } #unipile-auth-what .lifecycle-step:last-child::before { display: none; } #unipile-auth-what .step-number { width: 32px; height: 32px; min-width: 32px; background: #3BB98B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #ffffff; position: relative; z-index: 1; } #unipile-auth-what .step-content { flex: 1; padding-top: 4px; } #unipile-auth-what .step-title { font-size: 0.9rem; font-weight: 600; color: #0f2736; margin-bottom: 4px; } #unipile-auth-what .step-desc { font-size: 0.8rem; color: #64748b; line-height: 1.5; } #unipile-auth-what .step-tag { display: inline-flex; align-items: center; gap: 4px; background: rgba(59, 185, 139, 0.1); color: #3BB98B; padding: 4px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 600; margin-top: 8px; } #unipile-auth-what .step-tag svg { width: 12px; height: 12px; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-auth-what .container { grid-template-columns: 1fr; gap: 50px; } #unipile-auth-what .section-title { font-size: 32px; } #unipile-auth-what .content { order: 1; } #unipile-auth-what .visual { order: 2; } } @media (max-width: 600px) { #unipile-auth-what { padding: 0px 16px; } #unipile-auth-what .section-title { font-size: 28px; } #unipile-auth-what .lifecycle-body { padding: 20px 16px; } #unipile-auth-what .lifecycle-step { gap: 12px; } } @media (max-width: 400px) { #unipile-auth-what .section-title { font-size: 26px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-auth-what\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"content\"> <\/p>\n<h2 class=\"section-title\">What is <span>Auth on Behalf<\/span>?<\/h2>\n<p>  <pee class=\"section-description\"> With Auth on Behalf, users explicitly grant your application permission to act on their connected accounts. Through a secure redirect flow, they authenticate directly with the provider, your app never touches their credentials. Once authorized, you receive a simple account_id to execute any action within their granted scope. <\/pee>  <\/p>\n<div class=\"features-list\"> <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"feature-text\"> <span class=\"feature-title\">User Identity Mapping<\/span> <span class=\"feature-desc\">Link your internal user IDs to authenticated provider accounts<\/span> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"feature-text\"> <span class=\"feature-title\">Redirect-Based Consent<\/span> <span class=\"feature-desc\">Users authorize access through provider’s native consent flow<\/span> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"feature-text\"> <span class=\"feature-title\">Token Abstraction<\/span> <span class=\"feature-desc\">Unipile manages authorization tokens, you only use a simple account_id<\/span> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"feature-text\"> <span class=\"feature-title\">API Execution on Behalf<\/span> <span class=\"feature-desc\">All API calls are executed in the context of the authenticated user<\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"visual\"> <\/p>\n<div class=\"lifecycle-card\"> <\/p>\n<div class=\"lifecycle-header\"> <\/p>\n<div class=\"lifecycle-header-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle> <polyline points=\"12 6 12 12 16 14\"><\/polyline> <\/svg> <\/div>\n<p> <span class=\"lifecycle-header-text\">Authentication Lifecycle<\/span> <\/div>\n<p>  <\/p>\n<div class=\"lifecycle-body\"> <\/p>\n<div class=\"lifecycle-steps\">  <\/p>\n<div class=\"lifecycle-step\"> <\/p>\n<div class=\"step-number\">1<\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Generate Auth Link<\/div>\n<p> <\/p>\n<div class=\"step-desc\">Your backend requests a hosted auth URL from Unipile API<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"lifecycle-step\"> <\/p>\n<div class=\"step-number\">2<\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">User Consent<\/div>\n<p> <\/p>\n<div class=\"step-desc\">User is redirected to provider’s authorization screen<\/div>\n<p> <\/p>\n<div class=\"step-tag\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path> <\/svg> Secure Redirect <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"lifecycle-step\"> <\/p>\n<div class=\"step-number\">3<\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Session Established<\/div>\n<p> <\/p>\n<div class=\"step-desc\">Provider session created and tokens securely stored<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"lifecycle-step\"> <\/p>\n<div class=\"step-number\">4<\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Callback Received<\/div>\n<p> <\/p>\n<div class=\"step-desc\">Your notify_url receives account_id and user mapping<\/div>\n<p> <\/p>\n<div class=\"step-tag\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> Webhook Ready <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"lifecycle-step\"> <\/p>\n<div class=\"step-number\">5<\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Execute API Calls<\/div>\n<p> <\/p>\n<div class=\"step-desc\">Make requests on behalf of the user using account_id<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″] <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-hosted-auth-v3 { background: #f4f5f7; padding: 0px 20px 80px; font-family: 'Inter', sans-serif; } #unipile-hosted-auth-v3 .container { max-width: 1100px; margin: 0 auto; } \/* Section Header *\/ #unipile-hosted-auth-v3 .section-header { text-align: center; margin-bottom: 60px; } #unipile-hosted-auth-v3 .section-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(59, 185, 139, 0.12); color: #3BB98B; padding: 8px 16px; border-radius: 24px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 20px; } #unipile-hosted-auth-v3 .section-badge svg { width: 16px; height: 16px; } #unipile-hosted-auth-v3 .section-title { font-family: 'Poppins', sans-serif; font-size: 42px; font-weight: 700; color: #0f2736; line-height: 1.2; margin-bottom: 20px; } #unipile-hosted-auth-v3 .section-title span { color: #3BB98B; } #unipile-hosted-auth-v3 .section-subtitle { font-size: 18px; color: #383838; max-width: 750px; margin: 0 auto; line-height: 1.7; } \/* Comparison Side by Side *\/ #unipile-hosted-auth-v3 .comparison-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 50px; } #unipile-hosted-auth-v3 .comparison-card { padding: 28px; border-radius: 16px; position: relative; height: 100%; } #unipile-hosted-auth-v3 .comparison-card.without { background: #ffffff; border: 1px solid #e5e7eb; } #unipile-hosted-auth-v3 .comparison-card.with { background: linear-gradient(135deg, rgba(59, 185, 139, 0.08), rgba(221, 223, 76, 0.05)); border: 1px solid rgba(59, 185, 139, 0.25); } #unipile-hosted-auth-v3 .comparison-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 14px; } #unipile-hosted-auth-v3 .comparison-card.without .comparison-label { color: #ef4444; } #unipile-hosted-auth-v3 .comparison-card.with .comparison-label { color: #3BB98B; } #unipile-hosted-auth-v3 .comparison-label svg { width: 14px; height: 14px; } #unipile-hosted-auth-v3 .comparison-title { font-size: 1.15rem; font-weight: 700; color: #0f2736; margin-bottom: 16px; line-height: 1.3; } #unipile-hosted-auth-v3 .comparison-items { display: flex; flex-direction: column; gap: 10px; } #unipile-hosted-auth-v3 .comparison-item { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; font-weight: 500; } #unipile-hosted-auth-v3 .comparison-card.without .comparison-item { background: rgba(239, 68, 68, 0.06); color: #b91c1c; } #unipile-hosted-auth-v3 .comparison-card.with .comparison-item { background: rgba(59, 185, 139, 0.10); color: #047857; } #unipile-hosted-auth-v3 .comparison-item svg { width: 16px; height: 16px; flex-shrink: 0; } \/* Main Content Grid *\/ #unipile-hosted-auth-v3 .main-content { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; margin-bottom: 60px; } \/* Wizard Mockup *\/ #unipile-hosted-auth-v3 .wizard-visual { position: relative; } #unipile-hosted-auth-v3 .wizard-frame { background: linear-gradient(145deg, rgba(59, 185, 139, 0.2), rgba(221, 223, 76, 0.1)); border-radius: 24px; padding: 4px; } #unipile-hosted-auth-v3 .wizard-card { background: #ffffff; border-radius: 20px; overflow: hidden; } #unipile-hosted-auth-v3 .wizard-header { background: #0f2736; padding: 14px 20px; display: flex; align-items: center; gap: 12px; } #unipile-hosted-auth-v3 .wizard-dots { display: flex; gap: 6px; } #unipile-hosted-auth-v3 .wizard-dots span { width: 10px; height: 10px; border-radius: 50%; } #unipile-hosted-auth-v3 .wizard-dots span:nth-child(1) { background: #ff5f57; } #unipile-hosted-auth-v3 .wizard-dots span:nth-child(2) { background: #ffbd2e; } #unipile-hosted-auth-v3 .wizard-dots span:nth-child(3) { background: #28ca42; } #unipile-hosted-auth-v3 .wizard-url { flex: 1; background: rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 6px 12px; font-size: 0.7rem; color: rgba(255, 255, 255, 0.7); font-family: 'Monaco', 'Menlo', monospace; display: flex; align-items: center; gap: 6px; } #unipile-hosted-auth-v3 .wizard-url svg { width: 12px; height: 12px; color: #3BB98B; } #unipile-hosted-auth-v3 .wizard-body { padding: 28px; } #unipile-hosted-auth-v3 .wizard-intro { text-align: center; margin-bottom: 24px; } #unipile-hosted-auth-v3 .wizard-logo { width: 48px; height: 48px; margin: 0 auto 12px; } #unipile-hosted-auth-v3 .wizard-logo img { width: 100%; height: 100%; object-fit: contain; } #unipile-hosted-auth-v3 .wizard-intro-title { font-size: 1.1rem; font-weight: 700; color: #0f2736; margin-bottom: 4px; } #unipile-hosted-auth-v3 .wizard-intro-desc { font-size: 0.85rem; color: #64748b; } #unipile-hosted-auth-v3 .providers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; } #unipile-hosted-auth-v3 .provider-card { background: #f8fafc; border: 2px solid #e5e7eb; border-radius: 12px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: all 0.2s ease; } #unipile-hosted-auth-v3 .provider-card.selected { border-color: #3BB98B; background: rgba(59, 185, 139, 0.05); } #unipile-hosted-auth-v3 .provider-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } #unipile-hosted-auth-v3 .provider-icon img { width: 26px; height: 26px; object-fit: contain; } #unipile-hosted-auth-v3 .provider-name { font-size: 0.7rem; font-weight: 600; color: #0f2736; } #unipile-hosted-auth-v3 .provider-method { font-size: 0.6rem; color: #94a3b8; margin-top: -4px; } #unipile-hosted-auth-v3 .wizard-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid #e5e7eb; } #unipile-hosted-auth-v3 .wizard-security { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: #64748b; } #unipile-hosted-auth-v3 .wizard-security svg { width: 14px; height: 14px; color: #3BB98B; } #unipile-hosted-auth-v3 .wizard-btn { background: #3BB98B; color: #ffffff; padding: 12px 24px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } #unipile-hosted-auth-v3 .wizard-btn svg { width: 16px; height: 16px; } \/* Features Grid *\/ #unipile-hosted-auth-v3 .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } #unipile-hosted-auth-v3 .feature-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 28px 24px; text-align: center; } #unipile-hosted-auth-v3 .feature-icon { width: 56px; height: 56px; background: linear-gradient(135deg, rgba(59, 185, 139, 0.12), rgba(59, 185, 139, 0.05)); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } #unipile-hosted-auth-v3 .feature-icon svg { width: 26px; height: 26px; color: #3BB98B; } #unipile-hosted-auth-v3 .feature-title { font-size: 1rem; letter-spacing: 0.1px; font-weight: 700; color: #0f2736; margin-bottom: 8px; } #unipile-hosted-auth-v3 .feature-desc { font-size: 0.85rem; color: #64748b; line-height: 1.5; } \/* CTA *\/ #unipile-hosted-auth-v3 .section-cta { display: flex; justify-content: center; gap: 16px; margin-top: 50px; } #unipile-hosted-auth-v3 .cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #DDDF4C; color: #0f2736; padding: 14px 28px; border-radius: 10px; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: transform 0.3s ease; } #unipile-hosted-auth-v3 .cta-primary:hover { transform: translateY(-3px); } #unipile-hosted-auth-v3 .cta-primary svg { width: 18px; height: 18px; } #unipile-hosted-auth-v3 .cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #0f2736; padding: 14px 28px; border-radius: 10px; font-size: 0.95rem; font-weight: 600; text-decoration: none; border: 1px solid #e5e7eb; transition: all 0.3s ease; } #unipile-hosted-auth-v3 .cta-secondary:hover { border-color: #3BB98B; color: #3BB98B; } #unipile-hosted-auth-v3 .cta-secondary svg { width: 18px; height: 18px; } \/* Responsive *\/ @media (max-width: 1024px) { #unipile-hosted-auth-v3 .features-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { #unipile-hosted-auth-v3 .section-title { font-size: 34px; } #unipile-hosted-auth-v3 .comparison-row { grid-template-columns: 1fr; gap: 16px; } #unipile-hosted-auth-v3 .main-content { grid-template-columns: 1fr; gap: 40px; } #unipile-hosted-auth-v3 .wizard-visual { order: -1; } } @media (max-width: 600px) { #unipile-hosted-auth-v3 { padding: 60px 5px; } #unipile-hosted-auth-v3 .section-title { font-size: 28px; } #unipile-hosted-auth-v3 .section-subtitle { font-size: 16px; } #unipile-hosted-auth-v3 .features-grid { grid-template-columns: 1fr; } #unipile-hosted-auth-v3 .providers-grid { grid-template-columns: repeat(2, 1fr); } #unipile-hosted-auth-v3 .wizard-footer { flex-direction: column; gap: 16px; } #unipile-hosted-auth-v3 .section-cta { flex-direction: column; align-items: stretch; } #unipile-hosted-auth-v3 .cta-primary, #unipile-hosted-auth-v3 .cta-secondary { justify-content: center; width: 100%; } #unipile-hosted-auth-v3 .comparison-items { gap: 8px; } #unipile-hosted-auth-v3 .comparison-item { padding: 8px 12px; font-size: 0.8rem; } } @media (max-width: 400px) { #unipile-hosted-auth-v3 .section-title { font-size: 26px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-hosted-auth-v3\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"section-header\"> <\/p>\n<div class=\"section-badge\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path> <\/svg> Key Feature <\/div>\n<p> <\/p>\n<h2 class=\"section-title\">One Link, <span>All Auth Methods<\/span> Handled<\/h2>\n<p> <pee class=\"section-subtitle\"> Skip the complexity of building OAuth flows, QR code scanners, session handlers, 2FA verification, and captcha management. Generate a single link\u2014Unipile handles everything. <\/pee> <\/div>\n<p>  <\/p>\n<div class=\"comparison-row\">   <\/p>\n<div class=\"comparison-card without\"> <\/p>\n<div class=\"comparison-label\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle> <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"><\/line> <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"><\/line> <\/svg> Without Hosted Auth <\/div>\n<p> <\/p>\n<div class=\"comparison-title\">Build & maintain each auth flow separately<\/div>\n<p> <\/p>\n<div class=\"comparison-items\"> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> OAuth flows for each provider <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> QR code scanning implementation <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> Session & token management <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> 2FA & Captcha handling <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> Token refresh logic <\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"comparison-card with\"> <\/p>\n<div class=\"comparison-label\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path> <polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline> <\/svg> With Hosted Auth <\/div>\n<p> <\/p>\n<div class=\"comparison-title\">One redirect link, everything managed<\/div>\n<p> <\/p>\n<div class=\"comparison-items\"> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> Single API call to generate link <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> All providers unified interface <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> Zero maintenance overhead <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> Webhook callback on success <\/span> <span class=\"comparison-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> White-label ready <\/span> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p>   <\/p>\n<div class=\"main-content\" style=\"display: flex; justify-content: center;\"> <\/p>\n<div class=\"wizard-visual\" style=\"max-width: 520px; width: 100%;\"> <\/p>\n<div class=\"wizard-frame\"> <\/p>\n<div class=\"wizard-card\"> <\/p>\n<div class=\"wizard-header\"> <\/p>\n<div class=\"wizard-dots\"> <span><\/span><span><\/span><span><\/span> <\/div>\n<p> <\/p>\n<div class=\"wizard-url\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect> <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path> <\/svg> auth.yourapp.com\/connect <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"wizard-body\"> <\/p>\n<div class=\"wizard-intro\"> <\/p>\n<div class=\"wizard-logo\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2023\/07\/Logo.svg\" alt=\"Unipile\"> <\/div>\n<p> <\/p>\n<div class=\"wizard-intro-title\">Connect your account<\/div>\n<p> <\/p>\n<div class=\"wizard-intro-desc\">Select a provider to continue<\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"providers-grid\"> <\/p>\n<div class=\"provider-card selected\"> <\/p>\n<div class=\"provider-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/linkedin-5.svg\" alt=\"LinkedIn\"> <\/div>\n<p> <span class=\"provider-name\">LinkedIn<\/span> <span class=\"provider-method\">Session<\/span> <\/div>\n<p>  <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/09\/whatsapp-1.svg\" alt=\"WhatsApp\"> <\/div>\n<p> <span class=\"provider-name\">WhatsApp<\/span> <span class=\"provider-method\">QR Code<\/span> <\/div>\n<p>  <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/gmail-3.svg\" alt=\"Gmail\"> <\/div>\n<p> <span class=\"provider-name\">Gmail<\/span> <span class=\"provider-method\">OAuth<\/span> <\/div>\n<p>  <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/outlook-2.svg\" alt=\"Outlook\"> <\/div>\n<p> <span class=\"provider-name\">Outlook<\/span> <span class=\"provider-method\">OAuth<\/span> <\/div>\n<p>  <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/TELEGRAM-2.svg\" alt=\"Telegram\"> <\/div>\n<p> <span class=\"provider-name\">Telegram<\/span> <span class=\"provider-method\">Phone<\/span> <\/div>\n<p>  <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/08\/ig-logo.png\" alt=\"Instagram\"> <\/div>\n<p> <span class=\"provider-name\">Instagram<\/span> <span class=\"provider-method\">Session<\/span> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"wizard-footer\"> <\/p>\n<div class=\"wizard-security\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path> <\/svg> End-to-end encrypted <\/div>\n<p> <\/p>\n<div class=\"wizard-btn\"> Continue <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"features-grid\">  <\/p>\n<div class=\"feature-card\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect> <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"><\/line> <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"><\/line> <\/svg> <\/div>\n<p> <\/p>\n<h3 class=\"feature-title\">Pre-built UI<\/h3>\n<p> <pee class=\"feature-desc\">Production-ready auth wizard with responsive design<\/pee> <\/div>\n<p>  <\/p>\n<div class=\"feature-card\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"><\/path> <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"><\/path> <\/svg> <\/div>\n<p> <\/p>\n<h3 class=\"feature-title\">Redirect URLs<\/h3>\n<p> <pee class=\"feature-desc\">Configure success & failure callbacks for seamless UX<\/pee> <\/div>\n<p>  <\/p>\n<div class=\"feature-card\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<h3 class=\"feature-title\">Webhooks<\/h3>\n<p> <pee class=\"feature-desc\">Instant notifications with account_id mapping<\/pee> <\/div>\n<p>  <\/p>\n<div class=\"feature-card\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle> <circle cx=\"12\" cy=\"12\" r=\"4\"><\/circle> <line x1=\"4.93\" y1=\"4.93\" x2=\"9.17\" y2=\"9.17\"><\/line> <line x1=\"14.83\" y1=\"14.83\" x2=\"19.07\" y2=\"19.07\"><\/line> <line x1=\"14.83\" y1=\"9.17\" x2=\"19.07\" y2=\"4.93\"><\/line> <line x1=\"4.93\" y1=\"19.07\" x2=\"9.17\" y2=\"14.83\"><\/line> <\/svg> <\/div>\n<p> <\/p>\n<h3 class=\"feature-title\">White-Label<\/h3>\n<p> <pee class=\"feature-desc\">Custom domain support (auth.yourapp.com)<\/pee> <\/div>\n<p>  <\/div>\n<p>   <\/p>\n<div class=\"section-cta\"> <a href=\"https:\/\/dashboard.unipile.com\/signup\/\" class=\"cta-primary\"> Build Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/a> <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" class=\"cta-secondary\" target=\"_blank\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path> <polyline points=\"14 2 14 8 20 8\"><\/polyline> <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line> <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line> <\/svg> Documentation <\/a> <\/div>\n<p>  <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.27.4″ _module_preset=”default” background_color=”#0F2736″ custom_padding=”0px|0px|0px|0px|true|true” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_row custom_padding_last_edited=”on|phone” _builder_version=”4.27.4″ _module_preset=”default” custom_margin=”0px||0px||false|false” custom_margin_tablet=”” custom_margin_phone=”0px||0px||false|false” custom_margin_last_edited=”on|phone” custom_padding_tablet=”” custom_padding_phone=”0px|0px||0px|false|true” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-auth-implementation { background: #0f2736; padding: 40px 0px 80px; font-family: 'Inter', sans-serif; } #unipile-auth-implementation .container { max-width: 1200px; margin: 0 auto; } \/* Section Header *\/ #unipile-auth-implementation .section-header { text-align: center; margin-bottom: 60px; } #unipile-auth-implementation .section-title { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #ffffff; line-height: 1.3; margin-bottom: 16px; } #unipile-auth-implementation .section-title span { color: #3BB98B; } #unipile-auth-implementation .section-subtitle { font-size: 16px; color:#ffffff; max-width: 600px; margin: 0 auto; line-height: 1.6; } \/* Steps Grid *\/ #unipile-auth-implementation .steps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } #unipile-auth-implementation .step-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; } #unipile-auth-implementation .step-header { padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; gap: 12px; } #unipile-auth-implementation .step-number { width: 28px; height: 28px; background: #3BB98B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #ffffff; } #unipile-auth-implementation .step-title { font-size: 0.9rem; font-weight: 600; color: #ffffff; } #unipile-auth-implementation .step-method { margin-left: auto; padding: 4px 10px; background: rgba(221, 223, 76, 0.15); border-radius: 6px; font-size: 0.7rem; font-weight: 600; color: #DDDF4C; font-family: 'Fira Code', monospace; } #unipile-auth-implementation .step-body { padding: 0; } #unipile-auth-implementation .code-block { background: #0a1c28; padding: 20px; overflow-x: auto; } #unipile-auth-implementation .code-block pre { margin: 0; font-family: 'Fira Code', monospace; font-size: 0.75rem; line-height: 1.7; color: #e2e8f0; } #unipile-auth-implementation .code-block .comment { color: #64748b; } #unipile-auth-implementation .code-block .keyword { color: #c792ea; } #unipile-auth-implementation .code-block .string { color: #c3e88d; } #unipile-auth-implementation .code-block .property { color: #82aaff; } #unipile-auth-implementation .code-block .value { color: #f78c6c; } #unipile-auth-implementation .code-block .function { color: #82aaff; } #unipile-auth-implementation .step-footer { padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; gap: 8px; } #unipile-auth-implementation .step-footer-icon { width: 18px; height: 18px; color: #3BB98B; } #unipile-auth-implementation .step-footer-text { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); } #unipile-auth-implementation .step-footer-text strong { color: #3BB98B; font-weight: 600; } \/* CTA *\/ #unipile-auth-implementation .section-cta { display: flex; justify-content: center; gap: 16px; margin-top: 48px; } #unipile-auth-implementation .cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #DDDF4C; color: #0f2736; padding: 14px 28px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: transform 0.3s ease; } #unipile-auth-implementation .cta-primary:hover { transform: translateY(-3px); } #unipile-auth-implementation .cta-primary svg { width: 16px; height: 16px; } #unipile-auth-implementation .cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #ffffff; padding: 14px 28px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.25); transition: all 0.3s ease; } #unipile-auth-implementation .cta-secondary:hover { border-color: #3BB98B; color: #3BB98B; } #unipile-auth-implementation .cta-secondary svg { width: 16px; height: 16px; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-auth-implementation .section-title { font-size: 32px; } #unipile-auth-implementation .steps-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { #unipile-auth-implementation { padding: 0px 16px 40px; } #unipile-auth-implementation .section-title { font-size: 28px; } #unipile-auth-implementation .code-block { padding: 16px; } #unipile-auth-implementation .code-block pre { font-size: 0.7rem; } #unipile-auth-implementation .step-header { flex-wrap: wrap; gap: 8px; } #unipile-auth-implementation .step-method { margin-left: 0; margin-top: 4px; } #unipile-auth-implementation .section-cta { flex-direction: column; align-items: stretch; } #unipile-auth-implementation .cta-primary, #unipile-auth-implementation .cta-secondary { justify-content: center; width: 100%; } } @media (max-width: 400px) { #unipile-auth-implementation .section-title { font-size: 26px; } } <\/style>\n<p><\/p>\n<section id=\"unipile-auth-implementation\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"section-header\"> <\/p>\n<h2 class=\"section-title\">Implementation in <span>4 Steps<\/span><\/h2>\n<p> <pee class=\"section-subtitle\">From generating an auth link to executing API calls on behalf of your users<\/pee> <\/div>\n<p>   <\/p>\n<div class=\"steps-grid\">   <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-header\"> <\/p>\n<div class=\"step-number\">1<\/div>\n<p> <span class=\"step-title\">Generate Hosted Auth Link<\/span> <span class=\"step-method notranslate\" translate=\"no\" data-no-translation>POST<\/span> <\/div>\n<p> <\/p>\n<div class=\"step-body\"> <\/p>\n<div class=\"code-block notranslate\" translate=\"no\" data-no-translation><\/p>\n<pre><span class=\"keyword\">const<\/span> response = <span class=\"keyword\">await<\/span> <span class=\"function\">fetch<\/span>( <span class=\"string\">\"https:\/\/api.unipile.com\/api\/v1\/hosted\/accounts\/link\"<\/span>, { <span class=\"property\">method<\/span>: <span class=\"string\">\"POST\"<\/span>, <span class=\"property\">headers<\/span>: { <span class=\"string\">\"X-API-KEY\"<\/span>: <span class=\"string\">\"YOUR_API_KEY\"<\/span>, <span class=\"string\">\"Content-Type\"<\/span>: <span class=\"string\">\"application\/json\"<\/span> }, <span class=\"property\">body<\/span>: <span class=\"function\">JSON.stringify<\/span>({ <span class=\"property\">type<\/span>: <span class=\"string\">\"create\"<\/span>, <span class=\"property\">providers<\/span>: [<span class=\"string\">\"LINKEDIN\"<\/span>, <span class=\"string\">\"GOOGLE\"<\/span>], <span class=\"property\">notify_url<\/span>: <span class=\"string\">\"https:\/\/yourapp.com\/callback\"<\/span>, <span class=\"property\">name<\/span>: <span class=\"string\">\"user_123\"<\/span> }) });<\/pre>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"step-footer\"> <svg class=\"step-footer-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle> <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"><\/line> <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"><\/line> <\/svg> <span class=\"step-footer-text\">Keep your <strong class=\"notranslate\" translate=\"no\">X-API-KEY<\/strong> server-side only<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-header\"> <\/p>\n<div class=\"step-number\">2<\/div>\n<p> <span class=\"step-title\">Receive Auth URL<\/span> <span class=\"step-method notranslate\" translate=\"no\" data-no-translation>RESPONSE<\/span> <\/div>\n<p> <\/p>\n<div class=\"step-body\"> <\/p>\n<div class=\"code-block notranslate\" translate=\"no\" data-no-translation><\/p>\n<pre><span class=\"comment\">\/\/ Response from Unipile API<\/span>{ <span class=\"property\">\"object\"<\/span>: <span class=\"string\">\"HostedAuthURL\"<\/span>, <span class=\"property\">\"url\"<\/span>: <span class=\"string\">\"https:\/\/account.unipile.com\/pqb...\"<\/span>}<span class=\"comment\">\/\/ Redirect user to this URL<\/span><span class=\"function\">window.location.href<\/span> = response.<span class=\"property\">url<\/span>;<\/pre>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"step-footer\"> <svg class=\"step-footer-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <span class=\"step-footer-text\">Link expires after defined <strong class=\"notranslate\" translate=\"no\">expiresOn<\/strong> date<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-header\"> <\/p>\n<div class=\"step-number\">3<\/div>\n<p> <span class=\"step-title\">Handle Webhook Callback<\/span> <span class=\"step-method notranslate\" translate=\"no\" data-no-translation>WEBHOOK<\/span> <\/div>\n<p> <\/p>\n<div class=\"step-body\"> <\/p>\n<div class=\"code-block notranslate\" translate=\"no\" data-no-translation><\/p>\n<pre><span class=\"comment\">\/\/ Payload received on your notify_url<\/span>{ <span class=\"property\">\"status\"<\/span>: <span class=\"string\">\"CREATION_SUCCESS\"<\/span>, <span class=\"property\">\"account_id\"<\/span>: <span class=\"string\">\"e54m8LR22bA7G5qsAc8w\"<\/span>, <span class=\"property\">\"name\"<\/span>: <span class=\"string\">\"user_123\"<\/span>}<span class=\"comment\">\/\/ Store the account_id mapping<\/span><span class=\"keyword\">await<\/span> <span class=\"function\">saveUserAccount<\/span>( payload.<span class=\"property\">name<\/span>, payload.<span class=\"property\">account_id<\/span>);<\/pre>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"step-footer\"> <svg class=\"step-footer-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path> <polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline> <\/svg> <span class=\"step-footer-text\">Map <strong class=\"notranslate\" translate=\"no\">account_id<\/strong> to your internal user<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"step-card\"> <\/p>\n<div class=\"step-header\"> <\/p>\n<div class=\"step-number\">4<\/div>\n<p> <span class=\"step-title\">Execute API Calls<\/span> <span class=\"step-method notranslate\" translate=\"no\" data-no-translation>GET \/ POST<\/span> <\/div>\n<p> <\/p>\n<div class=\"step-body\"> <\/p>\n<div class=\"code-block notranslate\" translate=\"no\" data-no-translation><\/p>\n<pre><span class=\"comment\">\/\/ Send message on behalf of user<\/span><span class=\"keyword\">const<\/span> message = <span class=\"keyword\">await<\/span> <span class=\"function\">fetch<\/span>( <span class=\"string\">\"https:\/\/api.unipile.com\/api\/v1\/chats\"<\/span>, { <span class=\"property\">method<\/span>: <span class=\"string\">\"POST\"<\/span>, <span class=\"property\">headers<\/span>: { <span class=\"string\">\"X-API-KEY\"<\/span>: <span class=\"string\">\"YOUR_API_KEY\"<\/span>, <span class=\"string\">\"Content-Type\"<\/span>: <span class=\"string\">\"application\/json\"<\/span> }, <span class=\"property\">body<\/span>: <span class=\"function\">JSON.stringify<\/span>({ <span class=\"property\">account_id<\/span>: <span class=\"string\">\"e54m8LR22bA7G5qsAc8w\"<\/span>, <span class=\"property\">text<\/span>: <span class=\"string\">\"Hello from your app!\"<\/span> }) });<\/pre>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"step-footer\"> <svg class=\"step-footer-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path> <\/svg> <span class=\"step-footer-text\">All actions executed as the <strong>authenticated user<\/strong><\/span> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p>   <\/p>\n<div class=\"section-cta\"> <a href=\"https:\/\/dashboard.unipile.com\/signup\/\" class=\"cta-primary\"> Build Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/a> <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" class=\"cta-secondary\" target=\"_blank\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path> <polyline points=\"14 2 14 8 20 8\"><\/polyline> <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line> <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line> <\/svg> Documentation <\/a> <\/div>\n<p>  <\/div>\n<p><\/section>\n<p>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”] <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-comparison-v2 { background: #ffffff; padding: 40px 20px 80px; font-family: 'Inter', sans-serif; } #unipile-comparison-v2 .container { max-width: 1A00px; margin: 0 auto; } \/* Section Header *\/ #unipile-comparison-v2 .section-header { text-align: center; margin-bottom: 60px; } #unipile-comparison-v2 .section-title { font-family: 'Poppins', sans-serif; font-size: 42px; font-weight: 700; color: #0f2736; line-height: 1.2; margin-bottom: 16px; } #unipile-comparison-v2 .section-title span { color: #3BB98B; } #unipile-comparison-v2 .section-subtitle { font-size: 18px; color: #383838; max-width: 650px; margin: 0 auto; line-height: 1.7; } \/* Comparison Layout *\/ #unipile-comparison-v2 .comparison-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 60px; } \/* Comparison Cards *\/ #unipile-comparison-v2 .comparison-card { border-radius: 20px; padding: 36px; position: relative; overflow: hidden; } #unipile-comparison-v2 .comparison-card.without { background: #f8fafc; border: 1px solid #e5e7eb; } #unipile-comparison-v2 .comparison-card.with { background: linear-gradient(145deg, rgba(59, 185, 139, 0.08), rgba(221, 223, 76, 0.04)); border: 2px solid #3BB98B; } #unipile-comparison-v2 .card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } #unipile-comparison-v2 .comparison-card.with .card-header { border-bottom-color: rgba(59, 185, 139, 0.2); } #unipile-comparison-v2 .card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } #unipile-comparison-v2 .comparison-card.without .card-icon { background: rgba(239, 68, 68, 0.1); } #unipile-comparison-v2 .comparison-card.without .card-icon svg { width: 24px; height: 24px; color: #ef4444; } #unipile-comparison-v2 .comparison-card.with .card-icon { background: rgba(59, 185, 139, 0.15); } #unipile-comparison-v2 .comparison-card.with .card-icon svg { width: 24px; height: 24px; color: #3BB98B; } #unipile-comparison-v2 .card-title-group { flex: 1; } #unipile-comparison-v2 .card-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; } #unipile-comparison-v2 .comparison-card.without .card-label { color: #ef4444; } #unipile-comparison-v2 .comparison-card.with .card-label { color: #3BB98B; } #unipile-comparison-v2 .card-title { font-family: 'Poppins', sans-serif; font-size: 1.3rem; font-weight: 700; color: #0f2736; } \/* Items List *\/ #unipile-comparison-v2 .items-list { display: flex; flex-direction: column; gap: 16px; } #unipile-comparison-v2 .item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 12px; } #unipile-comparison-v2 .comparison-card.without .item { background: #ffffff; border: 1px solid #e5e7eb; } #unipile-comparison-v2 .comparison-card.with .item { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(59, 185, 139, 0.15); } #unipile-comparison-v2 .item-icon { width: 28px; height: 28px; min-width: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-top: 2px; } #unipile-comparison-v2 .comparison-card.without .item-icon { background: rgba(239, 68, 68, 0.1); } #unipile-comparison-v2 .comparison-card.without .item-icon svg { width: 14px; height: 14px; color: #ef4444; } #unipile-comparison-v2 .comparison-card.with .item-icon { background: rgba(59, 185, 139, 0.15); } #unipile-comparison-v2 .comparison-card.with .item-icon svg { width: 14px; height: 14px; color: #3BB98B; } #unipile-comparison-v2 .item-content { flex: 1; } #unipile-comparison-v2 .item-title { font-size: 0.95rem; font-weight: 600; color: #0f2736; margin-bottom: 4px; } #unipile-comparison-v2 .item-desc { font-size: 0.85rem; color: #64748b; line-height: 1.5; } \/* Summary Stats *\/ #unipile-comparison-v2 .summary-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 32px; background: #0f2736; border-radius: 16px; margin-bottom: 50px; } #unipile-comparison-v2 .stat-item { text-align: center; } #unipile-comparison-v2 .stat-value { font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 700; color: #3BB98B; margin-bottom: 4px; } #unipile-comparison-v2 .stat-label { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); } \/* CTA *\/ #unipile-comparison-v2 .section-cta { display: flex; justify-content: center; gap: 16px; } #unipile-comparison-v2 .cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #DDDF4C; color: #0f2736; padding: 14px 28px; border-radius: 10px; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: transform 0.3s ease; } #unipile-comparison-v2 .cta-primary:hover { transform: translateY(-3px); } #unipile-comparison-v2 .cta-primary svg { width: 18px; height: 18px; } #unipile-comparison-v2 .cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #0f2736; padding: 14px 28px; border-radius: 10px; font-size: 0.95rem; font-weight: 600; text-decoration: none; border: 1px solid #e5e7eb; transition: all 0.3s ease; } #unipile-comparison-v2 .cta-secondary:hover { border-color: #3BB98B; color: #3BB98B; } #unipile-comparison-v2 .cta-secondary svg { width: 18px; height: 18px; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-comparison-v2 .section-title { font-size: 34px; } #unipile-comparison-v2 .comparison-layout { grid-template-columns: 1fr; gap: 24px; } #unipile-comparison-v2 .summary-row { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 600px) { #unipile-comparison-v2 { padding: 60px 6px; } #unipile-comparison-v2 .section-title { font-size: 28px; } #unipile-comparison-v2 .section-subtitle { font-size: 16px; } #unipile-comparison-v2 .comparison-card { padding: 24px; } #unipile-comparison-v2 .summary-row { padding: 24px; } #unipile-comparison-v2 .stat-value { font-size: 1.5rem; } #unipile-comparison-v2 .section-cta { flex-direction: column; align-items: stretch; } #unipile-comparison-v2 .cta-primary, #unipile-comparison-v2 .cta-secondary { justify-content: center; width: 100%; } } @media (max-width: 400px) { #unipile-comparison-v2 .section-title { font-size: 26px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-comparison-v2\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"section-header\"> <\/p>\n<h2 class=\"section-title\">Build It Yourself vs <span>Unipile Hosted Auth<\/span><\/h2>\n<p> <pee class=\"section-subtitle\"> Connecting users to multiple providers requires handling OAuth, QR codes, sessions, 2FA, and more. See what you skip with Unipile. <\/pee> <\/div>\n<p>   <\/p>\n<div class=\"comparison-layout\">   <\/p>\n<div class=\"comparison-card without\"> <\/p>\n<div class=\"card-header\"> <\/p>\n<div class=\"card-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle> <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"><\/line> <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"><\/line> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"card-title-group\"> <\/p>\n<div class=\"card-label\">Without Unipile<\/div>\n<p> <\/p>\n<div class=\"card-title\">Build & Maintain Yourself<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"items-list\"> <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Multiple OAuth Implementations<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Build separate OAuth flows for Google, Microsoft, and each provider with different scopes and refresh logic<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">QR Code Authentication<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Implement QR code generation and scanning for WhatsApp Web-style connections<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Session Management<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Handle session-based auth for LinkedIn, Instagram with cookie management and rotation<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Security Challenges<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Manage 2FA verification, CAPTCHA solving, and device trust across providers<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Token & Session Refresh<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Build automatic refresh logic, handle expirations, and manage reconnection flows<\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"comparison-card with\"> <\/p>\n<div class=\"card-header\"> <\/p>\n<div class=\"card-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path> <polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"card-title-group\"> <\/p>\n<div class=\"card-label\">With Unipile Hosted Auth<\/div>\n<p> <\/p>\n<div class=\"card-title\">One Link, Everything Handled<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"items-list\"> <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Single API Call<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Generate one redirect URL that works for all providers\u2014OAuth, QR, or session-based<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Pre-built Auth UI<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Production-ready wizard handles provider selection, credentials, QR display automatically<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Security Managed<\/div>\n<p> <\/p>\n<div class=\"item-desc\">2FA, CAPTCHA, device verification\u2014all handled transparently by Unipile<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Automatic Refresh<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Token and session refresh happens server-side\u2014zero maintenance on your end<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"item\"> <\/p>\n<div class=\"item-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg> <\/div>\n<p> <\/p>\n<div class=\"item-content\"> <\/p>\n<div class=\"item-title\">Webhook Callback<\/div>\n<p> <\/p>\n<div class=\"item-desc\">Receive account_id instantly on your notify_url when connection succeeds<\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p>   <\/p>\n<div class=\"summary-row\"> <\/p>\n<div class=\"stat-item\"> <\/p>\n<div class=\"stat-value\">1<\/div>\n<p> <\/p>\n<div class=\"stat-label\">API endpoint to integrate<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"stat-item\"> <\/p>\n<div class=\"stat-value\">8+<\/div>\n<p> <\/p>\n<div class=\"stat-label\">Providers supported<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"stat-item\"> <\/p>\n<div class=\"stat-value\">0<\/div>\n<p> <\/p>\n<div class=\"stat-label\">Auth code to maintain<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"stat-item\"> <\/p>\n<div class=\"stat-value\">2 days<\/div>\n<p> <\/p>\n<div class=\"stat-label\">Average integration time<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"section-cta\"> <a href=\"https:\/\/dashboard.unipile.com\/signup\/\" class=\"cta-primary\"> Build Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/a> <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" class=\"cta-secondary\" target=\"_blank\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path> <polyline points=\"14 2 14 8 20 8\"><\/polyline> <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line> <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line> <\/svg> Documentation <\/a> <\/div>\n<p>  <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Auth on Behalf – Section 6: Security Architecture<\/title> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap\" rel=\"stylesheet\"> <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-auth-security { background: #0f2736; padding: 40px 20px 80px; font-family: 'Inter', sans-serif; } #unipile-auth-security .container { max-width: 1100px; margin: 0 auto; } \/* Section Header *\/ #unipile-auth-security .section-header { text-align: center; margin-bottom: 50px; } #unipile-auth-security .section-title { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #ffffff; line-height: 1.3; margin-bottom: 16px; } #unipile-auth-security .section-title span { color: #3BB98B; } #unipile-auth-security .section-subtitle { font-size: 16px; color: rgba(255, 255, 255, 0.7); max-width: 450px; margin: 0 auto; line-height: 1.6; } \/* Pillars Grid - 3 colonnes *\/ #unipile-auth-security .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } #unipile-auth-security .pillar-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; } #unipile-auth-security .pillar-icon { width: 56px; height: 56px; background: rgba(59, 185, 139, 0.12); border-radius: 14px; display: flex; align-items: center; justify-content: center; } #unipile-auth-security .pillar-icon svg { width: 28px; height: 28px; color: #3BB98B; } #unipile-auth-security .pillar-content { display: flex; flex-direction: column; gap: 10px; } #unipile-auth-security .pillar-title { font-size: 1rem; letter-spacing: 0.1px; font-weight: 600; color: #ffffff; } #unipile-auth-security .pillar-desc { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); line-height: 1.6; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-auth-security .section-title { font-size: 32px; } #unipile-auth-security .pillars-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } #unipile-auth-security .pillar-card { flex-direction: row; text-align: left; align-items: flex-start; gap: 20px; padding: 28px; } #unipile-auth-security .pillar-icon { min-width: 48px; width: 48px; height: 48px; } #unipile-auth-security .pillar-icon svg { width: 24px; height: 24px; } } @media (max-width: 600px) { #unipile-auth-security { padding: 0px 16px 40px; } #unipile-auth-security .section-title { font-size: 28px; } #unipile-auth-security .pillar-card { padding: 24px 20px; } } @media (max-width: 400px) { #unipile-auth-security .section-title { font-size: 26px; } #unipile-auth-security .pillar-card { flex-direction: column; align-items: center; text-align: center; gap: 16px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-auth-security\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"section-header\"> <\/p>\n<h2 class=\"section-title\">Security <span>Architecture<\/span><\/h2>\n<p> <pee class=\"section-subtitle\">Enterprise-grade protection by design<\/pee> <\/div>\n<p>   <\/p>\n<div class=\"pillars-grid\">   <\/p>\n<div class=\"pillar-card\"> <\/p>\n<div class=\"pillar-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect> <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"><\/line> <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"><\/line> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"pillar-content\"> <\/p>\n<h3 class=\"pillar-title\">Session Isolation<\/h3>\n<p> <pee class=\"pillar-desc\">Each account connection is isolated and sandboxed. No cross-contamination between user sessions.<\/pee> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"pillar-card\"> <\/p>\n<div class=\"pillar-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle> <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"><\/path> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"pillar-content\"> <\/p>\n<h3 class=\"pillar-title\">Token Abstraction<\/h3>\n<p> <pee class=\"pillar-desc\">Authorization tokens are managed server-side by Unipile. You only interact with a simple account_id.<\/pee> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"pillar-card\"> <\/p>\n<div class=\"pillar-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"pillar-content\"> <\/p>\n<h3 class=\"pillar-title\">Webhook Verification<\/h3>\n<p> <pee class=\"pillar-desc\">Secure callbacks with optional authentication parameters to verify request authenticity.<\/pee> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p>  <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Automatic Reconnection Handling<\/title> <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"> <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fira+Code:wght@400;600&family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap\" rel=\"stylesheet\"> <\/p>\n<style> \/* ===== FIX RAYURES ===== *\/ #unipile-auth-reconnection { position: relative; z-index: 1; isolation: isolate; } #unipile-auth-reconnection::before, #unipile-auth-reconnection::after { display: none !important; background-image: none !important; content: none !important; } #unipile-auth-reconnection *::before, #unipile-auth-reconnection *::after { background-image: none !important; } \/* ===== FIN FIX ===== *\/ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0f2736; } #unipile-auth-reconnection { background: #0f2736; padding: 0px 20px 80px; font-family: 'Inter', sans-serif; } #unipile-auth-reconnection .container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } \/* Text Content *\/ #unipile-auth-reconnection .content { display: flex; flex-direction: column; gap: 24px; } #unipile-auth-reconnection .section-title { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #ffffff; line-height: 1.3; } #unipile-auth-reconnection .section-title span { color: #3BB98B; } #unipile-auth-reconnection .section-description { font-size: 16px; color: #ffffff; line-height: 1.7; } #unipile-auth-reconnection .features-list { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; } #unipile-auth-reconnection .feature-item { display: flex; align-items: flex-start; gap: 14px; } #unipile-auth-reconnection .feature-icon { width: 24px; height: 24px; min-width: 24px; background: rgba(59, 185, 139, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; } #unipile-auth-reconnection .feature-icon svg { width: 14px; height: 14px; color: #3BB98B; } #unipile-auth-reconnection .feature-text { font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); line-height: 1.5; } #unipile-auth-reconnection .feature-text code { background: rgba(221, 223, 76, 0.15); color: #DDDF4C; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-family: 'Fira Code', monospace; } \/* Visual Mockup *\/ #unipile-auth-reconnection .visual { position: relative; } #unipile-auth-reconnection .flow-diagram { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 28px; } #unipile-auth-reconnection .flow-steps { display: flex; flex-direction: column; gap: 0; } #unipile-auth-reconnection .flow-step { display: flex; align-items: flex-start; gap: 16px; position: relative; padding-bottom: 28px; } #unipile-auth-reconnection .flow-step:last-child { padding-bottom: 0; } \/* Ligne de connexion verticale *\/ #unipile-auth-reconnection .flow-step .step-line { position: absolute; left: 20px; top: 40px; bottom: 0; width: 2px; background: linear-gradient(180deg, #3BB98B, rgba(59, 185, 139, 0.2)); transform: translateX(-50%); } #unipile-auth-reconnection .flow-step:last-child .step-line { display: none; } #unipile-auth-reconnection .step-icon { width: 40px; height: 40px; min-width: 40px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } #unipile-auth-reconnection .step-icon.webhook { background: rgba(234, 67, 53, 0.15); } #unipile-auth-reconnection .step-icon.webhook svg { color: #EA4335; } #unipile-auth-reconnection .step-icon.notify { background: rgba(251, 188, 4, 0.15); } #unipile-auth-reconnection .step-icon.notify svg { color: #FBBC04; } #unipile-auth-reconnection .step-icon.reconnect { background: rgba(59, 185, 139, 0.15); } #unipile-auth-reconnection .step-icon.reconnect svg { color: #3BB98B; } #unipile-auth-reconnection .step-icon.success { background: rgba(59, 185, 139, 0.15); } #unipile-auth-reconnection .step-icon.success svg { color: #3BB98B; } #unipile-auth-reconnection .step-icon svg { width: 20px; height: 20px; } #unipile-auth-reconnection .step-content { flex: 1; padding-top: 2px; } #unipile-auth-reconnection .step-title { font-size: 0.9rem; font-weight: 600; color: #ffffff; margin-bottom: 4px; } #unipile-auth-reconnection .step-desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); line-height: 1.5; } #unipile-auth-reconnection .step-tag { display: inline-flex; align-items: center; gap: 4px; background: rgba(221, 223, 76, 0.12); color: #DDDF4C; padding: 4px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; font-family: 'Fira Code', monospace; margin-top: 8px; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-auth-reconnection .container { grid-template-columns: 1fr; gap: 50px; } #unipile-auth-reconnection .section-title { font-size: 32px; } #unipile-auth-reconnection .visual { order: 2; } #unipile-auth-reconnection .content { order: 1; } } @media (max-width: 600px) { #unipile-auth-reconnection { padding: 0px 16px 40px; } #unipile-auth-reconnection .section-title { font-size: 28px; } #unipile-auth-reconnection .flow-diagram { padding: 20px; } } @media (max-width: 400px) { #unipile-auth-reconnection .section-title { font-size: 26px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-auth-reconnection\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"content\"> <\/p>\n<h2 class=\"section-title\">Automatic <span>Reconnection<\/span> Handling<\/h2>\n<p>  <pee class=\"section-description\"> Handle disconnections gracefully with automated workflows. When a user’s session expires or credentials become invalid, Unipile notifies you instantly so you can trigger a seamless reconnection flow. <\/pee>  <\/p>\n<div class=\"features-list\"> <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <span class=\"feature-text\">Webhook monitoring for <code>CREDENTIALS<\/code> status<\/span> <\/div>\n<p>  <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <span class=\"feature-text\">Automated user notification workflow<\/span> <\/div>\n<p>  <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <span class=\"feature-text\">Seamless reconnection experience<\/span> <\/div>\n<p>  <\/p>\n<div class=\"feature-item\"> <\/p>\n<div class=\"feature-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"20 6 9 17 4 12\"><\/polyline> <\/svg> <\/div>\n<p> <span class=\"feature-text\">Same flow, <code>type: \"reconnect\"<\/code><\/span> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"visual\"> <\/p>\n<div class=\"flow-diagram\"> <\/p>\n<div class=\"flow-steps\">   <\/p>\n<div class=\"flow-step\"> <\/p>\n<div class=\"step-icon webhook\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"><\/path> <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"><\/line> <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Webhook Alert Received<\/div>\n<p> <\/p>\n<div class=\"step-desc\">Account status changes to CREDENTIALS<\/div>\n<p> <\/p>\n<div class=\"step-tag\">status: “CREDENTIALS”<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"step-line\"><\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"flow-step\"> <\/p>\n<div class=\"step-icon notify\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path> <polyline points=\"22,6 12,13 2,6\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Notify User<\/div>\n<p> <\/p>\n<div class=\"step-desc\">Send email or in-app notification to reconnect<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"step-line\"><\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"flow-step\"> <\/p>\n<div class=\"step-icon reconnect\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"23 4 23 10 17 10\"><\/polyline> <polyline points=\"1 20 1 14 7 14\"><\/polyline> <path d=\"M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15\"><\/path> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Generate Reconnect Link<\/div>\n<p> <\/p>\n<div class=\"step-desc\">Request hosted auth with type: reconnect<\/div>\n<p> <\/p>\n<div class=\"step-tag\">type: “reconnect”<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"step-line\"><\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"flow-step\"> <\/p>\n<div class=\"step-icon success\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path> <polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"step-content\"> <\/p>\n<div class=\"step-title\">Account Restored<\/div>\n<p> <\/p>\n<div class=\"step-desc\">User re-authenticates, session is restored<\/div>\n<p> <\/p>\n<div class=\"step-tag\">status: “RECONNECTED”<\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Auth on Behalf – Section 8: Supported Providers<\/title> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap\" rel=\"stylesheet\"> <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-auth-providers { background: #f4f5f7; padding: 40px 20px 80px; font-family: 'Inter', sans-serif; } #unipile-auth-providers .container { max-width: 1000px; margin: 0 auto; } \/* Section Header *\/ #unipile-auth-providers .section-header { text-align: center; margin-bottom: 50px; } #unipile-auth-providers .section-title { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #0f2736; line-height: 1.3; margin-bottom: 16px; } #unipile-auth-providers .section-title span { color: #3BB98B; } #unipile-auth-providers .section-subtitle { font-size: 16px; color: #383838; max-width: 500px; margin: 0 auto; line-height: 1.6; } \/* Providers Grid *\/ #unipile-auth-providers .providers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 50px; } #unipile-auth-providers .provider-card { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px 20px; display: flex; align-items: center; gap: 16px; transition: all 0.2s ease; } #unipile-auth-providers .provider-card:hover { border-color: #3BB98B; } #unipile-auth-providers .provider-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 8px; } #unipile-auth-providers .provider-icon.linkedin { background: rgba(10, 102, 194, 0.1); } #unipile-auth-providers .provider-icon.whatsapp { background: rgba(37, 211, 102, 0.1); } #unipile-auth-providers .provider-icon.instagram { background: rgba(225, 48, 108, 0.1); } #unipile-auth-providers .provider-icon.telegram { background: rgba(0, 136, 204, 0.1); } #unipile-auth-providers .provider-icon.gmail { background: rgba(234, 67, 53, 0.1); } #unipile-auth-providers .provider-icon.outlook { background: rgba(0, 120, 212, 0.1); } #unipile-auth-providers .provider-icon.imap { background: rgba(15, 39, 54, 0.08); } #unipile-auth-providers .provider-icon.gcalendar { background: rgba(66, 133, 244, 0.1); } #unipile-auth-providers .provider-icon.ocalendar { background: rgba(0, 120, 212, 0.1); } #unipile-auth-providers .provider-icon img { width: 28px; height: 28px; object-fit: contain; } #unipile-auth-providers .provider-info { display: flex; flex-direction: column; gap: 2px; } #unipile-auth-providers .provider-name { font-size: 0.95rem; font-weight: 600; color: #0f2736; } #unipile-auth-providers .provider-type { font-size: 0.75rem; color: #64748b; } \/* CTA *\/ #unipile-auth-providers .section-cta { display: flex; justify-content: center; gap: 16px; } #unipile-auth-providers .cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #DDDF4C; color: #0f2736; padding: 14px 28px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: transform 0.3s ease; } #unipile-auth-providers .cta-primary:hover { transform: translateY(-3px); } #unipile-auth-providers .cta-primary svg { width: 16px; height: 16px; } #unipile-auth-providers .cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #0f2736; padding: 14px 28px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; border: 1px solid #e5e7eb; transition: all 0.3s ease; } #unipile-auth-providers .cta-secondary:hover { border-color: #3BB98B; color: #3BB98B; } #unipile-auth-providers .cta-secondary svg { width: 16px; height: 16px; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-auth-providers .section-title { font-size: 32px; } #unipile-auth-providers .providers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { #unipile-auth-providers { padding: 0px 16px 40px; } #unipile-auth-providers .section-title { font-size: 28px; } #unipile-auth-providers .providers-grid { grid-template-columns: 1fr; } #unipile-auth-providers .section-cta { flex-direction: column; align-items: stretch; } #unipile-auth-providers .cta-primary, #unipile-auth-providers .cta-secondary { justify-content: center; width: 100%; } } @media (max-width: 400px) { #unipile-auth-providers .section-title { font-size: 26px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-auth-providers\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"section-header\"> <\/p>\n<h2 class=\"section-title\">Supported <span>Providers<\/span><\/h2>\n<p> <pee class=\"section-subtitle\">Full Auth on Behalf support across all integrations<\/pee> <\/div>\n<p>   <\/p>\n<div class=\"providers-grid\">   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon linkedin\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/linkedin-5.svg\" alt=\"LinkedIn\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">LinkedIn<\/span> <span class=\"provider-type\">Messaging<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon whatsapp\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/09\/whatsapp-1.svg\" alt=\"WhatsApp\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">WhatsApp<\/span> <span class=\"provider-type\">Messaging<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon instagram\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/08\/ig-logo.png\" alt=\"Instagram\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">Instagram<\/span> <span class=\"provider-type\">Messaging<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon telegram\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/TELEGRAM-2.svg\" alt=\"Telegram\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">Telegram<\/span> <span class=\"provider-type\">Messaging<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon gmail\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/gmail-3.svg\" alt=\"Gmail\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">Gmail<\/span> <span class=\"provider-type\">Google OAuth<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon outlook\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/outlook-2.svg\" alt=\"Outlook\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">Outlook<\/span> <span class=\"provider-type\">Microsoft OAuth<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon imap\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/imap-1.svg\" alt=\"IMAP\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">IMAP<\/span> <span class=\"provider-type\">Email Protocol<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon gcalendar\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/Google_Calendar_icon_2020-3-2.svg\" alt=\"Google Calendar\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">Google Calendar<\/span> <span class=\"provider-type\">Calendar<\/span> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"provider-card\"> <\/p>\n<div class=\"provider-icon ocalendar\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/outloook-calendar-3.svg\" alt=\"Outlook Calendar\"> <\/div>\n<p> <\/p>\n<div class=\"provider-info\"> <span class=\"provider-name\">Outlook Calendar<\/span> <span class=\"provider-type\">Calendar<\/span> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p>   <\/p>\n<div class=\"section-cta\"> <a href=\"https:\/\/dashboard.unipile.com\/signup\/\" class=\"cta-primary\"> Build Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/a> <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" class=\"cta-secondary\" target=\"_blank\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path> <polyline points=\"14 2 14 8 20 8\"><\/polyline> <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line> <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line> <\/svg> Documentation <\/a> <\/div>\n<p>  <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Auth on Behalf – Section 9: CTA Final<\/title> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap\" rel=\"stylesheet\"> <\/p>\n<style> \/* ===== FIX RAYURES ===== *\/ #unipile-auth-cta-final { position: relative; z-index: 1; isolation: isolate; } #unipile-auth-cta-final::before, #unipile-auth-cta-final::after { display: none !important; background-image: none !important; content: none !important; } #unipile-auth-cta-final *::before, #unipile-auth-cta-final *::after { background-image: none !important; } \/* ===== FIN FIX ===== *\/ * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-auth-cta-final { background: #0f2736; padding: 40px 20px 80px; font-family: 'Inter', sans-serif; } #unipile-auth-cta-final .container { max-width: 1200px; margin: 0 auto; } \/* Layout Grid *\/ #unipile-auth-cta-final .cta-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; } \/* Content Side *\/ #unipile-auth-cta-final .cta-content { display: flex; flex-direction: column; gap: 24px; } #unipile-auth-cta-final .section-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(59, 185, 139, 0.12); color: #3BB98B; padding: 8px 16px; border-radius: 24px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; width: fit-content; } #unipile-auth-cta-final .section-title { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #ffffff; line-height: 1.25; } #unipile-auth-cta-final .section-title span { color: #3BB98B; } #unipile-auth-cta-final .section-desc { font-size: 17px; color: #ffffff; line-height: 1.7; } \/* Action List *\/ #unipile-auth-cta-final .action-list { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; } #unipile-auth-cta-final .action-item { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; transition: all 0.3s ease; text-decoration: none; cursor: pointer; } #unipile-auth-cta-final .action-item:hover { background: rgba(59, 185, 139, 0.08); border-color: rgba(59, 185, 139, 0.3); transform: translateX(4px); } #unipile-auth-cta-final .action-icon { width: 36px; height: 36px; background: rgba(59, 185, 139, 0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #unipile-auth-cta-final .action-icon svg { width: 18px; height: 18px; color: #3BB98B; } #unipile-auth-cta-final .action-content { flex: 1; } #unipile-auth-cta-final .action-title { font-size: 15px; font-weight: 600; color: #ffffff; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } #unipile-auth-cta-final .action-title svg { width: 14px; height: 14px; color: #DDDF4C; transition: transform 0.2s ease; } #unipile-auth-cta-final .action-item:hover .action-title svg { transform: translateX(3px); } #unipile-auth-cta-final .action-desc { font-size: 13px; color: rgba(255, 255, 255, 0.6); line-height: 1.4; } \/* CTA Buttons *\/ #unipile-auth-cta-final .cta-buttons { display: flex; gap: 16px; margin-top: 16px; } #unipile-auth-cta-final .cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #DDDF4C; color: #0f2736; padding: 14px 28px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: transform 0.3s ease; } #unipile-auth-cta-final .cta-primary:hover { transform: translateY(-3px); } #unipile-auth-cta-final .cta-primary svg { width: 16px; height: 16px; } #unipile-auth-cta-final .cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #ffffff; padding: 14px 28px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.25); transition: all 0.3s ease; } #unipile-auth-cta-final .cta-secondary:hover { border-color: #3BB98B; color: #3BB98B; } #unipile-auth-cta-final .cta-secondary svg { width: 16px; height: 16px; } \/* Dashboard Mockup *\/ #unipile-auth-cta-final .dashboard-visual { position: relative; } #unipile-auth-cta-final .dashboard-frame { background: linear-gradient(145deg, rgba(59, 185, 139, 0.25), rgba(221, 223, 76, 0.15), rgba(59, 185, 139, 0.1)); border-radius: 20px; padding: 3px; } #unipile-auth-cta-final .dashboard-inner { background: #ffffff; border-radius: 18px; overflow: hidden; } \/* Dashboard Header *\/ #unipile-auth-cta-final .dash-header { background: #0f2736; padding: 10px 16px; display: flex; align-items: center; gap: 10px; } #unipile-auth-cta-final .dash-dots { display: flex; gap: 5px; } #unipile-auth-cta-final .dash-dots span { width: 10px; height: 10px; border-radius: 50%; } #unipile-auth-cta-final .dash-dots span:nth-child(1) { background: #ff5f57; } #unipile-auth-cta-final .dash-dots span:nth-child(2) { background: #ffbd2e; } #unipile-auth-cta-final .dash-dots span:nth-child(3) { background: #28ca42; } #unipile-auth-cta-final .dash-logo { display: flex; align-items: center; gap: 6px; margin-left: 12px; } #unipile-auth-cta-final .dash-logo img { height: 18px; width: auto; } \/* Dashboard Content *\/ #unipile-auth-cta-final .dash-content { display: flex; min-height: 260px; } #unipile-auth-cta-final .dash-sidebar { width: 150px; background: #ffffff; border-right: 1px solid #e5e7eb; padding: 16px 0; } #unipile-auth-cta-final .dash-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 0.75rem; color: #64748b; cursor: default; transition: all 0.2s ease; } #unipile-auth-cta-final .dash-nav-item:hover { background: #f8f9fa; color: #0f2736; } #unipile-auth-cta-final .dash-nav-item.active { background: rgba(59, 185, 139, 0.08); color: #0f2736; border-left: 3px solid #3BB98B; font-weight: 500; } #unipile-auth-cta-final .dash-nav-item svg { width: 14px; height: 14px; } #unipile-auth-cta-final .dash-main { flex: 1; padding: 20px; background: #fafbfc; } #unipile-auth-cta-final .dash-main-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } #unipile-auth-cta-final .dash-main-title { font-size: 1rem; font-weight: 700; color: #0f2736; } #unipile-auth-cta-final .dash-add-btn { display: flex; align-items: center; gap: 6px; background: #0f2736; color: white; padding: 8px 14px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; border: none; } #unipile-auth-cta-final .dash-add-btn svg { width: 12px; height: 12px; } \/* Status Pills *\/ #unipile-auth-cta-final .dash-status-row { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; } #unipile-auth-cta-final .dash-status-pill { display: flex; align-items: center; gap: 5px; font-size: 0.65rem; color: #64748b; } #unipile-auth-cta-final .dash-status-dot { width: 7px; height: 7px; border-radius: 50%; } #unipile-auth-cta-final .dash-status-dot.green { background: #34A853; } #unipile-auth-cta-final .dash-status-dot.yellow { background: #FBBC04; } #unipile-auth-cta-final .dash-status-pill .count { font-weight: 600; } #unipile-auth-cta-final .dash-status-pill.green .count { color: #34A853; } \/* Table *\/ #unipile-auth-cta-final .dash-table { background: #ffffff; border-radius: 10px; border: 1px solid #e5e7eb; overflow: hidden; } #unipile-auth-cta-final .dash-table-header { display: grid; grid-template-columns: 2fr 1.5fr 1fr; padding: 10px 14px; background: #f8f9fa; border-bottom: 1px solid #e5e7eb; font-size: 0.6rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; } #unipile-auth-cta-final .dash-table-row { display: grid; grid-template-columns: 2fr 1.5fr 1fr; padding: 12px 14px; align-items: center; border-bottom: 1px solid #f0f0f0; } #unipile-auth-cta-final .dash-table-row:last-child { border-bottom: none; } #unipile-auth-cta-final .dash-account { display: flex; align-items: center; gap: 10px; } #unipile-auth-cta-final .dash-account-icon { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid #e5e7eb; } #unipile-auth-cta-final .dash-account-icon img { width: 16px; height: 16px; object-fit: contain; } #unipile-auth-cta-final .dash-account-name { font-weight: 600; font-size: 0.75rem; color: #0f2736; } #unipile-auth-cta-final .dash-account-id { font-family: 'Monaco', 'Menlo', monospace; font-size: 0.65rem; color: #3BB98B; } #unipile-auth-cta-final .dash-status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.65rem; color: #34A853; font-weight: 500; } \/* Responsive *\/ @media (max-width: 968px) { #unipile-auth-cta-final .cta-layout { grid-template-columns: 1fr; gap: 50px; } #unipile-auth-cta-final .section-title { font-size: 32px; } #unipile-auth-cta-final .dash-sidebar { display: none; } } @media (max-width: 600px) { #unipile-auth-cta-final { padding: 0px 16px 40px; } #unipile-auth-cta-final .section-title { font-size: 28px; } #unipile-auth-cta-final .cta-buttons { flex-direction: column; } #unipile-auth-cta-final .cta-primary, #unipile-auth-cta-final .cta-secondary { justify-content: center; width: 100%; } #unipile-auth-cta-final .dash-table-header, #unipile-auth-cta-final .dash-table-row { grid-template-columns: 2fr 1fr; } #unipile-auth-cta-final .dash-table-header > *:nth-child(2), #unipile-auth-cta-final .dash-table-row > *:nth-child(2) { display: none; } #unipile-auth-cta-final .action-item { padding: 14px 16px; } } @media (max-width: 400px) { #unipile-auth-cta-final .section-title { font-size: 26px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-auth-cta-final\"> <\/p>\n<div class=\"container\"> <\/p>\n<div class=\"cta-layout\">   <\/p>\n<div class=\"cta-content\"> <\/p>\n<div class=\"section-badge\">Get Started<\/div>\n<p>  <\/p>\n<h2 class=\"section-title\">Start Building with <span>Auth on Behalf<\/span><\/h2>\n<p>  <pee class=\"section-desc\">Integrate in 2 days with comprehensive documentation and dedicated support. Connect your users’ accounts securely.<\/pee>  <\/p>\n<div class=\"action-list\"> <a href=\"https:\/\/dashboard.unipile.com\/signup\/\" target=\"_blank\" class=\"action-item\"> <\/p>\n<div class=\"action-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/> <circle cx=\"9\" cy=\"7\" r=\"4\"\/> <line x1=\"19\" y1=\"8\" x2=\"19\" y2=\"14\"\/> <line x1=\"16\" y1=\"11\" x2=\"22\" y2=\"11\"\/> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"action-content\"> <\/p>\n<div class=\"action-title\"> Create your Unipile account <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg> <\/div>\n<p> <\/p>\n<div class=\"action-desc\">Sign up for free and get instant access to the dashboard<\/div>\n<p> <\/div>\n<p> <\/a>  <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" target=\"_blank\" class=\"action-item\"> <\/p>\n<div class=\"action-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/> <polyline points=\"14 2 14 8 20 8\"\/> <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/> <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/> <\/svg> <\/div>\n<p> <\/p>\n<div class=\"action-content\"> <\/p>\n<div class=\"action-title\"> Access Hosted Auth documentation <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg> <\/div>\n<p> <\/p>\n<div class=\"action-desc\">Step-by-step guide to implement Auth on Behalf<\/div>\n<p> <\/div>\n<p> <\/a> <\/div>\n<p>   <\/p>\n<div class=\"cta-buttons\"> <a href=\"https:\/\/dashboard.unipile.com\/signup\/\" class=\"cta-primary\"> Build Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/a> <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" class=\"cta-secondary\" target=\"_blank\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path> <polyline points=\"14 2 14 8 20 8\"><\/polyline> <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line> <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line> <\/svg> Documentation <\/a> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"dashboard-visual\"> <\/p>\n<div class=\"dashboard-frame\"> <\/p>\n<div class=\"dashboard-inner\">  <\/p>\n<div class=\"dash-header\"> <\/p>\n<div class=\"dash-dots\"> <span><\/span><span><\/span><span><\/span> <\/div>\n<p> <\/p>\n<div class=\"dash-logo\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/07\/logo-unipile.svg\" alt=\"Unipile\"> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"dash-content\">  <\/p>\n<aside class=\"dash-sidebar\"> <\/p>\n<div class=\"dash-nav-item active\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"\/><\/svg> Accounts <\/div>\n<p> <\/p>\n<div class=\"dash-nav-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\/><\/svg> Webhooks <\/div>\n<p> <\/p>\n<div class=\"dash-nav-item\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4\"\/><\/svg> API Keys <\/div>\n<p> <\/aside>\n<p>   <main class=\"dash-main\"> <\/p>\n<div class=\"dash-main-header\"> <\/p>\n<h3 class=\"dash-main-title\">Accounts<\/h3>\n<p> <button class=\"dash-add-btn\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg> Link account <\/button> <\/div>\n<p>  <\/p>\n<div class=\"dash-status-row\"> <\/p>\n<div class=\"dash-status-pill green\"> <span class=\"dash-status-dot green\"><\/span> <span class=\"count\">3<\/span> Operational <\/div>\n<p> <\/p>\n<div class=\"dash-status-pill\"> <span class=\"dash-status-dot yellow\"><\/span> <span>0<\/span> Auth required <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"dash-table\"> <\/p>\n<div class=\"dash-table-header\"> <span>Name<\/span> <span>Account ID<\/span> <span>Status<\/span> <\/div>\n<p> <\/p>\n<div class=\"dash-table-row\"> <\/p>\n<div class=\"dash-account\"> <\/p>\n<div class=\"dash-account-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/linkedin-5.svg\" alt=\"LinkedIn\"> <\/div>\n<p> <span class=\"dash-account-name\">John Doe<\/span> <\/div>\n<p> <span class=\"dash-account-id\">acc_01jgpb44…<\/span> <span class=\"dash-status-badge\"><span class=\"dash-status-dot green\"><\/span> OK<\/span> <\/div>\n<p> <\/p>\n<div class=\"dash-table-row\"> <\/p>\n<div class=\"dash-account\"> <\/p>\n<div class=\"dash-account-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2024\/02\/gmail-3.svg\" alt=\"Gmail\"> <\/div>\n<p> <span class=\"dash-account-name\">Sarah Miller<\/span> <\/div>\n<p> <span class=\"dash-account-id\">acc_01jgpb55…<\/span> <span class=\"dash-status-badge\"><span class=\"dash-status-dot green\"><\/span> OK<\/span> <\/div>\n<p> <\/p>\n<div class=\"dash-table-row\"> <\/p>\n<div class=\"dash-account\"> <\/p>\n<div class=\"dash-account-icon\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/09\/whatsapp-1.svg\" alt=\"WhatsApp\"> <\/div>\n<p> <span class=\"dash-account-name\">Alex Turner<\/span> <\/div>\n<p> <span class=\"dash-account-id\">acc_01jgpc1a…<\/span> <span class=\"dash-status-badge\"><span class=\"dash-status-dot green\"><\/span> OK<\/span> <\/div>\n<p> <\/div>\n<p> <\/main> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/div>\n<p> <\/div>\n<p><\/section>\n<p><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=”1″ custom_padding_last_edited=”on|desktop” admin_label=”Section 4 Tesimonials & Security” module_id=”reviews” _builder_version=”4.27.4″ _module_preset=”default” background_color=”#f4f5f7″ background_enable_image=”off” custom_padding=”20px|16px|1px|16px|false|false” custom_padding_tablet=”20px|16px|1px|16px|false|false” custom_padding_phone=”20px|16px|1px|16px|false|false” custom_css_free_form=”.custom_row {|| margin: 0 auto; \/* Ensure no extra spacing *\/|| padding: 20px 0; \/* Adjust padding as needed *\/||}||” da_popup_slug=”reviews” da_disable_devices=”off|off|off” global_module=”258961″ saved_tabs=”all” locked=”off” collapsed=”on” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_row _builder_version=”4.27.4″ _module_preset=”default” custom_margin=”20px||0px||false|false” custom_margin_tablet=”20px||0px||false|false” custom_margin_phone=”0px||0px||false|false” custom_margin_last_edited=”on|desktop” locked=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”] <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-companies-section { font-family: 'Inter', sans-serif;  padding: 40px 20px; } #unipile-companies-section .companies-container { max-width: 1100px; margin: 0 auto; } \/* Header avec badge *\/ #unipile-companies-section .section-header { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 50px; flex-wrap: wrap; } #unipile-companies-section .badge-number { display: inline-flex; align-items: center; gap: 10px; background: rgba(59, 185, 139, 0.12); color: #3BB98B; padding: 12px 24px; border-radius: 28px; font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; } #unipile-companies-section .badge-number svg { width: 32px; height: 32px; } #unipile-companies-section .header-text { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #0f2736; } \/* Logos Section *\/ #unipile-companies-section .logos-section { margin-bottom: 50px; } #unipile-companies-section .logos-label { font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; margin-bottom: 24px; } #unipile-companies-section .logos-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 32px 70px; justify-content: center; align-items: center; } #unipile-companies-section .partner-logo { height: 72px; opacity: 1; transition: all 0.3s ease; } \/* Stats Row *\/ #unipile-companies-section .stats-row { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; } #unipile-companies-section .stat-item { text-align: center; } #unipile-companies-section .stat-value { font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 700; color: #3BB98B; line-height: 1; margin-bottom: 6px; } #unipile-companies-section .stat-label { font-size: 13px; color: #6b7280; line-height: 1.5; max-width: 180px; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-companies-section .section-header { flex-direction: column; gap: 8px; } #unipile-companies-section .badge-number { font-size: 28px; } #unipile-companies-section .badge-number svg { width: 24px; height: 24px; } #unipile-companies-section .header-text { font-size: 28px; text-align: center; } #unipile-companies-section .stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } #unipile-companies-section .stats-row .stat-item:last-child { grid-column: 1 \/ -1; justify-self: center; } #unipile-companies-section .stat-value { font-size: 30px; } #unipile-companies-section .logos-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 40px; justify-items: center; } #unipile-companies-section .partner-logo { height: 54px; } } @media (max-width: 600px) { #unipile-companies-section { padding: 50px 16px; } #unipile-companies-section .badge-number { font-size: 24px; padding: 10px 18px; } #unipile-companies-section .header-text { font-size: 22px; } #unipile-companies-section .stat-value { font-size: 26px; } #unipile-companies-section .stats-row { gap: 24px; } #unipile-companies-section .logos-grid { gap: 24px 32px; } #unipile-companies-section .partner-logo { height: 44px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1> <\/p>\n<section id=\"unipile-companies-section\"> <\/p>\n<div class=\"companies-container\">   <\/p>\n<div class=\"section-header\"> <span class=\"badge-number\"> <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M3 21h18\"\/> <path d=\"M5 21V7l8-4v18\"\/> <path d=\"M19 21V11l-6-4\"\/> <path d=\"M9 9v.01\"\/> <path d=\"M9 12v.01\"\/> <path d=\"M9 15v.01\"\/> <path d=\"M9 18v.01\"\/> <\/svg> 2000+ <\/span> <span class=\"header-text\">Companies Innovating with Unipile<\/span> <\/div>\n<p>  <\/p>\n<div class=\"logos-section\"> <\/p>\n<div class=\"logos-label\">Trusted by industry leaders<\/div>\n<p> <\/p>\n<div class=\"logos-grid\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/09\/Lemlist_Logo-1.svg\" alt=\"Lemlist\" class=\"partner-logo\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2026\/01\/logo-reply-io-1.svg\" alt=\"Reply io\" class=\"partner-logo\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/03\/relevance_logo_unipile_partner_.svg\" alt=\"Relevance AI\" class=\"partner-logo\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/03\/valley_logo_unipile_partner_.svg\" alt=\"Valley\" class=\"partner-logo\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/03\/recruitcrm_logo_unipile_partner_.svg\" alt=\"Recruit CRM\" class=\"partner-logo\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/03\/artisanco_logo_unipile_partner_.svg\" alt=\"Artisan\" class=\"partner-logo\"> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"stats-row\"> <\/p>\n<div class=\"stat-item\"> <\/p>\n<div class=\"stat-value\">1 API<\/div>\n<p> <\/p>\n<div class=\"stat-label\">Streamline operations for all major communication channels<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"stat-item\"> <\/p>\n<div class=\"stat-value\">2 Days<\/div>\n<p> <\/p>\n<div class=\"stat-label\">Achieve live integration quickly with minimal setup<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"stat-item\"> <\/p>\n<div class=\"stat-value\">30%<\/div>\n<p> <\/p>\n<div class=\"stat-label\">Reduction in maintenance efforts and resources<\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/section>\n<p><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.27.4″ _module_preset=”default” custom_margin=”80px||40px||false|false” custom_margin_tablet=”” custom_margin_phone=”” custom_margin_last_edited=”on|desktop” global_module=”275886″ saved_tabs=”all” locked=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”] <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-security-section { font-family: 'Inter', sans-serif;  padding: 40px 20px; } #unipile-security-section .security-container { max-width: 1100px; margin: 0 auto; } \/* Security Header *\/ #unipile-security-section .security-header { text-align: center; margin-bottom: 40px; } #unipile-security-section .security-header h3 { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; color: #0f2736; margin-bottom: 12px; } #unipile-security-section .security-header p { font-size: 15px; color: #6b7280; margin-bottom: 16px; } #unipile-security-section .security-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #3BB98B; text-decoration: none; transition: all 0.3s ease; } #unipile-security-section .security-cta:hover { gap: 10px; color: #2da077; } #unipile-security-section .security-cta svg { width: 16px; height: 16px; transition: transform 0.3s ease; } #unipile-security-section .security-cta:hover svg { transform: translateX(2px); } \/* Compliance Cards *\/ #unipile-security-section .compliance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto 50px auto; } #unipile-security-section .compliance-card { background: #ffffff; border-radius: 16px; padding: 24px; border: 1px solid #e5e7eb; display: flex; align-items: flex-start; gap: 20px; } #unipile-security-section .compliance-icon { width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; } #unipile-security-section .compliance-content { flex: 1; text-align: left; } #unipile-security-section .compliance-header-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } #unipile-security-section .compliance-title { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; color: #0f2736; line-height: 1.2; } #unipile-security-section .compliance-status { font-size: 10px; font-weight: 600; color: #3BB98B; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 4px; background: rgba(59, 185, 139, 0.1); padding: 4px 10px; border-radius: 10px; } #unipile-security-section .compliance-status::before { content: ''; width: 6px; height: 6px; background: #3BB98B; border-radius: 50%; } #unipile-security-section .compliance-desc { font-size: 13px; color: #6b7280; line-height: 1.5; } \/* Metrics Row *\/ #unipile-security-section .metrics-row { display: flex; justify-content: center; gap: 80px; flex-wrap: wrap; } #unipile-security-section .metric-item { text-align: center; } #unipile-security-section .metric-value { font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 700; color: #3BB98B; line-height: 1; margin-bottom: 6px; } #unipile-security-section .metric-label { font-size: 13px; color: #6b7280; line-height: 1.5; max-width: 180px; } \/* Responsive *\/ @media (max-width: 900px) { #unipile-security-section .security-header h3 { font-size: 28px; } #unipile-security-section .compliance-grid { grid-template-columns: 1fr; max-width: 500px; } #unipile-security-section .metrics-row { gap: 50px; } #unipile-security-section .metric-value { font-size: 30px; } } @media (max-width: 600px) { #unipile-security-section { padding: 50px 16px; } #unipile-security-section .security-header h3 { font-size: 22px; } #unipile-security-section .metric-value { font-size: 26px; } #unipile-security-section .compliance-card { padding: 20px; gap: 16px; } #unipile-security-section .compliance-icon { width: 52px; height: 52px; } #unipile-security-section .metrics-row { gap: 40px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1> <\/p>\n<section id=\"unipile-security-section\"> <\/p>\n<div class=\"security-container\">  <\/p>\n<div class=\"security-header\"> <\/p>\n<h3>Built-In Security and Compliance<\/h3>\n<p> <pee>Enterprise-grade protection for your data and workflows<\/pee> <a href=\"https:\/\/www.unipile.com\/security-compliance\/\" class=\"security-cta\"> Learn more about our security <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <polyline points=\"9 18 15 12 9 6\"><\/polyline> <\/svg> <\/a> <\/div>\n<p>  <\/p>\n<div class=\"compliance-grid\"> <\/p>\n<div class=\"compliance-card\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/01\/soc2-logo-1-1.png\" alt=\"SOC 2 Type II\" class=\"compliance-icon\"> <\/p>\n<div class=\"compliance-content\"> <\/p>\n<div class=\"compliance-header-row\"> <\/p>\n<div class=\"compliance-title\">SOC 2 Type II<\/div>\n<p> <\/p>\n<div class=\"compliance-status\">Certified<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"compliance-desc\">Independently audited security controls ensuring data protection and operational integrity.<\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"compliance-card\"> <img decoding=\"async\" src=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2025\/01\/GDPR-compliance-1.png\" alt=\"GDPR\" class=\"compliance-icon\"> <\/p>\n<div class=\"compliance-content\"> <\/p>\n<div class=\"compliance-header-row\"> <\/p>\n<div class=\"compliance-title\">GDPR<\/div>\n<p> <\/p>\n<div class=\"compliance-status\">Compliant<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"compliance-desc\">Full compliance with European data protection regulations for user privacy.<\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"metrics-row\"> <\/p>\n<div class=\"metric-item\"> <\/p>\n<div class=\"metric-value\">99.9%<\/div>\n<p> <\/p>\n<div class=\"metric-label\">Platform Uptime over the last 24 months<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"metric-item\"> <\/p>\n<div class=\"metric-value\">24\/7<\/div>\n<p> <\/p>\n<div class=\"metric-label\">Global Support with high-performance API<\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/section>\n<p><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.4″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_fullwidth_code _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”] <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } #unipile-auth-faq { background: #F4F5F7; padding: 40px 20px 80px; font-family: 'Inter', sans-serif; } \/* Section Container *\/ #unipile-auth-faq .container { max-width: 900px; margin: 0 auto; } \/* Header *\/ #unipile-auth-faq .faq-header { text-align: center; margin-bottom: 60px; } #unipile-auth-faq .faq-title { font-family: 'Poppins', sans-serif; font-size: clamp(32px, 5vw, 38px); font-weight: 700; color: #0f2736; margin-bottom: 16px; line-height: 1.2; } #unipile-auth-faq .faq-title span { color: #3BB98B; } #unipile-auth-faq .faq-subtitle { font-size: 1.1rem; color: #383838; max-width: 700px; margin: 0 auto; } \/* FAQ List *\/ #unipile-auth-faq .faq-list { display: flex; flex-direction: column; gap: 12px; } \/* FAQ Item *\/ #unipile-auth-faq .faq-item { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; transition: all 0.3s ease; } #unipile-auth-faq .faq-item:hover { border-color: #3BB98B; box-shadow: 0 4px 20px rgba(59, 185, 139, 0.08); } #unipile-auth-faq .faq-item.active { border-color: #3BB98B; box-shadow: 0 8px 30px rgba(59, 185, 139, 0.12); } \/* Question Button *\/ #unipile-auth-faq .faq-question { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 28px; background: transparent; border: none; cursor: pointer; text-align: left; transition: all 0.2s ease; } #unipile-auth-faq .faq-question-content { display: flex; align-items: flex-start; gap: 16px; flex: 1; } #unipile-auth-faq .faq-number { flex-shrink: 0; padding: 6px 12px; background: rgba(59, 185, 139, 0.12); color: #3BB98B; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; transition: all 0.3s ease; } #unipile-auth-faq .faq-item.active .faq-number { background: rgba(59, 185, 139, 0.2); color: #2a9d6e; } #unipile-auth-faq .faq-question-text { font-family: 'Poppins', sans-serif; font-size: 1.1rem; font-weight: 600; color: #0f2736; line-height: 1.4; padding-top: 4px; } \/* Icon Toggle *\/ #unipile-auth-faq .faq-icon { flex-shrink: 0; width: 36px; height: 36px; background: #f8f9fa; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; margin-top: 2px; } #unipile-auth-faq .faq-icon svg { width: 18px; height: 18px; color: #64748b; transition: all 0.3s ease; } #unipile-auth-faq .faq-item:hover .faq-icon { background: rgba(59, 185, 139, 0.1); } #unipile-auth-faq .faq-item:hover .faq-icon svg { color: #3BB98B; } #unipile-auth-faq .faq-item.active .faq-icon { background: #3BB98B; transform: rotate(45deg); } #unipile-auth-faq .faq-item.active .faq-icon svg { color: #ffffff; } \/* Answer Panel *\/ #unipile-auth-faq .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; } #unipile-auth-faq .faq-item.active .faq-answer { max-height: 500px; } #unipile-auth-faq .faq-answer-content { padding: 0 28px 28px 76px; color: #475569; font-size: 1rem; line-height: 1.7; } #unipile-auth-faq .faq-answer-content strong { color: #0f2736; font-weight: 600; } #unipile-auth-faq .faq-answer-content code { background: rgba(59, 185, 139, 0.1); color: #3BB98B; padding: 2px 8px; border-radius: 4px; font-size: 0.9rem; font-family: 'Fira Code', monospace; } #unipile-auth-faq .faq-answer-content a { color: #0f2736; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; } #unipile-auth-faq .faq-answer-content a:hover { color: #3BB98B; } \/* CTA at bottom *\/ #unipile-auth-faq .faq-cta { margin-top: 50px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 28px; background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 12px; } #unipile-auth-faq .faq-cta-text { color: #475569; font-size: 1rem; margin: 0; } #unipile-auth-faq .faq-cta-button { display: inline-flex; align-items: center; gap: 10px; background: #DDDF4C; color: #0F2836; padding: 13px 20px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 1rem; border: none; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; } #unipile-auth-faq .faq-cta-button:hover { transform: translateY(-2px); } #unipile-auth-faq .faq-cta-button svg { width: 18px; height: 18px; } \/* Responsive *\/ @media (max-width: 768px) { #unipile-auth-faq { padding: 20px 16px 40px; } #unipile-auth-faq .faq-header { margin-bottom: 40px; } #unipile-auth-faq .faq-question { padding: 20px; gap: 16px; } #unipile-auth-faq .faq-question-content { gap: 12px; } #unipile-auth-faq .faq-number { padding: 5px 10px; font-size: 0.75rem; } #unipile-auth-faq .faq-question-text { font-size: 1rem; padding-top: 2px; } #unipile-auth-faq .faq-icon { width: 32px; height: 32px; } #unipile-auth-faq .faq-icon svg { width: 16px; height: 16px; } #unipile-auth-faq .faq-answer-content { padding: 0 20px 20px 60px; font-size: 0.95rem; } #unipile-auth-faq .faq-cta { padding: 30px 20px; margin-top: 40px; flex-direction: column; text-align: center; gap: 16px; } #unipile-auth-faq .faq-cta-text { font-size: 0.95rem; } } @media (max-width: 480px) { #unipile-auth-faq .faq-question-content { flex-direction: column; gap: 8px; } #unipile-auth-faq .faq-number { padding: 4px 8px; font-size: 0.7rem; } #unipile-auth-faq .faq-question-text { padding-top: 0; } #unipile-auth-faq .faq-answer-content { padding: 0 20px 20px 20px; } } <\/style>\n<p><\/head><body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1><\/p>\n<section id=\"unipile-auth-faq\"> <\/p>\n<div class=\"container\">   <\/p>\n<div class=\"faq-header\"> <\/p>\n<h2 class=\"faq-title\">Auth on Behalf <span>FAQ<\/span><\/h2>\n<p> <pee class=\"faq-subtitle\">Common questions about user authentication and the Hosted Auth flow<\/pee> <\/div>\n<p>  <\/p>\n<div class=\"faq-list\">  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">01<\/span> <span class=\"faq-question-text\">What is Auth on Behalf and how is it different from bot APIs?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> Auth on Behalf enables your app to perform actions <strong>as the actual user<\/strong>\u2014not as a bot or app identity. With traditional bot APIs, recipients see the app’s name instead of the user’s real identity. With Auth on Behalf, messages appear exactly as if the user sent them manually\u2014<strong>indistinguishable from native actions<\/strong>. <\/div>\n<p> <\/div>\n<p><\/div>\n<p>  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">02<\/span> <span class=\"faq-question-text\">Do I need to store user credentials or tokens?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> <strong>No.<\/strong> Unipile manages all authorization tokens server-side\u2014whether they’re OAuth tokens (Google, Microsoft), session tokens (LinkedIn, Instagram), or QR-based sessions (WhatsApp). You only store the <code>account_id<\/code> returned after successful authentication. This eliminates security risks associated with credential storage. <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">03<\/span> <span class=\"faq-question-text\">What is Hosted Auth and why should I use it?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> Hosted Auth is a pre-built authentication wizard that handles <strong>all auth methods<\/strong> for you: OAuth flows (Google, Microsoft), QR code scanning (WhatsApp), session-based login (LinkedIn, Instagram), 2FA verification, and CAPTCHA challenges. Instead of building each flow separately, you generate <strong>one redirect link<\/strong>\u2014Unipile handles everything else. <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">04<\/span> <span class=\"faq-question-text\">How do I implement the Hosted Auth flow?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> Implementation takes 4 steps: <strong>1)<\/strong> Generate a hosted auth link via our API, <strong>2)<\/strong> Redirect the user to the returned URL, <strong>3)<\/strong> Handle the webhook callback on your <code>notify_url<\/code>, <strong>4)<\/strong> Store the <code>account_id<\/code> mapping and start making API calls. Most teams complete integration in <strong>1-2 days<\/strong>. <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">05<\/span> <span class=\"faq-question-text\">What happens when a user’s session expires?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> When a session expires or credentials become invalid, you’ll receive a webhook notification with <code>status: \"CREDENTIALS\"<\/code>. You can then notify the user and generate a reconnection link using <code>type: \"reconnect\"<\/code>. The flow is identical to initial authentication\u2014seamless for both you and your users. <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">06<\/span> <span class=\"faq-question-text\">Can I use my own domain for the auth flow?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> Yes. We support <strong>white-label custom domains<\/strong>. You can use your own subdomain (e.g., <code>auth.yourapp.com<\/code>) instead of Unipile’s default URL. Simply configure a CNAME record pointing to <code>account.unipile.com<\/code> and contact our support to finalize the setup. <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">07<\/span> <span class=\"faq-question-text\">Which providers are supported?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> Hosted Auth supports all Unipile providers: <strong>LinkedIn, WhatsApp, Instagram, Telegram<\/strong> (messaging), <strong>Gmail, Outlook, IMAP<\/strong> (email), and <strong>Google Calendar, Outlook Calendar<\/strong> (calendar). Each provider uses its native auth method (OAuth, QR code, or session)\u2014all unified through one API. <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"faq-item\"> <button class=\"faq-question\" aria-expanded=\"false\"> <\/p>\n<div class=\"faq-question-content\"> <span class=\"faq-number\">08<\/span> <span class=\"faq-question-text\">What’s the difference between building auth myself vs using Hosted Auth?<\/span> <\/div>\n<p> <\/p>\n<div class=\"faq-icon\"> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <\/svg> <\/div>\n<p> <\/button> <\/p>\n<div class=\"faq-answer\"> <\/p>\n<div class=\"faq-answer-content\"> Building yourself means implementing <strong>multiple auth flows<\/strong> (OAuth for Google\/Microsoft, QR scanning for WhatsApp, session management for LinkedIn), handling <strong>2FA and CAPTCHA challenges<\/strong>, managing <strong>token refresh<\/strong>, and maintaining it all as providers change. With Hosted Auth, you generate <strong>one link<\/strong>\u2014everything else is handled by Unipile with zero maintenance on your end. <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"faq-cta\"> <pee class=\"faq-cta-text\">Still have questions about Auth on Behalf?<\/pee> <a href=\"https:\/\/developer.unipile.com\/docs\/hosted-auth\" class=\"faq-cta-button\" target=\"_blank\"> View Documentation <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/> <polyline points=\"12 5 19 12 12 19\"\/> <\/svg> <\/a> <\/div>\n<p> <\/div>\n<p><\/section>\n<p><script> document.querySelectorAll('#unipile-auth-faq .faq-question').forEach(button => { button.addEventListener('click', () => { const item = button.closest('.faq-item'); const isActive = item.classList.contains('active');  \/\/ Close all other items document.querySelectorAll('#unipile-auth-faq .faq-item').forEach(otherItem => { otherItem.classList.remove('active'); otherItem.querySelector('.faq-question').setAttribute('aria-expanded', 'false'); });  \/\/ Toggle current item if (!isActive) { item.classList.add('active'); button.setAttribute('aria-expanded', 'true'); } }); });<\/script><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Implementation in 4 Steps From generating an auth link to executing API calls on behalf of your users 1 Generate Hosted Auth Link POST const response = await fetch( “https:\/\/api.unipile.com\/api\/v1\/hosted\/accounts\/link”, { method: “POST”, headers: { “X-API-KEY”: “YOUR_API_KEY”, “Content-Type”: “application\/json” }, body: JSON.stringify({ type: “create”, providers: [“LINKEDIN”, “GOOGLE”], notify_url: “https:\/\/yourapp.com\/callback”, name: “user_123” }) }); Keep your […]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"folder":[],"class_list":["post-276546","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Auth on Behalf: Secure Delegated Access for Your API Integration - Unipile<\/title>\n<meta name=\"description\" content=\"Auth on Behalf lets your app securely act on behalf of users across LinkedIn, Email, WhatsApp & Calendar. Zero credential storage, single unified endpoint.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.unipile.com\/it\/auth-dello-sviluppatore-per-conto\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Auth on Behalf: Secure Delegated Access for Your API Integration - Unipile\" \/>\n<meta property=\"og:description\" content=\"Auth on Behalf lets your app securely act on behalf of users across LinkedIn, Email, WhatsApp & Calendar. Zero credential storage, single unified endpoint.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unipile.com\/it\/auth-dello-sviluppatore-per-conto\/\" \/>\n<meta property=\"og:site_name\" content=\"Unipile\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/unipilefr\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-05T10:59:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.unipile.com\/wp-content\/uploads\/2023\/07\/Logo.svg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@UnipileAPI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/\",\"url\":\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/\",\"name\":\"Auth on Behalf: Secure Delegated Access for Your API Integration - Unipile\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.unipile.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.unipile.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Logo.svg\",\"datePublished\":\"2026-01-13T14:47:03+00:00\",\"dateModified\":\"2026-02-05T10:59:56+00:00\",\"description\":\"Auth on Behalf lets your app securely act on behalf of users across LinkedIn, Email, WhatsApp & Calendar. Zero credential storage, single unified endpoint.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.unipile.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.unipile.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Logo.svg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.unipile.com\\\/developer-auth-on-behalf\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.unipile.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Auth on Behalf: Secure Delegated Access for Your API Integration\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.unipile.com\\\/#website\",\"url\":\"https:\\\/\\\/www.unipile.com\\\/\",\"name\":\"Unipile\",\"description\":\"Integrate Messaging & Email, Connect with Ease via API\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.unipile.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.unipile.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.unipile.com\\\/#organization\",\"name\":\"Unipile\",\"url\":\"https:\\\/\\\/www.unipile.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.unipile.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.unipile.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/logo-unipile.png\",\"contentUrl\":\"https:\\\/\\\/www.unipile.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/logo-unipile.png\",\"width\":200,\"height\":49,\"caption\":\"Unipile\"},\"image\":{\"@id\":\"https:\\\/\\\/www.unipile.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/unipilefr\",\"https:\\\/\\\/x.com\\\/UnipileAPI\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/unipile\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Auth on Behalf: Accesso delegato sicuro per la vostra integrazione API - Unipile","description":"Auth on Behalf consente alla vostra app di agire in modo sicuro per conto degli utenti su LinkedIn, e-mail, WhatsApp e calendario. Nessuna memorizzazione di credenziali, un unico endpoint unificato.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.unipile.com\/it\/auth-dello-sviluppatore-per-conto\/","og_locale":"it_IT","og_type":"article","og_title":"Auth on Behalf: Secure Delegated Access for Your API Integration - Unipile","og_description":"Auth on Behalf lets your app securely act on behalf of users across LinkedIn, Email, WhatsApp & Calendar. Zero credential storage, single unified endpoint.","og_url":"https:\/\/www.unipile.com\/it\/auth-dello-sviluppatore-per-conto\/","og_site_name":"Unipile","article_publisher":"https:\/\/www.facebook.com\/unipilefr","article_modified_time":"2026-02-05T10:59:56+00:00","og_image":[{"url":"https:\/\/www.unipile.com\/wp-content\/uploads\/2023\/07\/Logo.svg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@UnipileAPI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.unipile.com\/developer-auth-on-behalf\/","url":"https:\/\/www.unipile.com\/developer-auth-on-behalf\/","name":"Auth on Behalf: Accesso delegato sicuro per la vostra integrazione API - Unipile","isPartOf":{"@id":"https:\/\/www.unipile.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unipile.com\/developer-auth-on-behalf\/#primaryimage"},"image":{"@id":"https:\/\/www.unipile.com\/developer-auth-on-behalf\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unipile.com\/wp-content\/uploads\/2023\/07\/Logo.svg","datePublished":"2026-01-13T14:47:03+00:00","dateModified":"2026-02-05T10:59:56+00:00","description":"Auth on Behalf consente alla vostra app di agire in modo sicuro per conto degli utenti su LinkedIn, e-mail, WhatsApp e calendario. Nessuna memorizzazione di credenziali, un unico endpoint unificato.","breadcrumb":{"@id":"https:\/\/www.unipile.com\/developer-auth-on-behalf\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unipile.com\/developer-auth-on-behalf\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.unipile.com\/developer-auth-on-behalf\/#primaryimage","url":"https:\/\/www.unipile.com\/wp-content\/uploads\/2023\/07\/Logo.svg","contentUrl":"https:\/\/www.unipile.com\/wp-content\/uploads\/2023\/07\/Logo.svg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.unipile.com\/developer-auth-on-behalf\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.unipile.com\/"},{"@type":"ListItem","position":2,"name":"Auth on Behalf: Secure Delegated Access for Your API Integration"}]},{"@type":"WebSite","@id":"https:\/\/www.unipile.com\/#website","url":"https:\/\/www.unipile.com\/","name":"Unipile","description":"Integrazione di messaggistica ed e-mail, connessione semplice tramite API","publisher":{"@id":"https:\/\/www.unipile.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unipile.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.unipile.com\/#organization","name":"Unipile","url":"https:\/\/www.unipile.com\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.unipile.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.unipile.com\/wp-content\/uploads\/2021\/05\/logo-unipile.png","contentUrl":"https:\/\/www.unipile.com\/wp-content\/uploads\/2021\/05\/logo-unipile.png","width":200,"height":49,"caption":"Unipile"},"image":{"@id":"https:\/\/www.unipile.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/unipilefr","https:\/\/x.com\/UnipileAPI","https:\/\/www.linkedin.com\/company\/unipile\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/pages\/276546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/comments?post=276546"}],"version-history":[{"count":56,"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/pages\/276546\/revisions"}],"predecessor-version":[{"id":277119,"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/pages\/276546\/revisions\/277119"}],"wp:attachment":[{"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/media?parent=276546"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/www.unipile.com\/it\/wp-json\/wp\/v2\/folder?post=276546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}