HELLO TEXT2 DEVELOPERS

File structure

<link rel="stylesheet" href="css/main.css">
<script src="js/main.js" defer></script>

Standard icon path

<link rel="icon" href="/favicon.ico">

Tracking path requirement (Google Analytics)

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JCMEMFLZ14"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-JCMEMFLZ14');
</script>

Add manifest requirement (other)

<link rel="manifest" href="/manifests/other.json">

PWA interface protection requirement

<meta name="google" content="notranslate">

Google AdSense requirement

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1722731267767270" crossorigin="anonymous"></script>

Add manifest (snap) & PWA Icon requirement

<link rel="manifest" href="/manifests/snap.json">
<link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="android-chrome-512x512.png">

Favicon In CDN

<!-- Favicon -->
<link rel="manifest" href="/manifests/zip.json">
<link rel="icon" href="https://cdn1.text2.co/app/zip/favicon.ico?v=3" type="image/x-icon">
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn1.text2.co/app/zip/apple-touch-icon.png?v=3">
<link rel="icon" type="image/png" sizes="192x192" href="https://cdn1.text2.co/app/zip/android-chrome-192x192.png?v=3">
<link rel="icon" type="image/png" sizes="512x512" href="https://cdn1.text2.co/app/zip/android-chrome-512x512.png?v=3">
<meta name="google" content="notranslate">

Data src (Media)

https://text2.co/media/apple-touch-icon.png
https://text2.co/media/thumnel.png

Favicon In Root

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

Favicon No Root

<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">

Standard color requirement

Background color code: #121212 and other components in White.

Standard requirement to add homepage component

<!-- Section services -->
<section id="idream-section" style="width:100%;max-width:1200px;padding:0;margin:48px auto 0 auto;background:#000;border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,0.32);">
  <div style="width:100%;height:70vh;min-height:400px;max-height:800px;overflow:hidden;border-radius:20px;">
    <iframe
      src="https://text02.com/post/en/countdown2026.html"
      title="Text2 Countdown 2026"
      style="width:100%;height:100%;display:block;border:none;background:#000;border-radius:20px;"
      loading="lazy"
      allowfullscreen
      referrerpolicy="no-referrer"
    ></iframe>
  </div>
</section>

Shared Layout Components

How to embed shared layouts and trigger activation events (e.g. open Sidebar).

<!-- 1. Insert CSS into <head> -->
<link rel="stylesheet" href="/public/header/header.css">
<link rel="stylesheet" href="/public/footer/footer.css">
<link rel="stylesheet" href="/public/sidebar/sidebar.css">

<!-- 2. Insert JS at the end of <body> -->
<script src="/public/header/header.js"></script>
<script src="/public/footer/footer.js"></script>
<script src="/public/sidebar/sidebar.js"></script>

// Automatically initialize and inject into DOM