Show HN: The MCP Client for Outlook

4 months ago 4

\n\n The styles and scripts are currently inside this HTML file.\n -->\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Install the SYNIA Outlook Add-in</title>\n <link href=\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <link href=\"https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --color-primary: #1A1A1A;\n --color-secondary: #4A4A4A;\n --color-accent: #C3E9DF;\n --color-accent-light: #C3E9DF;\n --color-bg-card: #F7F9FC;\n --color-bg-code: #FBFBFC;\n --color-border: #E5E7EB;\n --color-warning: #FEF3C7;\n --color-warning-border: #F59E0B;\n --color-info: #DBEAFE;\n --color-info-border: #3B82F6;\n --color-tip: #D1FAE5;\n --color-tip-border: #10B981;\n --font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n --font-family-mono: 'Fira Code', 'Monaco', 'Cascadia Code', monospace;\n --spacing-xs: 0.5rem;\n --spacing-sm: 1rem;\n --spacing-md: 1.5rem;\n --spacing-lg: 2rem;\n --spacing-xl: 3rem;\n --border-radius: 6px;\n --border-radius-lg: 12px;\n --max-width: 1200px;\n }\n\n * {\n box-sizing: border-box;\n }\n\n body {\n font-family: var(--font-family);\n line-height: 1.6;\n color: var(--color-primary);\n background: white;\n margin: 0;\n padding: 0;\n }\n\n .container {\n max-width: var(--max-width);\n margin: 0 auto;\n padding: 0 var(--spacing-sm);\n }\n\n /* Typography */\n h1 {\n font-family: var(--font-family);\n font-size: 48px;\n font-weight: 400; /* Regular weight */\n color: var(--color-primary);\n margin: 0 0 var(--spacing-sm) 0;\n line-height: 1.1;\n }\n\n h2 {\n font-size: 1.875rem;\n font-weight: 600;\n color: var(--color-primary);\n margin: var(--spacing-xl) 0 var(--spacing-md) 0;\n line-height: 1.2;\n }\n\n h3 {\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--color-primary);\n margin: var(--spacing-lg) 0 var(--spacing-sm) 0;\n line-height: 1.3;\n }\n\n h4 {\n font-size: 1.25rem;\n font-weight: 500;\n color: var(--color-primary);\n margin: var(--spacing-md) 0 var(--spacing-xs) 0;\n }\n\n p {\n font-size: 1rem;\n color: var(--color-secondary);\n margin: 0 0 var(--spacing-sm) 0;\n }\n\n .subtitle {\n font-size: 1.25rem;\n color: var(--color-secondary);\n margin: 0 0 var(--spacing-xl) 0;\n font-weight: 400;\n }\n\n /* Hero Section */\n .hero {\n padding: var(--spacing-xl) 0 var(--spacing-lg) 0;\n text-align: center;\n }\n\n /* Download Panel */\n .download-panel {\n background: var(--color-bg-card);\n border-radius: var(--border-radius-lg);\n padding: var(--spacing-lg);\n margin: var(--spacing-lg) 0 var(--spacing-lg) 0;\n text-align: center;\n }\n\n .download-btn {\n background: #ade7de;\n color: #101840;\n border: none;\n padding: var(--spacing-sm) var(--spacing-lg);\n font-size: 1.125rem;\n font-weight: 500;\n border-radius: var(--border-radius);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-xs);\n text-decoration: none;\n transition: all 0.2s ease;\n margin-bottom: var(--spacing-md);\n }\n\n .download-btn:hover {\n background: var(--color-accent);\n color: white;\n transform: translateY(-1px);\n }\n\n .hash-line {\n font-family: var(--font-family-mono);\n font-size: 0.875rem;\n color: var(--color-secondary);\n background: white;\n padding: var(--spacing-xs) var(--spacing-sm);\n border-radius: var(--border-radius);\n display: inline-block;\n word-break: break-all;\n }\n\n /* Step Grid */\n .steps-section {\n padding: var(--spacing-xl) 0 0 0;\n }\n\n .step {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--spacing-xl);\n align-items: start;\n margin-bottom: var(--spacing-xl);\n padding-bottom: var(--spacing-xl);\n }\n\n .step:last-child {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n\n .step__image {\n position: relative;\n }\n\n .step__image img {\n width: 100%;\n height: auto;\n border-radius: var(--border-radius);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n aspect-ratio: 16/9;\n object-fit: cover;\n background: var(--color-bg-card);\n }\n\n .step__content h3 {\n margin-top: 0;\n }\n\n .step__content p {\n margin-bottom: var(--spacing-md);\n }\n\n .step__content ul {\n padding-left: 24px;\n margin-top: -1rem;\n margin-bottom: var(--spacing-md);\n }\n\n .step__content li {\n margin-bottom: var(--spacing-xs);\n }\n \n .step__content li:last-child {\n margin-bottom: 0;\n }\n\n /* Version Selection */\n .version-selector {\n background: var(--color-bg-card);\n border-radius: var(--border-radius-lg);\n padding: var(--spacing-md);\n margin: var(--spacing-md) 0;\n text-align: center;\n }\n\n .version-buttons {\n display: flex;\n gap: var(--spacing-sm);\n justify-content: center;\n margin-bottom: var(--spacing-md);\n }\n\n .version-btn {\n background: white;\n color: var(--color-primary);\n border: 2px solid var(--color-border);\n padding: var(--spacing-xs) var(--spacing-md);\n font-size: 1rem;\n font-weight: 500;\n border-radius: var(--border-radius);\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .version-btn.active {\n background: #ade7de;\n color: #101840;\n border-color: #ade7de;\n }\n\n .version-btn:hover {\n border-color: #ade7de;\n }\n\n .version-content {\n display: none;\n }\n\n .version-content.active {\n display: block;\n }\n\n /* Link Button Style */\n .link-btn {\n background: #ade7de;\n color: #101840;\n padding: var(--spacing-sm) var(--spacing-md);\n border-radius: var(--border-radius);\n text-decoration: none;\n font-weight: 500;\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-xs);\n transition: all 0.2s ease;\n margin-top: var(--spacing-sm);\n }\n\n .link-btn:hover {\n background: var(--color-accent);\n color: white;\n transform: translateY(-1px);\n }\n\n /* Code Blocks */\n .code-block {\n font-family: var(--font-family-mono);\n background: var(--color-bg-code);\n border: 1px solid var(--color-border);\n border-radius: var(--border-radius);\n padding: var(--spacing-sm);\n font-size: 0.875rem;\n overflow-x: auto;\n margin: var(--spacing-sm) 0;\n }\n\n /* Callout Blocks */\n .callout {\n padding: var(--spacing-sm) var(--spacing-md);\n border-radius: var(--border-radius);\n margin: var(--spacing-md) 0;\n border-left: 4px solid;\n }\n\n .callout--note {\n background: var(--color-info);\n border-color: var(--color-info-border);\n }\n\n .callout--tip {\n background: var(--color-tip);\n border-color: var(--color-tip-border);\n }\n\n .callout--warning {\n background: var(--color-warning);\n border-color: var(--color-warning-border);\n }\n\n .callout__title {\n font-weight: 600;\n margin: 0 0 var(--spacing-xs) 0;\n color: var(--color-primary);\n }\n\n .callout p {\n margin: 0;\n }\n\n /* FAQ Section */\n .faq-section {\n padding: var(--spacing-xl) 0;\n border-top: 1px solid var(--color-border);\n }\n\n .faq-item {\n border-bottom: 1px solid var(--color-border);\n }\n\n .faq-item:last-child {\n border-bottom: none;\n }\n\n .faq-question {\n width: 100%;\n background: none;\n border: none;\n padding: var(--spacing-md) 0;\n text-align: left;\n font-size: 1.125rem;\n font-weight: 500;\n color: var(--color-primary);\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .faq-question:hover {\n color: var(--color-accent);\n }\n\n .faq-answer {\n padding: 0 0 var(--spacing-md) 0;\n display: none;\n }\n\n .faq-answer.active {\n display: block;\n animation: fadeIn 0.3s ease;\n }\n\n .faq-icon {\n transition: transform 0.3s ease;\n }\n\n .faq-question[aria-expanded=\"true\"] .faq-icon {\n transform: rotate(180deg);\n }\n\n /* Troubleshooting */\n .troubleshooting {\n margin: var(--spacing-lg) 0;\n }\n\n .troubleshooting summary {\n font-weight: 500;\n cursor: pointer;\n padding: var(--spacing-sm) 0;\n color: var(--color-primary);\n }\n\n .troubleshooting summary:hover {\n color: var(--color-accent);\n }\n\n .troubleshooting[open] summary {\n margin-bottom: var(--spacing-sm);\n }\n\n /* Responsive Design */\n @media (max-width: 768px) {\n .container {\n padding: 0 var(--spacing-md);\n }\n\n .step {\n grid-template-columns: 1fr;\n gap: var(--spacing-md);\n }\n\n .step__image {\n order: -1;\n }\n\n .download-btn {\n width: 100%;\n justify-content: center;\n }\n\n .version-buttons {\n flex-direction: column;\n }\n\n .version-btn {\n width: 100%;\n }\n\n h1 {\n font-size: 2.5rem;\n }\n\n .subtitle {\n font-size: 1.125rem;\n }\n }\n\n /* Animations */\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(-10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n .animate-spin {\n animation: spin 1s linear infinite;\n }\n\n /* Smooth scrolling */\n html {\n scroll-behavior: smooth;\n }\n\n /* Navigation links */\n .nav-links {\n text-align: center;\n margin: var(--spacing-lg) 0;\n }\n\n .nav-links a {\n color: #101840;\n text-decoration: none;\n margin: 0 var(--spacing-sm);\n font-weight: 500;\n padding: var(--spacing-sm) var(--spacing-md);\n border-radius: var(--border-radius);\n transition: all 0.2s ease;\n }\n\n .nav-links a:hover {\n color: #ade7de;\n text-decoration: none;\n }\n .tutorial-content {\n display: none;\n }\n\n .tutorial-content.active {\n display: block;\n }\n </style>\n </head>\n <body>\n \n <section class=\"hero\">\n <div class=\"container\">\n <h1>Install the SYNIA Outlook Add-in for free</h1>\n <p class=\"subtitle\">Get started with our add-in in just a few simple steps and enhance your Outlook experience.</p>\n \n <nav class=\"nav-links\">\n <a href=\"#download\">Download</a>\n <a href=\"#steps\">Installation Steps</a>\n <a href=\"#faq\">FAQ</a>\n </nav>\n </div>\n </section>\n\n \n <section id=\"download\" class=\"container\">\n <div class=\"download-panel\">\n <h3>Download XML Manifest</h3>\n <button class=\"download-btn\" onclick=\"downloadManifest()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"7,10 12,15 17,10\"/>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"/>\n </svg>\n Download XML Manifest\n </button>\n </div>\n </section>\n\n \n <section id=\"steps\" class=\"steps-section\">\n <div class=\"container\">\n <h2>Installation Steps</h2>\n \n \n <div class=\"version-selector\" style=\"margin-bottom: 2rem;\">\n <h3>Choose Your Tutorial</h3>\n <div class=\"version-buttons\">\n <button class=\"version-btn active\" onclick=\"selectTutorial('desktop')\">Outlook Desktop Tutorial</button>\n <button class=\"version-btn\" onclick=\"selectTutorial('web')\">Outlook Web Tutorial</button>\n </div>\n </div>\n \n \n <div id=\"desktop-tutorial\" class=\"tutorial-content active\">\n \n <div class=\"step\">\n <div class=\"step__image\">\n <img src=\"https://assets.zyrosite.com/dOqDXjEBbWInq4z0/dowload_manifest_screenshot-YD0wjb9xvQiyw4LK.png\" alt=\"Download manifest file\" loading=\"lazy\">\n </div>\n <div class=\"step__content\">\n <h3>Step 1 — Download the manifest file</h3>\n <p>Click the download button above to download the XML manifest file.</p>\n <div class=\"code-block\">manifest.xml</div>\n </div>\n </div>\n \n \n <div class=\"step\">\n <div class=\"step__image\">\n <img src=\"https://assets.zyrosite.com/dOqDXjEBbWInq4z0/outlook_file_menu_screenshot-YbNJDNwp2aiQWE8M.png\" alt=\"Outlook Desktop File Menu\" loading=\"lazy\">\n </div>\n <div class=\"step__content\">\n <h3>Step 2 — Access Outlook add-in management (Desktop)</h3>\n <p>Open Outlook Desktop and navigate to the <strong>File</strong> tab in the ribbon. Look for the \"Manage Add-ins\" option in the left sidebar menu.</p>\n <div class=\"code-block\">File > Manage Add-ins</div>\n </div>\n </div>\n \n \n <div class=\"step\">\n <div class=\"step__image\">\n <img src=\"https://assets.zyrosite.com/dOqDXjEBbWInq4z0/upload_xml_manifest-mk3JL3wpZesxX7rZ.png\" alt=\"Upload XML manifest dialog\" loading=\"lazy\">\n </div>\n <div class=\"step__content\">\n <h3>Step 3 — Upload the XML manifest</h3>\n <p>In the add-ins management interface, click \"Upload My Add-in\" and select \"Add from file\". Browse to locate the XML manifest file you downloaded in Step 1.</p>\n <div class=\"code-block\">Upload My Add-in > Add from file...</div>\n <div class=\"callout callout--warning\">\n <div class=\"callout__title\">Important</div>\n <p>Make sure to select the correct XML file. In some versions of Outlook, you may need to retry due to occasional bugs.</p>\n </div>\n </div>\n </div>\n \n \n <div class=\"step\">\n <div class=\"step__image\">\n <img src=\"https://assets.zyrosite.com/dOqDXjEBbWInq4z0/click_on_install-mxBXxBwpRvfRKgo0.png\" alt=\"Grant permissions dialog\" loading=\"lazy\">\n </div>\n <div class=\"step__content\">\n <h3>Step 4 — Grant required permissions</h3>\n <p>Outlook will display a permissions dialog showing what access the add-in requires. Review the permissions and click \"Install\" to grant the necessary access.</p>\n <p>The add-in typically requires permissions to:</p>\n <ul>\n <li>Read and write email content</li>\n <li>Access calendar information</li>\n </ul>\n <div class=\"callout callout--note\">\n <div class=\"callout__title\">Note</div>\n <p>SYNIA cannot access the content of any email, as it is fully encrypted and never stored</p>\n </div>\n </div>\n </div>\n \n \n <div class=\"step\">\n <div class=\"step__image\">\n \n <img src=\"https://assets.zyrosite.com/dOqDXjEBbWInq4z0/outlook_ribbon_button_screenshot-mk3JL3wprbIEEJRM.png\" alt=\"Click SYNIA logo to activate in Outlook Desktop\" loading=\"lazy\">\n </div>\n <div class=\"step__content\">\n <h3>Step 5 — Activate SYNIA (Desktop)</h3>\n <p>After installation, you'll see the SYNIA logo/button in your Outlook ribbon. Click on this logo to activate SYNIA and start using the add-in features.</p>\n <div class=\"callout callout--tip\">\n <div class=\"callout__title\">Ready to use!</div>\n <p>Once you click the SYNIA logo, the add-in will be activated and ready to help you with your emails.</p>\n </div>\n </div>\n </div>\n \n \n <div class=\"step\">\n <div class=\"step__image\">\n <img src=\"https://assets.zyrosite.com/dOqDXjEBbWInq4z0/add_device-A1a5gXOWVLtn5N0O.png\" alt=\"Add a device\" loading=\"lazy\">\n </div>\n <div class=\"step__content\">\n <h3>Step 6 — Add a device</h3>\n <p>Now that you have the add-in activated, click on \"Answer with SYNIA.\" Since you're not connected yet, you'll need to add a device. To do this, click the \"Add a Device\" button, then select \"Add This Device\" at the bottom of the page.</p>\n <div class=\"callout callout--note\">\n <div class=\"callout__title\">Note</div>\n <p>Each device where you want to use the add-in must have it installed separately.</p>\n </div>\n </div>\n </div>\n </div>\n \n \n <div id=\"web-tutorial\" class=\"tutorial-content\">\n \n <div class=\"step\">\n <div class=\"step__image\">\n <img src=\"https://assets.zyrosite.com/dOqDXjEBbWInq4z0/dowload_manifest_screenshot-YD0wjb9xvQiyw4LK.png\" alt=\"Download manifest file\" loading=\"lazy\">\n </div>\n <div class=\"step__content\">\n <h3>Step 1 — Download the manifest file</h3>\n <p>Click the download button above to download the XML manifest file.</p>\n <div class=\"code-block\">manifest.xml</div>\n </div>\n </div>\n \n \n <div class=\"step\">\n <div class=\"step__image\">\n <img src=\"https://assets.zyrosite.com/dOqDXjEBbWInq4z0/webapp-dWxOeV9V2kf5DZ31.png\" alt=\"Outlook Web Interface\" loading=\"lazy\">\n </div>\n <div class=\"step__content\">\n <h3>Step 2 — Access Outlook add-in management (Web)</h3>\n <p>Click the link below to access the add-in sideloading page directly. This will open the Microsoft Outlook add-in management interface in a new tab.</p>\n <a href=\"https://aka.ms/olksideload\" target=\"_blank\" class=\"link-btn\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/>\n <polyline points=\"15,3 21,3 21,9\"/>\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"/>\n </svg>\n Open Outlook Web Add-in Manager\n </a>\n </div>\n </div>\n \n \n <div class=\"step\">\n <div class=\"step__image\">\n <img src=\"https://assets.zyrosite.com/dOqDXjEBbWInq4z0/upload_xml_manifest-mk3JL3wpZesxX7rZ.png\" alt=\"Upload XML manifest dialog\" loading=\"lazy\">\n </div>\n <div class=\"step__content\">\n <h3>Step 3 — Upload the XML manifest</h3>\n <p>In the add-ins management interface, click \"Upload My Add-in\" and select \"Add from file\". Browse to locate the XML manifest file you downloaded in Step 1.</p>\n <div class=\"code-block\">Upload My Add-in > Add from file...</div>\n <div class=\"callout callout--warning\">\n <div class=\"callout__title\">Important</div>\n <p>Make sure to select the correct XML file. In some versions of Outlook, you may need to retry due to occasional bugs.</p>\n </div>\n </div>\n </div>\n \n \n <div class=\"step\">\n <div class=\"step__image\">\n <img src=\"https://assets.zyrosite.com/dOqDXjEBbWInq4z0/click_on_install-mxBXxBwpRvfRKgo0.png\" alt=\"Grant permissions dialog\" loading=\"lazy\">\n </div>\n <div class=\"step__content\">\n <h3>Step 4 — Grant required permissions</h3>\n <p>Outlook will display a permissions dialog showing what access the add-in requires. Review the permissions and click \"Install\" to grant the necessary access.</p>\n <p>The add-in typically requires permissions to:</p>\n <ul>\n <li>Read and write email content</li>\n <li>Access calendar information</li>\n </ul>\n <div class=\"callout callout--note\">\n <div class=\"callout__title\">Note</div>\n <p>SYNIA cannot access the content of any email, as it is fully encrypted and never stored</p>\n </div>\n </div>\n </div>\n \n \n <div class=\"step\">\n <div class=\"step__image\">\n \n <img src=\"https://assets.zyrosite.com/dOqDXjEBbWInq4z0/web_app_insttall-AE0r2xP75XH2E4pr.png\" alt=\"Click SYNIA logo to activate in Outlook Web\" loading=\"lazy\">\n </div>\n <div class=\"step__content\">\n <h3>Step 5 — Activate SYNIA (Web)</h3>\n <p>After installation, the SYNIA logo/button will appear in the app section of your Outlook Web interface. To start using the add-in features, click on the app section, then select SYNIA.</p>\n <div class=\"callout callout--tip\">\n <div class=\"callout__title\">Ready to use!</div>\n <p>Once you click the SYNIA logo, the add-in will be activated and ready to help you with your emails.</p>\n </div>\n </div>\n </div>\n \n \n <div class=\"step\">\n <div class=\"step__image\">\n <img src=\"https://assets.zyrosite.com/dOqDXjEBbWInq4z0/add_device-A1a5gXOWVLtn5N0O.png\" alt=\"Add a device\" loading=\"lazy\">\n </div>\n <div class=\"step__content\">\n <h3>Step 6 — Add a device</h3>\n <p>Now that you have the add-in activated, click on SYNIA. Since you're not connected yet, you'll need to add a device. To do this, click the \"Add a Device\" button, then select \"Add This Device\" at the bottom of the page.</p>\n <div class=\"callout callout--note\">\n <div class=\"callout__title\">Note</div>\n <p>Each device where you want to use the add-in must have it installed separately.</p>\n </div>\n </div>\n </div>\n </div>\n \n \n <details class=\"troubleshooting\">\n <summary>Troubleshooting Common Issues</summary>\n <div class=\"callout callout--warning\">\n <div class=\"callout__title\">XML Manifest Error</div>\n <p>If you receive an error about an invalid manifest, ensure you downloaded the correct XML file and that it hasn't been corrupted during download.</p>\n </div>\n \n <div class=\"callout callout--warning\">\n <div class=\"callout__title\">Add-in Not Appearing</div>\n <p>After waiting 20 minutes, try restarting Outlook completely. If the issue persists, check that your Outlook version supports custom add-ins and that your organization's policies allow add-in installation.</p>\n </div>\n \n <div class=\"callout callout--warning\">\n <div class=\"callout__title\">Permission Denied</div>\n <p>Contact your IT administrator if you cannot grant permissions. Some organizations restrict add-in installations through group policies.</p>\n </div>\n </details>\n </div>\n </section>\n \n\n \n <section id=\"faq\" class=\"faq-section\">\n <div class=\"container\">\n <h2>Frequently Asked Questions</h2>\n \n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Which versions of Outlook are supported?</span>\n <svg class=\"faq-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"6,9 12,15 18,9\"/>\n </svg>\n </button>\n <div class=\"faq-answer\">\n <p>Our add-in is compatible with Outlook 2016 or later, Outlook for Microsoft 365, and Outlook on the web. Mobile versions of Outlook are not currently supported.</p>\n </div>\n </div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Can I install this on multiple computers?</span>\n <svg class=\"faq-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"6,9 12,15 18,9\"/>\n </svg>\n </button>\n <div class=\"faq-answer\">\n <p>Yes, you can install the add-in on multiple computers. You'll need to repeat the installation process on each machine where you want to use the add-in.</p>\n </div>\n </div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>How do I uninstall the add-in?</span>\n <svg class=\"faq-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"6,9 12,15 18,9\"/>\n </svg>\n </button>\n <div class=\"faq-answer\">\n <p>To uninstall, go to File > Manage Add-ins, find the add-in in your list, and click the remove or disable option. The add-in will be removed from your Outlook interface.</p>\n </div>\n </div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Is my data secure with this add-in?</span>\n <svg class=\"faq-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"6,9 12,15 18,9\"/>\n </svg>\n </button>\n <div class=\"faq-answer\">\n <p>Yes, we adhere to industry-standard security practices. All data is transmitted over encrypted connections, and we do not store your email content on our servers. For more details, please visit our <a href=\"#\" class=\"btn\" onclick=\"window.top.location.href='https://mail.synia.tech/privacy'; return false;\">Privacy & Security page</a>.</p>\n </div>\n </div>\n </div>\n </section>\n\n <script>\n const xmlManifestContent = `<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<OfficeApp xmlns=\"http://schemas.microsoft.com/office/appforoffice/1.1\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:bt=\"http://schemas.microsoft.com/office/officeappbasictypes/1.0\" xmlns:mailappor=\"http://schemas.microsoft.com/office/mailappversionoverrides/1.0\" xsi:type=\"MailApp\">\n <Id>22ea8717-23f2-4a78-a9b4-2ea1341c83a1</Id>\n <Version>1.0.0.0</Version>\n <ProviderName>SYNIA TECH SAS</ProviderName>\n <DefaultLocale>fr-FR</DefaultLocale>\n <DisplayName DefaultValue=\"Synia for Mails\"/>\n <Description DefaultValue=\"The best-in-class suite to answer your emails.\"/>\n <IconUrl DefaultValue=\"https://wonderful-sand-0cd36ad03.6.azurestaticapps.net/assets/icon-64.png\"/>\n <HighResolutionIconUrl DefaultValue=\"https://wonderful-sand-0cd36ad03.6.azurestaticapps.net/assets/icon-128.png\"/>\n <SupportUrl DefaultValue=\"https://www.mail.synia.tech\"/>\n <AppDomains>\n <AppDomain>https://www.mail.synia.tech</AppDomain>\n </AppDomains>\n <Hosts>\n <Host Name=\"Mailbox\"/>\n </Hosts>\n <Requirements>\n <Sets>\n <Set Name=\"Mailbox\" MinVersion=\"1.1\"/>\n </Sets>\n </Requirements>\n <FormSettings>\n <Form xsi:type=\"ItemRead\">\n <DesktopSettings>\n <SourceLocation DefaultValue=\"https://wonderful-sand-0cd36ad03.6.azurestaticapps.net/srcgh/taskpane.html\"/>\n <RequestedHeight>250</RequestedHeight>\n </DesktopSettings>\n </Form>\n <Form xsi:type=\"ItemEdit\">\n <DesktopSettings>\n <SourceLocation DefaultValue=\"https://wonderful-sand-0cd36ad03.6.azurestaticapps.net/srcgh/taskpane.html\"/>\n </DesktopSettings>\n </Form>\n </FormSettings>\n <Permissions>ReadWriteItem</Permissions>\n <Rule xsi:type=\"RuleCollection\" Mode=\"Or\">\n <Rule xsi:type=\"ItemIs\" ItemType=\"Message\" FormType=\"Read\"/>\n <Rule xsi:type=\"ItemIs\" ItemType=\"Message\" FormType=\"Edit\"/>\n <Rule xsi:type=\"ItemIs\" ItemType=\"Message\" FormType=\"ReadOrEdit\"/>\n </Rule>\n <VersionOverrides xmlns=\"http://schemas.microsoft.com/office/mailappversionoverrides\" xsi:type=\"VersionOverridesV1_0\">\n <Requirements>\n <bt:Sets DefaultMinVersion=\"1.3\">\n <bt:Set Name=\"Mailbox\"/>\n </bt:Sets>\n </Requirements>\n <Hosts>\n <Host xsi:type=\"MailHost\">\n <DesktopFormFactor>\n <ExtensionPoint xsi:type=\"MessageReadCommandSurface\">\n <OfficeTab id=\"TabDefault\">\n <Group id=\"msgReadGroup\">\n <Label resid=\"GroupLabel\"/>\n <Control xsi:type=\"Button\" id=\"msgReadOpenPaneButton\">\n <Label resid=\"TaskpaneButton.Label\"/>\n <Supertip>\n <Title resid=\"TaskpaneButton.Label\"/>\n <Description resid=\"TaskpaneButton.Tooltip\"/>\n </Supertip>\n <Icon>\n <bt:Image size=\"16\" resid=\"Icon.16x16\"/>\n <bt:Image size=\"32\" resid=\"Icon.32x32\"/>\n <bt:Image size=\"80\" resid=\"Icon.80x80\"/>\n </Icon>\n <Action xsi:type=\"ShowTaskpane\">\n <SourceLocation resid=\"TaskpaneRead.Url\"/>\n </Action>\n </Control>\n </Group>\n </OfficeTab>\n </ExtensionPoint>\n <ExtensionPoint xsi:type=\"MessageComposeCommandSurface\">\n <OfficeTab id=\"TabDefault\">\n <Group id=\"msgComposeGroup\">\n <Label resid=\"GroupLabel\"/>\n <Control xsi:type=\"Button\" id=\"msgComposeOpenPaneButton\">\n <Label resid=\"TaskpaneButton.Label\"/>\n <Supertip>\n <Title resid=\"TaskpaneButton.Label\"/>\n <Description resid=\"TaskpaneButton.Tooltip\"/>\n </Supertip>\n <Icon>\n <bt:Image size=\"16\" resid=\"Icon.16x16\"/>\n <bt:Image size=\"32\" resid=\"Icon.32x32\"/>\n <bt:Image size=\"80\" resid=\"Icon.80x80\"/>\n </Icon>\n <Action xsi:type=\"ShowTaskpane\">\n <SourceLocation resid=\"TaskpaneCompose.Url\"/>\n </Action>\n </Control>\n </Group>\n </OfficeTab>\n </ExtensionPoint>\n </DesktopFormFactor>\n </Host>\n </Hosts>\n <Resources>\n <bt:Images>\n <bt:Image id=\"Icon.16x16\" DefaultValue=\"https://wonderful-sand-0cd36ad03.6.azurestaticapps.net/assets/icon-16.png\"/>\n <bt:Image id=\"Icon.32x32\" DefaultValue=\"https://wonderful-sand-0cd36ad03.6.azurestaticapps.net/assets/icon-32.png\"/>\n <bt:Image id=\"Icon.80x80\" DefaultValue=\"https://wonderful-sand-0cd36ad03.6.azurestaticapps.net/assets/icon-80.png\"/>\n </bt:Images>\n <bt:Urls>\n <bt:Url id=\"TaskpaneRead.Url\" DefaultValue=\"https://wonderful-sand-0cd36ad03.6.azurestaticapps.net/srcgh/taskpane.html\"/>\n <bt:Url id=\"TaskpaneCompose.Url\" DefaultValue=\"https://wonderful-sand-0cd36ad03.6.azurestaticapps.net/srcgh/taskpane-compose.html\"/>\n </bt:Urls>\n <bt:ShortStrings>\n <bt:String id=\"GroupLabel\" DefaultValue=\"SYNIA\"/>\n <bt:String id=\"TaskpaneButton.Label\" DefaultValue=\"Answer with Synia\"/>\n </bt:ShortStrings>\n <bt:LongStrings>\n <bt:String id=\"TaskpaneButton.Tooltip\" DefaultValue=\"Answer your email in seconds.\"/>\n </bt:LongStrings>\n </Resources>\n </VersionOverrides>\n</OfficeApp>\n`;\n\n function downloadManifest() {\n const blob = new Blob([xmlManifestContent], { type: 'application/xml' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'manifest.xml';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n }\n function selectTutorial(tutorial) {\n // Remove active class from all buttons\n document.querySelectorAll('.version-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n \n // Hide all tutorial content\n document.querySelectorAll('.tutorial-content').forEach(content => {\n content.classList.remove('active');\n });\n \n // Add active class to clicked button\n event.target.classList.add('active');\n \n // Show corresponding tutorial\n const tutorialId = tutorial + '-tutorial';\n document.getElementById(tutorialId).classList.add('active');\n }\n\n // FAQ accordion functionality\n document.querySelectorAll('.faq-question').forEach(button => {\n button.addEventListener('click', () => {\n const isExpanded = button.getAttribute('aria-expanded') === 'true';\n const answer = button.nextElementSibling;\n \n // Close all other FAQ items\n document.querySelectorAll('.faq-question').forEach(otherButton => {\n if (otherButton !== button) {\n otherButton.setAttribute('aria-expanded', 'false');\n otherButton.nextElementSibling.classList.remove('active');\n }\n });\n \n // Toggle current FAQ item\n button.setAttribute('aria-expanded', !isExpanded);\n answer.classList.toggle('active');\n });\n });\n\n // Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n </script>\n </body>\n </html>"],"desktop":[0,{"top":[0,40],"left":[0,0],"width":[0,1224],"height":[0,4104]}],"settings":[0,{"styles":[0,{}]}]}],"zr9rGr":[0,{"type":[0,"GridTextBox"],"mobile":[0,{"top":[0,197],"left":[0,0],"width":[0,328],"height":[0,27]}],"content":[0,"<p dir=\"auto\" style=\"color: rgb(255, 255, 255)\" class=\"body-large\"><span style=\"font-weight: 700\"><strong>Quick Links</strong></span></p>"],"desktop":[0,{"top":[0,63],"left":[0,618],"width":[0,132],"height":[0,27]}],"settings":[0,{"styles":[0,{"text":[0,"left"],"align":[0,"flex-start"],"justify":[0,"flex-start"],"m-element-margin":[0,"0 0 16px 0"]}]}],"animation":[0,{"name":[0,"slide"],"type":[0,"global"]}]}],"zvHWYN":[0,{"rel":[0,""],"href":[0,"/contact"],"type":[0,"GridButton"],"mobile":[0,{"top":[0,230],"left":[0,9],"width":[0,60],"height":[0,26]}],"content":[0,"Contact"],"desktop":[0,{"top":[0,106],"left":[0,618],"width":[0,65],"height":[0,25]}],"linkType":[0,"page"],"settings":[0,{"type":[0,"primary"],"styles":[0,{"align":[0,"center"],"justify":[0,"center"],"m-element-margin":[0,"0 0 16px 0"]}]}],"animation":[0,{"name":[0,"slide"],"type":[0,"global"]}],"fontColor":[0,"rgb(255, 255, 255)"],"borderColor":[0,"rgb(0, 0, 0)"],"borderRadius":[0,0],"linkedPageId":[0,"ai-tZfOU"],"fontColorHover":[0,"rgb(255, 255, 255)"],"backgroundColor":[0,"rgb(14, 19, 37)"],"borderColorHover":[0,"rgb(0, 0, 0)"],"backgroundColorHover":[0,"rgb(29, 30, 32)"]}],"ai-38-KoS":[0,{"type":[0,"GridTextBox"],"mobile":[0,{"top":[0,376],"left":[0,0],"width":[0,328],"height":[0,24]}],"content":[0,"<p class=\"body\" style=\"color: #ffffff; --lineHeightDesktop: 1.3; --fontSizeDesktop: 14px\" dir=\"auto\">© 2025. All rights reserved.</p>"],"desktop":[0,{"top":[0,147],"left":[0,1030],"width":[0,194],"height":[0,18]}],"settings":[0,{"styles":[0,{"text":[0,"left"],"align":[0,"flex-start"],"justify":[0,"center"],"m-element-margin":[0,"0 0 24px 0"]}]}],"animation":[0,{"name":[0,"slide"],"type":[0,"global"]}],"initialElementId":[0,"fRoA6n-q74"]}],"ai-FtkHOs":[0,{"type":[0,"GridTextBox"],"mobile":[0,{"top":[0,40],"left":[0,0],"width":[0,328],"height":[0,31]}],"content":[0,"<h5 style=\"color: rgb(255, 255, 255)\" dir=\"auto\">SYN<span style=\"color: rgb(173, 231, 222)\">IA</span> MAIL</h5>"],"desktop":[0,{"top":[0,63],"left":[0,0],"width":[0,297],"height":[0,42]}],"settings":[0,{"styles":[0,{"text":[0,"left"],"align":[0,"flex-start"],"justify":[0,"center"],"m-element-margin":[0,"0 0 24px 0"]}]}],"animation":[0,{"name":[0,"slide"],"type":[0,"global"]}],"initialElementId":[0,"fRoA6n-q74"]}],"ai-GTba19":[0,{"type":[0,"GridTextBox"],"mobile":[0,{"top":[0,83],"left":[0,0],"width":[0,328],"height":[0,48]}],"content":[0,"<p dir=\"auto\" style=\"color: rgb(255, 255, 255); --lineHeightDesktop: 1.3; --fontSizeDesktop: 14px\" class=\"body\">Enhance your productivity with AI assistance.</p>"],"desktop":[0,{"top":[0,120],"left":[0,0],"width":[0,297],"height":[0,36]}],"settings":[0,{"styles":[0,{"text":[0,"left"],"align":[0,"flex-start"],"justify":[0,"center"],"m-element-margin":[0,"0 0 24px 0"]}]}],"animation":[0,{"name":[0,"slide"],"type":[0,"global"]}],"initialElementId":[0,"fRoA6n-q74"]}]}],"nav":[1,[[0,{"isHidden":[0,false],"linkType":[0,"Page"],"subItems":[1,[]],"navItemId":[0,"yTWzCB"],"linkedPageId":[0,"ai-ipTBq"]}],[0,{"isHidden":[0,false],"linkType":[0,"Page"],"subItems":[1,[]],"navItemId":[0,"DHlQnC"],"linkedPageId":[0,"ai-IBmYV"]}],[0,{"isHidden":[0,false],"linkType":[0,"Page"],"subItems":[1,[]],"navItemId":[0,"K9PkwK"],"linkedPageId":[0,"ai-SFP20"]}],[0,{"isHidden":[0,false],"linkType":[0,"Page"],"subItems":[1,[]],"navItemId":[0,"xKmQBj"],"linkedPageId":[0,"ai-tZfOU"]}],[0,{"isHidden":[0,true],"linkType":[0,"Page"],"subItems":[1,[]],"navItemId":[0,"T5T1H6"],"linkedPageId":[0,"ai-WzBcn"]}],[0,{"isHidden":[0,true],"linkType":[0,"Page"],"subItems":[1,[]],"navItemId":[0,"zItmzI"],"linkedPageId":[0,"zJhC5J"]}]]],"currentLocale":[0,"system"],"homePageId":[0,"ai-ipTBq"],"cookieBannerAcceptText":[0],"cookieBannerDisclaimer":[0],"cookieBannerDeclineText":[0],"blogReadingTimeText":[0],"metaTitle":[0,"SYNIA Mail"],"meta":[0,{"version":[0,192],"template":[0,"aigenerated"],"metaTitle":[0,"SYNIA Mail"],"faviconPath":[0,"logo-AGBbr06LELs030Le.png"],"aiWebsiteType":[0,"Business"],"defaultLocale":[0,"system"],"faviconOrigin":[0,"assets"],"ecommerceStoreId":[0,"store_01JYH8V6FEYCNERBZ26BMESE7E"],"isPrivateModeActive":[0,false],"demoEcommerceStoreId":[0,"demo_01G0E9P2R0CFTNBWEEFCEV8EG5"],"shouldAddWWWPrefixToDomain":[0,false]}],"forms":[0,{"Contact form":[0,{"token":[0,"AVLaDOGMZOixlM95MLEeAQ0BRK7moQ8B"]}]}],"styles":[0,{"h1":[0,{"font-size":[0,"64px"],"font-style":[0,"normal"],"font-family":[0,"var(--font-primary)"],"font-weight":[0,600],"line-height":[0,"1.3em"],"m-font-size":[0,"40px"],"letter-spacing":[0,0],"text-transform":[0,"none"],"text-decoration":[0,"none"]}],"h2":[0,{"font-size":[0,"56px"],"font-style":[0,"normal"],"font-family":[0,"var(--font-primary)"],"font-weight":[0,600],"line-height":[0,"1.3em"],"m-font-size":[0,"36px"],"letter-spacing":[0,0],"text-transform":[0,"none"],"text-decoration":[0,"none"]}],"h3":[0,{"font-size":[0,"48px"],"font-style":[0,"normal"],"font-family":[0,"var(--font-primary)"],"font-weight":[0,600],"line-height":[0,"1.3em"],"m-font-size":[0,"32px"],"letter-spacing":[0,0],"text-transform":[0,"none"],"text-decoration":[0,"none"]}],"h4":[0,{"font-size":[0,"40px"],"font-style":[0,"normal"],"font-family":[0,"var(--font-primary)"],"font-weight":[0,600],"line-height":[0,"1.3em"],"m-font-size":[0,"24px"],"letter-spacing":[0,0],"text-transform":[0,"none"],"text-decoration":[0,"none"]}],"h5":[0,{"font-size":[0,"32px"],"font-style":[0,"normal"],"font-family":[0,"var(--font-primary)"],"font-weight":[0,600],"line-height":[0,"1.3em"],"m-font-size":[0,"24px"],"letter-spacing":[0,0],"text-transform":[0,"none"],"text-decoration":[0,"none"]}],"h6":[0,{"font-size":[0,"24px"],"font-style":[0,"normal"],"font-family":[0,"var(--font-primary)"],"font-weight":[0,600],"line-height":[0,"1.3em"],"m-font-size":[0,"20px"],"letter-spacing":[0,0],"text-transform":[0,"none"],"text-decoration":[0,"none"]}],"body":[0,{"font-size":[0,"16px"],"font-style":[0,"normal"],"font-family":[0,"var(--font-secondary)"],"font-weight":[0,400],"line-height":[0,"1.5em"],"m-font-size":[0,"16px"],"letter-spacing":[0,0],"text-transform":[0,"none"],"text-decoration":[0,"none"]}],"font":[0,{"primary":[0,"'Work Sans', sans-serif"],"secondary":[0,"'Work Sans', sans-serif"]}],"nav-link":[0,{"color":[0,"rgb(255, 255, 255)"],"font-size":[0,"16px"],"font-style":[0,"normal"],"color-hover":[0,"rgb(173, 231, 222)"],"font-family":[0,"var(--font-secondary)"],"font-weight":[0,400],"line-height":[0,"1.5em"],"m-font-size":[0,"16px"],"letter-spacing":[0,0],"text-transform":[0,"none"],"text-decoration":[0,"none"]}],"body-large":[0,{"font-size":[0,"18px"],"font-style":[0,"normal"],"font-family":[0,"var(--font-secondary)"],"font-weight":[0,400],"line-height":[0,"1.5em"],"m-font-size":[0,"18px"],"letter-spacing":[0,0],"text-transform":[0,"none"],"text-decoration":[0,"none"]}],"body-small":[0,{"font-size":[0,"14px"],"font-style":[0,"normal"],"font-family":[0,"var(--font-secondary)"],"font-weight":[0,500],"line-height":[0,"1.5em"],"m-font-size":[0,"14px"],"letter-spacing":[0,0],"text-transform":[0,"none"],"text-decoration":[0,"none"]}],"grid-button-primary":[0,{"font-size":[0,"16px"],"padding-x":[0,"40px"],"padding-y":[0,"16px"],"font-color":[0,"#ffffff"],"font-style":[0,"normal"],"border-null":[0,""],"font-family":[0,"var(--font-secondary)"],"font-weight":[0,400],"line-height":[0,"normal"],"m-font-size":[0,"16px"],"m-padding-x":[0,"36px"],"m-padding-y":[0,"14px"],"box-shadow-x":[0,"0px"],"box-shadow-y":[0,"0px"],"border-radius":[0,999],"letter-spacing":[0,"normal"],"text-transform":[0,"none"],"box-shadow-blur":[0,"0px"],"box-shadow-null":[0,""],"text-decoration":[0,"none"],"background-color":[0,"rgb(0, 0, 0)"],"box-shadow-color":[0,"rgba(0, 0, 0, 0)"],"border-null-hover":[0,""],"box-shadow-spread":[0,"0px"],"box-shadow-x-hover":[0,"0px"],"box-shadow-y-hover":[0,"0px"],"transition-duration":[0,"0.2s"],"background-color-null":[0,""],"box-shadow-blur-hover":[0,"0px"],"box-shadow-null-hover":[0,""],"background-color-hover":[0,"rgb(29, 30, 32)"],"box-shadow-color-hover":[0,"0px"],"box-shadow-spread-hover":[0,"0px"],"transition-timing-function":[0,"ease"],"background-color-null-hover":[0,""]}],"grid-button-secondary":[0,{"font-size":[0,"16px"],"padding-x":[0,"40px"],"padding-y":[0,"16px"],"font-color":[0,"rgb(0, 0, 0)"],"font-style":[0,"normal"],"border-null":[0,""],"font-family":[0,"var(--font-secondary)"],"font-weight":[0,400],"line-height":[0,"normal"],"m-font-size":[0,"16px"],"m-padding-x":[0,"36px"],"m-padding-y":[0,"14px"],"box-shadow-x":[0,"0px"],"box-shadow-y":[0,"0px"],"border-radius":[0,999],"letter-spacing":[0,"normal"],"text-transform":[0,"none"],"box-shadow-blur":[0,"0px"],"box-shadow-null":[0,""],"text-decoration":[0,"none"],"background-color":[0,"white"],"box-shadow-color":[0,"rgba(0, 0, 0, 0)"],"border-null-hover":[0,""],"box-shadow-spread":[0,"0px"],"box-shadow-x-hover":[0,"0px"],"box-shadow-y-hover":[0,"0px"],"transition-duration":[0,"0.2s"],"background-color-null":[0,""],"box-shadow-blur-hover":[0,"0px"],"box-shadow-null-hover":[0,""],"background-color-hover":[0,"rgb(240, 240, 240)"],"box-shadow-color-hover":[0,"0px"],"box-shadow-spread-hover":[0,"0px"],"transition-timing-function":[0,"ease"],"background-color-null-hover":[0,""]}]}],"domain":[0,"mail.synia.tech"],"siteId":[0,"dOqDXjEBbWInq4z0"],"ecommerceShoppingCart":[0],"blogCategories":[0,{}],"languageSwitcherLanguages":[1,[]],"currentPageId":[0,"ai-IBmYV"],"productId":[0],"languageKeys":[1,[[0,"system"]]],"isDynamicProductPageEnabled":[0,false],"buildDate":[0,"1751387322875"]}],"productData":[0]}" ssr="" client="load" opts='{"name":"PageComponent","value":true}' await-children="">