1<!DOCTYPE html> 2<html 3 class="scroll-behavior-smooth" 4 lang="en" 5> 6 7<head> 8 <!-- Google tag (gtag.js) -->
vendor: 72 bytes, lines 8-9
8 9 <script async src="https://www.googletagmanager.com/gtag/js?id=
9G-JXXQEPPTM9
vendor: 20 bytes, lines 9-10
9"></script> 10
10<script> 11
vendor: 152 bytes, lines 11-15
11window.dataLayer = window.dataLayer || []; 12 function gtag(){dataLayer.push(arguments);} 13 gtag('js', new Date()); 14 15 gtag('config', '
15G-JXXQEPPTM9
vendor: 12 bytes, lines 15-16
15'); 16
16</script>
16 17 18 <meta charset="UTF-8"> 19 20 <meta 21 http-equiv="X-UA-Compatible" 22 content="IE=edge" 23 > 24 25 <meta 26 name="viewport" 27 content="width=device-width, initial-scale=1.0" 28 > 29 30 <title>Automated link previews for your site â PreviewLinks</title> 31 <meta property="og:title" content="Automated link previews for your site â PreviewLinks" /> 32 33 34 <meta property="og:description" content="Save more time and money by automating your link previews on socials using PreviewLinks. No need for designers, Just plug and play." /> 35 <meta name="description" content="Save more time and money by automating your link previews on socials using PreviewLinks. No need for designers, Just plug and play." /> 36 37<meta property="og:type" content="website" /> 38 39 <meta property="og:site_name" content="Automated link previews for your site â PreviewLinks"> 40 <meta property="og:image" content="https://previewlinks.io/generate/templates/828/signed?fields=eyJwcmV2aWV3bGlua3M6dGl0bGUiOiJFYXNpbHkgZ2VuZXJhdGUgbGluayBwcmV2aWV3cyBsaWtlIHRoaXMgb25lIFx1MjcyOCIsInByZXZpZXdsaW5rczppbWFnZSI6Imh0dHBzOlwvXC9wcmV2aWV3bGlua3MuaW9cL2Fzc2V0c1wvdHlwb2dyYXBoeS1sb2dvLXdoaXRlLnN2ZyJ9&signature=59aacffb681408e625ced318f05f9bba4f0174b0c38d8bf2019f9e08475edc47" /> 41 <meta property="og:url" content="https://previewlinks.io" /> 42 <link rel="canonical" href="https://previewlinks.io" /> 43 44 45 <meta name="twitter:card" content="summary_large_image"> 46 <meta name="twitter:site" content="@previewify"> <meta name="twitter:title" content="Automated link previews for your site â PreviewLinks"> <meta name="twitter:description" content="Save more time and money by automating your link previews on socials using PreviewLinks. No need for designers, Just plug and play."> <meta name="twitter:image" content="https://previewlinks.io/generate/templates/828/signed?fields=eyJwcmV2aWV3bGlua3M6dGl0bGUiOiJFYXNpbHkgZ2VuZXJhdGUgbGluayBwcmV2aWV3cyBsaWtlIHRoaXMgb25lIFx1MjcyOCIsInByZXZpZXdsaW5rczppbWFnZSI6Imh0dHBzOlwvXC9wcmV2aWV3bGlua3MuaW9cL2Fzc2V0c1wvdHlwb2dyYXBoeS1sb2dvLXdoaXRlLnN2ZyJ9&signature=59aacffb681408e625ced318f05f9bba4f0174b0c38d8bf2019f9e08475edc47" /> <link rel="icon" type="image/x-icon" href="https://previewlinks.io/favicon.ico"> 47<link rel="icon" type="image/png" href="https://previewlinks.io/favicon.png"> 48 49 <style> 50 [x-cloak] { 51 display: none !important; 52 } 53 54 </style> 55 56 57 <style >/* vietnamese */ 58@font-face { 59 font-family: 'Be Vietnam Pro'; 60 font-style: normal; 61 font-weight: 400; 62 font-display: swap; 63 src: url(https://previewlinks.on-forge.com/storage/fonts/a1abb9beed/sbevietnamprov12qdvpstaylfyeg-idwvojmves-hw4bxoyz7ajsh8.woff2) format('woff2'); 64 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; 65} 66/* latin-ext */ 67@font-face { 68 font-family: 'Be Vietnam Pro'; 69 font-style: normal; 70 font-weight: 400; 71 font-display: swap; 72 src: url(https://previewlinks.on-forge.com/storage/fonts/a1abb9beed/sbevietnamprov12qdvpstaylfyeg-idwvojmves-hw5bxoyz7ajsh8.woff2) format('woff2'); 73 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; 74} 75/* latin */ 76@font-face { 77 font-family: 'Be Vietnam Pro'; 78 font-style: normal; 79 font-weight: 400; 80 font-display: swap; 81 src: url(https://previewlinks.on-forge.com/storage/fonts/a1abb9beed/sbevietnamprov12qdvpstaylfyeg-idwvojmves-hw3bxoyz7aj.woff2) format('woff2'); 82 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 83} 84/* vietnamese */ 85@font-face { 86 font-family: 'Be Vietnam Pro'; 87 font-style: normal; 88 font-weight: 500; 89 font-display: swap; 90 src: url(https://previewlinks.on-forge.com/storage/fonts/a1abb9beed/sbevietnamprov12qdvmstaylfyeg-idwvojmves-htejm86rb0jcbaouuu.woff2) format('woff2'); 91 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; 92} 93/* latin-ext */ 94@font-face { 95 font-family: 'Be Vietnam Pro'; 96 font-style: normal; 97 font-weight: 500; 98 font-display: swap; 99 src: url(https://previewlinks.on-forge.com/storage/fonts/a1abb9beed/sbevietnamprov12qdvmstaylfyeg-idwvojmves-htejm87rb0jcbaouuu.woff2) format('woff2'); 100 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1D
100BF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; 101} 102/* latin */ 103@font-face { 104 font-family: 'Be Vietnam Pro'; 105 font-style: normal; 106 font-weight: 500; 107 font-display: swap; 108 src: url(https://previewlinks.on-forge.com/storage/fonts/a1abb9beed/sbevietnamprov12qdvmstaylfyeg-idwvojmves-htejm81rb0jcbao.woff2) format('woff2'); 109 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 110} 111/* vietnamese */ 112@font-face { 113 font-family: 'Be Vietnam Pro'; 114 font-style: normal; 115 font-weight: 700; 116 font-display: swap; 117 src: url(https://previewlinks.on-forge.com/storage/fonts/a1abb9beed/sbevietnamprov12qdvmstaylfyeg-idwvojmves-hsmig86rb0jcbaouuu.woff2) format('woff2'); 118 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; 119} 120/* latin-ext */ 121@font-face { 122 font-family: 'Be Vietnam Pro'; 123 font-style: normal; 124 font-weight: 700; 125 font-display: swap; 126 src: url(https://previewlinks.on-forge.com/storage/fonts/a1abb9beed/sbevietnamprov12qdvmstaylfyeg-idwvojmves-hsmig87rb0jcbaouuu.woff2) format('woff2'); 127 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; 128} 129/* latin */ 130@font-face { 131 font-family: 'Be Vietnam Pro'; 132 font-style: normal; 133 font-weight: 700; 134 font-display: swap; 135 src: url(https://previewlinks.on-forge.com/storage/fonts/a1abb9beed/sbevietnamprov12qdvmstaylfyeg-idwvojmves-hsmig81rb0jcbao.woff2) format('woff2'); 136 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 137} 138/* latin-ext */ 139@font-face { 140 font-family: 'DM Mono'; 141 font-style: normal; 142 font-weight: 400; 143 font-display: swap; 144 src: url(https://previewlinks.on-forge.com/storage/fonts/a1abb9beed/sdmmonov16aftu7pb1qtsux8kythsqbk6pyk3exw.woff2) format('woff2'); 145 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; 146} 147/* latin */ 148@font-face { 149 font-family: 'DM Mono'; 150 font-style: normal; 151 font-weight: 400; 152 font-display: swap; 153 src: url(https://previewlinks.on-forge.com/storage/fonts/a1abb9beed/sdmmonov16aftu7pb1qtsux8kythqqbk6pyk0.woff2) format('woff2'); 154 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 155} 156</style> 157 <link 158 rel="stylesheet" 159 href="/css/app.css?id=5bac4e00b07e674d67a2" 160 > 161 162
162<script 163 src="/js/marketing.js?id=d092cb6bc4f923b71312" 164 defer 165 ></script>
165 166</head> 167 168<body class="font-sans antialiased text-black"> 169 <div class="flex flex-col min-h-screen"> 170 <header 171 class="sticky top-0 z-30 ring-1 text-white bg-rose-500 ring-white/10 opacity-90" 172 x-data="{ open: false }" 173 > 174 <div class="container"> 175 <nav class="flex flex-col gap-4 py-4 sm:gap-6 md:items-center md:flex-row"> 176 <div class="flex justify-between"> 177 <a 178 class="inline-flex items-center gap-2 text-lg font-bold tracking-tighter" 179 href="https://previewlinks.io" 180 > 181 <svg 182 class="h-5" 183 xmlns="http://www.w3.org/2000/svg" 184 viewBox="0 0 277 320" 185 > 186 <path 187 d="M276.958 109.946v100.62l-94.395 54.454-86.612-49.789 54.457-31.635 40.453-23.336-9.854-5.705-94.39-54.979h-.52V0l182.045 104.767 8.816 5.179ZM0 50.307v219.905L86.097 320V100.095L0 50.307Z" 188 fill="currentColor" 189 /> 190 </svg> 191 192 <span>PreviewLinks</span> 193 </a> 194 195 <button 196 title="Open and close menu" 197 x-on:click="open = !open" 198 class="gap-2 md:hidden button button-small button-secondary-white" 199 > 200 <span>Menu</span> 201 202 <svg 203 xmlns="http://www.w3.org/2000/svg" 204 class="w-5 h-5"
205 viewBox="0 0 20 20" 206 fill="currentColor" 207 > 208 <path 209 fill-rule="evenodd" 210 d="M3 7a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 13a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" 211 clip-rule="evenodd" 212 /> 213 </svg> 214 </button> 215 </div> 216 217 <div 218 class="flex-col justify-between hidden w-full gap-6 md:flex md:flex-row" 219 x-bind:class="{ 220 'flex': open, 221 'hidden': !open, 222 }" 223 > 224 <ul class="flex flex-col gap-6 text-sm font-medium md:items-center md:flex-row"> 225 226 227 228 229 <li> 230 <a 231 class="transition hover:opacity-60" 232 href="https://previewlinks.io/integrations" 233 >Integrations</a> 234 </li> 235 236 <li> 237 <a 238 class="transition hover:opacity-60" 239 href="https://previewlinks.io/pricing" 240 >Pricing</a> 241 </li> 242 243 <li> 244 <a 245 class="transition hover:opacity-60" 246 href="https://previewlinks.io/blog" 247 >Blog</a> 248 </li> 249 </ul> 250 251 <ul class="flex items-center gap-3"> 252 <li> 253 <a 254 class="button button-small button-secondary-white" 255 href="https://previewlinks.io/app/login" 256 >Sign in</a> 257 </li> 258 259 <li> 260 <a 261 class="button button-aqua button-small" 262 href="https://previewlinks.io/app/register" 263 >Sign up for free</a> 264 </li> 265 </ul> 266 </div> 267 </nav> 268 </div> 269 </header> 270 271 <section class="relative py-12 text-white bg-rose-400 md:py-24"> 272 <img 273 src="https://previewlinks.io/assets/gradient.png" 274 class="absolute inset-0 bottom-0 w-full h-full opacity-60" 275 alt="" 276 > 277 278 <div class="container relative"> 279 <header class="flex flex-col items-center text-center"> 280 <h1 class="text-3xl font-bold tracking-tighter md:text-5xl lg:text-7xl"> 281 1,000<span class="text-xl">s</span> more clicks <br> with Automated Link Previews! 282 </h1> 283 284 <p class="max-w-3xl mt-6 text-lg font-medium md:text-xl lg:text-2xl"> 285 Say goodbye to Canva! Create a template, integrate it into your site once, and focus on creating great content. 286 </p> 287 288 <a 289 class="mt-6 button md:button-large button-aqua" 290 href="https://previewlinks.io/app/register" 291 >Try PreviewLinks free for 7 days</a> 292 </header> 293 294 <div x-data="{ currentDiv: 1, interval: null }" x-intersect.threshold.50="interval = setInterval(() => { currentDiv = currentDiv === 3 ? 1 : currentDiv + 1 }, 5000)" x-intersect:leave="clearInterval(interval);"> 295 <ul x-show.transition.in="currentDiv === 1" class="grid items-center justify-center md:grid-cols-[1fr,auto,1fr] gap-6 mt-12 md:mt-24"> 296 <li> 297 <div 298 class="overflow-hidden shadow-xl bg-black/30 backdrop-blur-xl backdrop-saturate-150 rounded-xl ring-1 ring-white/10 shadow-black/25"> 299 <div class="aspect-[1.91/1] flex items-center justify-center"> 300 <svg 301 xmlns="http://www.w3.org/2000/svg" 302 class="w-12 h-12 text-white/10" 303 fill="none"
304 viewBox="0 0 24 24" 305 stroke="currentColor" 306 > 307 <path 308 stroke-linecap="round" 309 stroke-linejoin="round" 310 stroke-width="1.5" 311 d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" 312 /> 313 </svg> 314 </div> 315 316 <div class="p-6 border-t border-white/10"> 317 <div class="text-xs font-medium tracking-wider uppercase text-white/60"> 318 example.com 319 </div> 320 321 <div class="mt-1.5 text-xl font-bold tracking-tight"> 322 No automated link previews 323 </div> 324 325 <div class="text-white/60"> 326 Less clicks, less conversion, less brand recognition 327 </div> 328 </div> 329 </div> 330 </li> 331 332 <li class="flex flex-col items-center justify-center text-3xl font-bold tracking-tighter"> 333 <div class="flex my-2">CTA 334 <div class="h-full mx-auto ml-3"> 335 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 mx-auto text-green-200"> 336 <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" /> 337 </svg> 338 </div> 339 </div> 340 <svg 341 xmlns="http://www.w3.org/2000/svg" 342 class="w-12 h-12 rotate-90 text-white/25 md:rotate-0" 343 fill="none"
344 viewBox="0 0 24 24" 345 stroke="currentColor" 346 > 347 <path 348 stroke-linecap="round" 349 stroke-linejoin="round" 350 stroke-width="1.5" 351 d="M14 5l7 7m0 0l-7 7m7-7H3" 352 /> 353 </svg> 354 </li> 355 356 <li> 357 <div 358 class="overflow-hidden shadow-xl bg-black/30 backdrop-blur-xl backdrop-saturate-150 rounded-xl ring-1 ring-white/10 shadow-black/25"> 359 <div class="aspect-[1.91/1] flex items-center justify-center relative"> 360 <img 361 src="https://previewlinks.io/assets/previews/hero.jpg" 362 alt="Example preview" 363 class="absolute inset-0 object-cover w-full h-full" 364 > 365 </div> 366 367 <div class="p-6 border-t border-white/10"> 368 <div class="text-xs font-medium tracking-wider uppercase text-white/60"> 369 example.com 370 </div> 371 372 <div class="mt-1.5 text-xl font-bold tracking-tight"> 373 Automated link previews 374 </div> 375 376 <div class="text-white/60"> 377 More clicks, more conversion, more brand recognition 378 </div> 379 </div> 380 </div> 381 </li> 382 </ul> 383 <ul x-show.transition.in="currentDiv === 2" class="grid items-center justify-center md:grid-cols-[1fr,auto,1fr] gap-6 mt-12 md:mt-24"> 384 <li> 385 <img class="relative h-auto max-w-full mx-auto pointer-events-none md:max-w-none" src="https://previewlinks.io/assets/mockups/iphone.png" width="344" height="674" alt="iPhone mockup" aria-hidden="true"> 386 </li> 387 <li class="flex flex-col items-center justify-center text-3xl font-bold tracking-tighter"> 388 <span class="my-2 w-[183px] mx-auto text-center">On Messaging</span> 389 <svg 390 xmlns="http://www.w3.org/2000/svg" 391 class="w-12 h-12 rotate-90 text-white/25 md:rotate-0" 392 fill="none"
393 viewBox="0 0 24 24" 394 stroke="currentColor" 395 > 396 <path 397 stroke-linecap="round" 398 stroke-linejoin="round" 399 stroke-width="1.5" 400 d="M14 5l7 7m0 0l-7 7m7-7H3" 401 /> 402 </svg> 403 </li> 404 <li> 405 <img class="relative h-auto max-w-full mx-auto pointer-events-none md:max-w-none" src="https://previewlinks.io/assets/mockups/iphone.png" width="344" height="674" alt="iPhone mockup" aria-hidden="true"> 406 </li> 407 </ul> 408 <ul x-show.transition.in="currentDiv === 3" class="grid items-center justify-center md:grid-cols-[1fr,auto,1fr] gap-6 mt-12 md:mt-24"> 409 <li> 410 <img class="relative h-auto max-w-full mx-auto rounded-lg pointer-events-none md:max-w-none" src="https://previewlinks.io/assets/mockups/iphone.png" width="344" height="674" alt="iPhone mockup" aria-hidden="true"> 411 </li> 412 <li class="flex flex-col items-center justify-center text-3xl font-bold tracking-tighter"> 413 <span class="my-2 w-[183px] mx-auto text-center">On Social</span> 414 <svg 415 xmlns="http://www.w3.org/2000/svg" 416 class="w-12 h-12 rotate-90 text-white/25 md:rotate-0" 417 fill="none"
418 viewBox="0 0 24 24" 419 stroke="currentColor" 420 > 421 <path 422 stroke-linecap="round" 423 stroke-linejoin="round" 424 stroke-width="1.5" 425 d="M14 5l7 7m0 0l-7 7m7-7H3" 426 /> 427 </svg> 428 </li> 429 <li> 430 <img class="relative h-auto max-w-full mx-auto rounded-lg pointer-events-none md:max-w-none" src="https://previewlinks.io/assets/mockups/iphone.png" width="344" height="674" alt="iPhone mockup" aria-hidden="true"> 431 </li> 432 </ul> 433 </div> 434 </div> 435 </section> 436 <section class="my-12 md:my-24"> 437 <div class="container space-y-12 md:space-y-24"> 438 <header class="flex flex-col items-start"> 439 <p class="md:text-xl font-bold tracking-tight text-aqua">Benefits</p> 440 441 <h2 class="max-w-4xl mt-6 text-3xl font-bold tracking-tighter md:text-5xl lg:text-6xl"> 442 Accelerate your blog growth? 443 444 <span class="block text-black/40"> 445 Start with automating link previews. 446 </span> 447 </h2> 448 449 <p class="max-w-3xl mt-6 text-lg font-medium md:text-xl lg:text-2xl text-black/60"> 450 Maximize your online presence with engaging link previews! Attract attention and drive clicks in social feeds and chats. 451 </p> 452 453 454</header> 455 456 <ul class="grid gap-12 md:grid-cols-3"> 457 <li> 458 <div 459 class="flex items-center justify-center w-12 h-12 bg-white shadow-lg text-aqua rounded-xl ring-1 ring-black/5 shadow-black/10"> 460 <svg 461 xmlns="http://www.w3.org/2000/svg" 462 class="w-5 h-5 drop-shadow"
463 viewBox="0 0 20 20" 464 fill="currentColor" 465 > 466 <path 467 fill-rule="evenodd" 468 d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z" 469 clip-rule="evenodd" 470 /> 471 </svg> 472 </div> 473 474 <h3 class="mt-6 text-2xl font-bold tracking-tighter"> 475 Increase your CTR 476 </h3> 477 478 <p class="mt-1.5 text-black/60 text-lg"> 479 Your audience is more likely to click your links if they have previews containing info about 480 your page. 481 </p> 482 </li> 483 484 <li> 485 <div 486 class="flex items-center justify-center w-12 h-12 bg-white shadow-lg text-floral rounded-xl ring-1 ring-black/5 shadow-black/10"> 487 <svg 488 xmlns="http://www.w3.org/2000/svg" 489 class="w-5 h-5 drop-shadow"
490 viewBox="0 0 20 20" 491 fill="currentColor" 492 > 493 <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" /> 494 <path 495 fill-rule="evenodd" 496 d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" 497 clip-rule="evenodd" 498 /> 499 </svg> 500 </div> 501 502 <h3 class="mt-6 text-2xl font-bold tracking-tighter"> 503 Grow your brand 504 </h3> 505 506 <p class="mt-1.5 text-black/60 text-lg"> 507 People will always scan your link previews, having a branded one will increase familiarity and 508 trust. 509 </p> 510 </li> 511 512 <li> 513 <div 514 class="flex items-center justify-center w-12 h-12 bg-white shadow-lg text-mango rounded-xl ring-1 ring-black/5 shadow-black/10"> 515 <svg 516 xmlns="http://www.w3.org/2000/svg" 517 class="w-5 h-5 drop-shadow"
518 viewBox="0 0 20 20" 519 fill="currentColor" 520 > 521 <path 522 fill-rule="evenodd" 523 d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 01-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 110-2h4a1 1 0 011 1v4a1 1 0 11-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 112 0v1.586l2.293-2.293a1 1 0 011.414 1.414L6.414 15H8a1 1 0 110 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 110-2h1.586l-2.293-2.293a1 1 0 011.414-1.414L15 13.586V12a1 1 0 011-1z" 524 clip-rule="evenodd" 525 /> 526 </svg> 527 </div> 528 529 <h3 class="mt-6 text-2xl font-bold tracking-tighter"> 530 We scale with you 531 </h3> 532 533 <p class="mt-1.5 text-black/60 text-lg"> 534 We handle the generation and storage of the images, you focus on what you do best. 535 </p> 536 </li> 537 538 <li> 539 <div 540 class="flex items-center justify-center w-12 h-12 bg-white shadow-lg text-floral rounded-xl ring-1 ring-black/5 shadow-black/10"> 541 <svg 542 xmlns="http://www.w3.org/2000/svg" 543 class="w-5 h-5 drop-shadow"
544 viewBox="0 0 20 20" 545 fill="currentColor" 546 > 547 <path 548 fill-rule="evenodd" 549 d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm1 8a1 1 0 100 2h6a1 1 0 100-2H7z" 550 clip-rule="evenodd" 551 /> 552 </svg> 553 </div> 554 555 <h3 class="mt-6 text-2xl font-bold tracking-tighter"> 556 No more files and versions 557 </h3> 558 559 <p class="mt-1.5 text-black/60 text-lg"> 560 "Where's that FinalPreviewV2.psd?" is now past time. Work directly inside your new online 561 environment. 562 </p> 563 </li> 564 565 <li> 566 <div 567 class="flex items-center justify-center w-12 h-12 bg-white shadow-lg text-mango rounded-xl ring-1 ring-black/5 shadow-black/10"> 568 <svg 569 xmlns="http://www.w3.org/2000/svg" 570 class="w-5 h-5 drop-shadow"
571 viewBox="0 0 20 20" 572 fill="currentColor" 573 > 574 <path 575 fill-rule="evenodd" 576 d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" 577 clip-rule="evenodd" 578 /> 579 </svg> 580 </div> 581 582 <h3 class="mt-6 text-2xl font-bold tracking-tighter"> 583 No more hassling with images 584 </h3> 585 586 <p class="mt-1.5 text-black/60 text-lg"> 587 There's no need to export and upload images to your CMS. Just integrate PreviewLinks once and 588 we'll do the rest. 589 </p> 590 </li> 591 592 <li> 593 <div 594 class="flex items-center justify-center w-12 h-12 bg-white shadow-lg text-aqua rounded-xl ring-1 ring-black/5 shadow-black/10"> 595 <svg 596 xmlns="http://www.w3.org/2000/svg" 597 class="w-5 h-5 drop-shadow"
598 viewBox="0 0 20 20" 599 fill="currentColor" 600 > 601 <path 602 d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" 603 /> 604 <path 605 fill-rule="evenodd" 606 d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" 607 clip-rule="evenodd" 608 /> 609 </svg> 610 </div> 611 612 <h3 class="mt-6 text-2xl font-bold tracking-tighter"> 613 Save time, save money 614 </h3> 615 616 <p class="mt-1.5 text-black/60 text-lg"> 617 PreviewLinks.io is designed to save you time and money. With our tool, you won't have to manually do this work anymore. 618 </p> 619 </li> 620 </ul> 621 622 <blockquote class="flex flex-col items-center"> 623 <p class="max-w-4xl text-xl font-medium text-center md:text-2xl lg:text-3xl text-quoted">Adding PreviewLinks to the Tenancy documentation was super straightforward. Now all pages have a 624 beautiful preview on social media, with no extra work</p> 625 626 <footer class="flex items-center gap-3 mt-6 md:mt-12"> 627 <img 628 class="flex-shrink-0 w-12 h-12 border rounded-full border-black/10" 629 src="https://previewlinks.io/assets/testimonials/samuel.png" 630 alt="Samuel Å tancl" 631 loading="lazy" 632 > 633 634 <a 635 href="http://archte.ch/?ref=previewlinks.io" 636 target="_blank" 637 class="inline-block font-bold tracking-tight" 638 > 639 <p>Samuel Å tancl</p> 640 <p class="font-medium text-black/60">Founder of ArchTech</p> 641 </a> 642 </footer> 643</blockquote> 644 </div> 645</section> 646 <hr class="relative w-full mx-auto border-t max-w-7xl border-black/5" /> 647 <section class="my-12 md:my-24"> 648 <div class="container space-y-12 md:space-y-24"> 649 <header class="flex flex-col items-start"> 650 <p class="md:text-xl font-bold tracking-tight text-mango">The editor</p> 651 652 <h2 class="max-w-4xl mt-6 text-3xl font-bold tracking-tighter md:text-5xl lg:text-6xl"> 653 Design made easy. 654 655 <span class="block text-black/40"> 656 Create templates without the need of a designer. 657 </span> 658 </h2> 659 660 <p class="max-w-3xl mt-6 text-lg font-medium md:text-xl lg:text-2xl text-black/60"> 661 Our editor is easy to use and doesn't require an additional designer in your team to use. We stay on 662 top of the design trends and provide you customizable layouts. 663 </p> 664 665 666</header> 667 668 <div x-data="Tabs({ 669 activeClass: 'text-white drop-shadow' 670 })"> 671 <nav class="relative overflow-auto"> 672 <div 673 class="absolute h-10 transition-all duration-300 rounded-full bg-mango" 674 x-ref="indicator" 675 ></div> 676 677 <ul 678 class="relative flex items-center gap-2 flex-nowrap" 679 x-ref="buttons" 680 > 681 <li class="flex-shrink-0"> 682 <button 683 class="inline-block px-4 py-2 font-bold tracking-tight transition duration-300 rounded-full hover:bg-black/5" 684 x-bind="button(0)" 685 >Design</button> 686 </li> 687 <li class="flex-shrink-0"> 688 <button 689 class="inline-block px-4 py-2 font-bold tracking-tight transition duration-300 rounded-full hover:bg-black/5" 690 x-bind="button(1)" 691 >Playground</button> 692 </li> 693 <li class="flex-shrink-0"> 694 <button 695 class="inline-block px-4 py-2 font-bold tracking-tight transition duration-300 rounded-full hover:bg-black/5" 696 x-bind="button(2)" 697 >Integrate</button> 698 </li> 699 <li class="flex-shrink-0"> 700 <button 701 class="inline-block px-4 py-2 font-bold tracking-tight transition duration-300 rounded-full hover:bg-black/5" 702 x-bind="button(3)" 703 >Share</button> 704 </li> 705 </ul> 706 </nav> 707 708 <figure class="p-6 mt-6 rounded-xl bg-mango"> 709 <video 710 class="object-cover aspect-[20/11] w-full h-full rounded-md shadow-xl ring-1 ring-black/10 shadow-black/10" 711 autoplay 712 muted 713 loop 714 x-bind:src="JSON.parse('[\u0022https:\\\/\\\/previewlinks.io\\\/assets\\\/videos\\\/design.mp4\u0022,\u0022https:\\\/\\\/previewlinks.io\\\/assets\\\/videos\\\/playground.mp4\u0022,\u0022https:\\\/\\\/previewlinks.io\\\/assets\\\/videos\\\/integrate.mp4\u0022,\u0022https:\\\/\\\/previewlinks.io\\\/assets\\\/videos\\\/share.mp4\u0022]')[activeIndex]" 715 ></video> 716 </figure> 717 </div> 718 719 <blockquote class="flex flex-col items-center"> 720 <p class="max-w-4xl text-xl font-medium text-center md:text-2xl lg:text-3xl text-quoted">PreviewLinks made it possible to create the most beautiful previews with little design experience, 721 integrating it with my website 722 was incredibly simple</p> 723 724 <footer class="flex items-center gap-3 mt-6 md:mt-12"> 725 <img 726 class="flex-shrink-0 w-12 h-12 border rounded-full border-black/10" 727 src="https://previewlinks.io/assets/testimonials/sebastiaan.jpeg" 728 alt="Sebastiaan Kloos" 729 loading="lazy" 730 > 731 732 <a 733 href="https://codecycler.dev?ref=previewlinks.io" 734 target="_blank" 735 class="inline-block font-bold tracking-tight" 736 > 737 <p>Sebastiaan Kloos</p> 738 <p class="font-medium text-black/60">Founder of Codecycler</p> 739 </a> 740 </footer> 741</blockquote> 742 </div> 743 </section> 744 745 <section class="py-12 md:py-24 bg-candy"> 746 <div class="container space-y-12 md:space-y-24"> 747 <header class="flex flex-col items-start"> 748 <p class="md:text-xl font-bold tracking-tight text-black/75">Integrate</p> 749 750 <h2 class="max-w-4xl mt-6 text-3xl font-bold tracking-tighter md:text-5xl lg:text-6xl"> 751 Automate everything. 752
753 <span class="block text-black/40"> 754 From WordPress to Next.js. 755 </span> 756 </h2> 757 758 <p class="max-w-3xl mt-6 text-lg font-medium md:text-xl lg:text-2xl text-black/60"> 759 Let your users select sites and templates from their CMS, and load data into their templates. Setup 760 once, 761 automate forever. 762 </p> 763 764 <a 765 class="mt-6 button md:button-large button-white" 766 href="https://previewlinks.io/integrations" 767 >Browse integrations</a> 768</header> 769 770 <div 771 x-data="Tabs({ 772 activeClass: 'text-black drop-shadow' 773 })" 774 class="overflow-hidden text-white bg-black shadow-xl rounded-xl ring-1 ring-black/5 shadow-black/10" 775> 776 <nav class="relative p-2"> 777 <div 778 class="absolute h-10 transition-all duration-300 rounded-full bg-candy" 779 x-ref="indicator" 780 ></div> 781 782 <ul 783 class="relative flex items-center gap-2" 784 x-ref="buttons" 785 > 786 <li> 787 <button 788 class="inline-block px-4 py-2 font-bold tracking-tight duration-300 rounded-full transtion hover:bg-white/10" 789 x-bind="button(0)" 790 >Node.js</button> 791 </li> 792 <li> 793 <button 794 class="inline-block px-4 py-2 font-bold tracking-tight duration-300 rounded-full transtion hover:bg-white/10" 795 x-bind="button(1)" 796 >HTML</button> 797 </li> 798 <li> 799 <button 800 class="inline-block px-4 py-2 font-bold tracking-tight duration-300 rounded-full transtion hover:bg-white/10" 801 x-bind="button(2)" 802 >PHP</button> 803 </li> 804 <li> 805 <button 806 class="inline-block px-4 py-2 font-bold tracking-tight duration-300 rounded-full transtion hover:bg-white/10" 807 x-bind="button(3)" 808 >Next.js</button> 809 </li> 810 </ul> 811 </nav> 812 813 <div class="border-t border-white/10"> 814 <ul class="p-6 overflow-auto"> 815 <li x-bind="content(0)"> 816 <pre><code><pre class="shiki" style="background-color: #0d1117"><code><span class="line"><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> { </span><span style="color: #79C0FF">PreviewLinks</span><span style="color: #C9D1D9"> } </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">require</span><span style="color: #C9D1D9">(</span><span style="color: #A5D6FF">'@previewlinks/node-preview-links'</span><span style="color: #C9D1D9">)</span></span> 817<span class="line"></span> 818<span class="line"><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">previewLinks</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">new</span><span style="color: #C9D1D9"> </span><span style="color: #D2A8FF">PreviewLinks</span><span style="color: #C9D1D9">({ apiToken: </span><span style="color: #A5D6FF">'<YOUR_API_TOKEN>'</span><span style="color: #C9D1D9"> })</span></span> 819<span class="line"></span> 820<span class="line"><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">url</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> previewLinks.</span><span style="color: #D2A8FF">signedImageUrl</span><span style="color: #C9D1D9">({</span></span> 821<span class="line"><span style="color: #C9D1D9"> siteId: </span><span style="color: #79C0FF">167</span><span style="color: #C9D1D9">,</span></span> 822<span class="line"><span style="color: #C9D1D9"> templateId: </span><span style="color: #79C0FF">234</span><span style="color: #C9D1D9">,</span></span> 823<span class="line"><span style="color: #C9D1D9"> fields: {</span></span> 824<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">'previewlinks:title'</span><span style="color: #C9D1D9">: </span><span style="color: #A5D6FF">'Hello from Node.js!'</span><span style="color: #C9D1D9">,</span></span> 825<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">'previewlinks:subtitle'</span><span style="color: #C9D1D9">: </span><span style="color: #A5D6FF">'This is an example...'</span><span style="color: #C9D1D9">,</span></span> 826<span class="line"><span style="color: #C9D1D9"> },</span></span> 827<span class="line"><span style="color: #C9D1D9">})</span></span> 828<span class="line"></span></code></pre></code></pre> 829 </li> 830 <li x-bind="content(1)"> 831 <pre><code><pre class="shiki" style="background-color: #0d1117"><code><span class="line"><span style="color: #C9D1D9"><!</span><span style="color: #7EE787">DOCTYPE</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">html</span><span style="color: #C9D1D9">></span></span> 832<span class="line"><span style="color: #C9D1D9"><</span><span style="color: #7EE787">html</span><span style="color: #C9D1D9">></span></span> 833<span class="line"><span style="color: #C9D1D9"> <</span><span style="color: #7EE787">head</span><span style="color: #C9D1D9">></span></span> 834<span class="line"><span style="color: #C9D1D9"> <</span><span style="color: #7EE787">meta</span></span> 835<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">property</span><span style="color: #C9D1D9">=</span><span style="color: #A5D6FF">"og:image"</span></span> 836<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">content</span><span style="color: #C9D1D9">=</span><span style="color: #A5D6FF">"https://previewlinks.io/generate/templates/719/meta?url=https://example.com"</span></span> 837<span class="line"><span style="color: #C9D1D9"> /></span></span> 838<span class="line"></span> 839<span class="line"><span style="color: #C9D1D9"> <</span><span style="color: #7EE787">meta</span></span> 840<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">name</span><span style="color: #C9D1D9">=</span><span style="color: #A5D6FF">"twitter:image"</span></span> 841<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">content</span><span style="color: #C9D1D9">=</span><span style="color: #A5D6FF">"https://previewlinks.io/generate/templates/719/meta?url=https://example.com"</span></span> 842<span class="line"><span style="color: #C9D1D9"> /></span></span> 843<span class="line"></span> 844<span class="line"><span style="color: #C9D1D9"> <</span><span style="color: #7EE787">meta</span></span> 845<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">name</span><span style="color: #C9D1D9">=</span><span style="color: #A5D6FF">"previewlinks:title"</span></span> 846<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">content</span><span style="color: #C9D1D9">=</span><span style="color: #A5D6FF">"Finally, a scheduling tool that just works"</span></span> 847<span class="line"><span style="color: #C9D1D9"> /></span></span> 848<span class="line"></span> 849<span class="line"><span style="color: #C9D1D9"> <</span><span style="color: #7EE787">meta</span></span> 850<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">name</span><span style="color: #C9D1D9">=</span><span style="color: #A5D6FF">"previewlinks:image"</span></span> 851<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">content</span><span style="color: #C9D1D9">=</span><span style="color: #A5D6FF">"https://previewlinks.io/assets/logo.svg"</span></span> 852<span class="line"><span style="color: #C9D1D9"> /></span></span> 853<span class="line"><span style="color: #C9D1D9"> </</span><span style="color: #7EE787">head</span><span style="color: #C9D1D9">></span></span> 854<span class="line"><span style="color: #C9D1D9"></</span><span style="color: #7EE787">html</span><span style="color: #C9D1D9">></span></span> 855<span class="line"></span></code></pre></code></pre> 856 </li> 857 <li x-bind="content(2)"> 858 <pre><code><pre class="shiki" style="background-color: #0d1117"><code><span class="line"><span style="color: #FF7B72"><?</span><span style="color: #79C0FF">php</span></span> 859<span class="line"></span> 860<span class="line"><span style="color: #FF7B72">
860use</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">PreviewLinks\PreviewLinks</span><span style="color: #C9D1D9">;</span></span> 861<span class="line"></span> 862<span class="line"><span style="color: #C9D1D9">$previewLinks </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">new</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">PreviewLinks</span><span style="color: #C9D1D9">(</span><span style="color: #A5D6FF">'<YOUR_SITE_API_KEY>'</span><span style="color: #C9D1D9">);</span></span> 863<span class="line"></span> 864<span class="line"><span style="color: #C9D1D9">$url </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> $previewLinks</span><span style="color: #FF7B72">-></span><span style="color: #D2A8FF">asyncImage</span><span style="color: #C9D1D9">(</span></span> 865<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #FFA657">templateId</span><span style="color: #C9D1D9">: </span><span style="color: #79C0FF">163</span><span style="color: #C9D1D9">,</span></span> 866<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #FFA657">fields</span><span style="color: #C9D1D9">: [</span></span> 867<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">'previewlinks:title'</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=></span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">'Hello from PHP SDK'</span><span style="color: #C9D1D9">,</span></span> 868<span class="line"><span style="color: #C9D1D9"> ],</span></span> 869<span class="line"><span style="color: #C9D1D9">);</span></span> 870<span class="line"></span> 871<span class="line"><span style="color: #FF7B72">return</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF"><<<</span><span style="color: #FF7B72">HTML</span></span> 872<span class="line"><span style="color: #A5D6FF"> <</span><span style="color: #7EE787">meta</span><span style="color: #A5D6FF"> </span><span style="color: #79C0FF">name</span><span style="color: #A5D6FF">=</span><span style="color: #A5D6FF">"twitter:image"</span><span style="color: #A5D6FF"> </span><span style="color: #79C0FF">content</span><span style="color: #A5D6FF">=</span><span style="color: #A5D6FF">"{$url}"</span><span style="color: #A5D6FF"> /></span></span> 873<span class="line"><span style="color: #FF7B72">HTML</span><span style="color: #C9D1D9">;</span></span> 874<span class="line"></span></code></pre></code></pre> 875 </li> 876 <li x-bind="content(3)"> 877 <pre><code><pre class="shiki" style="background-color: #0d1117"><code><span class="line"><span style="color: #FF7B72">export</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">async</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">function</span><span style="color: #C9D1D9"> </span><span style="color: #D2A8FF">getServerSideProps</span><span style="color: #C9D1D9">(</span><span style="color: #FFA657">context</span><span style="color: #C9D1D9">) {</span></span> 878<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">preview</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> previewLinks.</span><span style="color: #D2A8FF">signedImageUrl</span><span style="color: #C9D1D9">({</span></span> 879<span class="line"><span style="color: #C9D1D9"> siteId: </span><span style="color: #79C0FF">167</span><span style="color: #C9D1D9">,</span></span> 880<span class="line"><span style="color: #C9D1D9"> templateId: </span><span style="color: #79C0FF">234</span><span style="color: #C9D1D9">,</span></span> 881<span class="line"><span style="color: #C9D1D9"> fields: {</span></span> 882<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">'previewlinks:title'</span><span style="color: #C9D1D9">: </span><span style="color: #A5D6FF">'Hello from Node.js!'</span><span style="color: #C9D1D9">,</span></span> 883<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">'previewlinks:subtitle'</span><span style="color: #C9D1D9">: </span><span style="color: #A5D6FF">'This is an example...'</span><span style="color: #C9D1D9">,</span></span> 884<span class="line"><span style="color: #C9D1D9"> },</span></span> 885<span class="line"><span style="color: #C9D1D9"> })</span></span> 886<span class="line"></span> 887<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">return</span><span style="color: #C9D1D9"> {</span></span> 888<span class="line"><span style="color: #C9D1D9"> props: { preview },</span></span> 889<span class="line"><span style="color: #C9D1D9"> }</span></span> 890<span class="line"><span style="color: #C9D1D9">}</span></span> 891<span class="line"></span> 892<span class="line"><span style="color: #FF7B72">export</span><span style="color: #FFA657"> </span><span style="color: #FF7B72">default</span><span style="color: #FFA657"> </span><span style="color: #FF7B72">function</span><span style="color: #FFA657"> </span><span style="color: #D2A8FF">Home</span><span style="color: #FFA657">({ preview }) </span><span style="color: #C9D1D9">
892{</span></span> 893<span class="line"><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">return</span><span style="color: #C9D1D9"> (</span></span> 894<span class="line"><span style="color: #C9D1D9"> <</span><span style="color: #7EE787">Head</span><span style="color: #C9D1D9">></span></span> 895<span class="line"><span style="color: #C9D1D9"> <</span><span style="color: #7EE787">meta</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">name</span><span style="color: #FF7B72">=</span><span style="color: #A5D6FF">"twitter:card"</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">content</span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9">{preview} /></span></span> 896<span class="line"><span style="color: #C9D1D9"> </</span><span style="color: #7EE787">Head</span><span style="color: #C9D1D9">></span></span> 897<span class="line"><span style="color: #C9D1D9"> )</span></span> 898<span class="line"><span style="color: #C9D1D9">}</span></span> 899<span class="line"></span></code></pre></code></pre> 900 </li> 901 </ul> 902 </div> 903</div> 904 905 <blockquote class="flex flex-col items-center"> 906 <p class="max-w-4xl text-xl font-medium text-center md:text-2xl lg:text-3xl text-quoted">It took me less than five minutes to get PreviewLinks up and running. It's incredibly easy to use and 907 at the price, it's a no-brainer</p> 908 909 <footer class="flex items-center gap-3 mt-6 md:mt-12"> 910 <img 911 class="flex-shrink-0 w-12 h-12 border rounded-full border-black/10" 912 src="https://previewlinks.io/assets/testimonials/aaron.jpeg" 913 alt="Aaron" 914 loading="lazy" 915 > 916 917 <a 918 href="https://hammerstone.dev/?ref=previewlinks.io" 919 target="_blank" 920 class="inline-block font-bold tracking-tight" 921 > 922 <p>Aaron</p> 923 <p class="font-medium text-black/60">Cofounder of Hammerstone</p> 924 </a> 925 </footer> 926</blockquote> 927 </div> 928 </section> 929 930 <section 931 class="my-12 md:my-24 scroll-mt-40" 932 id="pricing" 933 > 934 <div class="container space-y-12 md:space-y-24"> 935 <header class="flex flex-col items-start"> 936 <p class="md:text-xl font-bold tracking-tight text-floral">Pricing</p> 937 938 <h2 class="max-w-4xl mt-6 text-3xl font-bold tracking-tighter md:text-5xl lg:text-6xl"> 939 Automate link previews today. 940 941 <span class="block text-black/40"> 942 No credit card required. 943 </span> 944 </h2> 945 946 947 948</header> 949 950 <footer 951 class="flex flex-col items-center" 952 x-data="Tabs({ 953 activeClass: 'text-white drop-shadow' 954 })" 955 > 956 957 <div class="relative inline-block rounded-full bg-gray-50"> 958 <div 959 x-ref="indicator" 960 class="absolute inset-y-0 transition-all duration-300 rounded-full bg-floral" 961 ></div> 962 963 <nav 964 class="inline-grid grid-cols-2 gap-0.5" 965 x-ref="buttons" 966 > 967 <button 968 x-bind="button(0)" 969 class="inline-block px-4 py-2 font-bold tracking-tight transition duration-300 rounded-full hover:bg-black/5" 970 >Monthly</button> 971 972 <button 973 x-bind="button(1)" 974 class="inline-block px-4 py-2 font-bold tracking-tight transition duration-300 rounded-full hover:bg-black/5" 975 >Yearly</button> 976 </nav> 977 </div> 978 979 <ul 980 class="grid gap-6 mt-6 md:gap-12 md:grid-cols-3" 981 x-bind="content(0)" 982 > 983 <li class="p-6 shadow-xl rounded-xl ring-1 ring-black/5 shadow-black/10"> 984 <h3 class="font-bold tracking-tight text-floral">Starter</h3> 985 986 <p class="mt-6 text-4xl font-bold tracking-tighter">$5</p> 987 988 <p class="mt-3 text-black/60"> 989 For small businesses that want to automate their link previews and start growing. 990 </p> 991 992 <a class="flex mt-3 button-small button button-secondary-black" href="https://previewlinks.io/app/register">Try 7 days for free</a> 993 994 <ul class="mt-6 space-y-1.5"> 995 <li class="flex items-center gap-1.5 font-medium"> 996 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none"
997 viewBox="0 0 24 24" stroke="currentColor"> 998 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 999 </svg> 1000 1001 <span>10 Sites</span> 1002 </li> 1003 <li class="flex items-center gap-1.5 font-medium"> 1004 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none" 1005 viewBox="0 0 24 24" stroke="currentColor"> 1006 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1007 </svg> 1008 1009 <span>50 Templates</span> 1010 </li> 1011 <li class="flex items-center gap-1.5 font-medium"> 1012 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none" 1013 viewBox="0 0 24 24" stroke="currentColor"> 1014 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1015 </svg> 1016 1017 <span>250 Images per month</span> 1018 </li> 1019 <li class="flex items-center gap-1.5 font-medium"> 1020 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none"
1021 viewBox="0 0 24 24" stroke="currentColor"> 1022 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1023 </svg> 1024 1025 <span>Full API access</span> 1026 </li> 1027 </ul> 1028</li> 1029 <li class="p-6 shadow-xl rounded-xl ring-1 ring-black/5 shadow-black/10"> 1030 <h3 class="font-bold tracking-tight text-floral">Pro</h3> 1031 1032 <p class="mt-6 text-4xl font-bold tracking-tighter">$14</p> 1033 1034 <p class="mt-3 text-black/60"> 1035 For professional businesses that require automation for scaling their link previews. 1036 </p> 1037 1038 <a class="flex mt-3 button-small button button-secondary-black" href="https://previewlinks.io/app/register">Try 7 days for free</a> 1039 1040 <ul class="mt-6 space-y-1.5"> 1041 <li class="flex items-center gap-1.5 font-medium"> 1042 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none" 1043 viewB
1043ox="0 0 24 24" stroke="currentColor"> 1044 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1045 </svg> 1046 1047 <span>50 Sites</span> 1048 </li> 1049 <li class="flex items-center gap-1.5 font-medium"> 1050 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none" 1051 viewBox="0 0 24 24" stroke="currentColor"> 1052 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1053 </svg> 1054 1055 <span>100 Templates</span> 1056 </li> 1057 <li class="flex items-center gap-1.5 font-medium"> 1058 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none" 1059 viewBox="0 0 24 24" stroke="currentColor"> 1060 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1061 </svg> 1062 1063 <span>1000 Images per month</span> 1064 </li> 1065 <li class="flex items-center gap-1.5 font-medium"> 1066 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none"
1067 viewBox="0 0 24 24" stroke="currentColor"> 1068 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1069 </svg> 1070 1071 <span>Full API access</span> 1072 </li> 1073 </ul> 1074</li> 1075 <li class="p-6 shadow-xl rounded-xl ring-1 ring-black/5 shadow-black/10"> 1076 <h3 class="font-bold tracking-tight text-floral">Business</h3> 1077 1078 <p class="mt-6 text-4xl font-bold tracking-tighter">$29</p> 1079 1080 <p class="mt-3 text-black/60"> 1081 For large organizations that require high volume automation for their link previews. 1082 </p> 1083 1084 <a class="flex mt-3 button-small button button-secondary-black" href="https://previewlinks.io/app/register">Try 7 days for free</a> 1085 1086 <ul class="mt-6 space-y-1.5"> 1087 <li class="flex items-center gap-1.5 font-medium"> 1088 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none"
1089 viewBox="0 0 24 24" stroke="currentColor"> 1090 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1091 </svg> 1092 1093 <span>10000 Sites</span> 1094 </li> 1095 <li class="flex items-center gap-1.5 font-medium"> 1096 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none" 1097 viewBox="0 0 24 24" stroke="currentColor"> 1098 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1099 </svg> 1100 1101 <span>10000 Templates</span> 1102 </li> 1103 <li class="flex items-center gap-1.5 font-medium"> 1104 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none" 1105 viewBox="0 0 24 24" stroke="currentColor"> 1106 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1107 </svg> 1108 1109 <span>10000 Images per month</span> 1110 </li> 1111 <li class="flex items-center gap-1.5 font-medium"> 1112 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none"
1113 viewBox="0 0 24 24" stroke="currentColor"> 1114 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1115 </svg> 1116 1117 <span>Full API access</span> 1118 </li> 1119 </ul> 1120</li> 1121 </ul> 1122 1123 <ul 1124 class="grid gap-6 mt-6 md:gap-12 md:grid-cols-3" 1125 x-bind="content(1)" 1126 x-cloak 1127 > 1128 <li class="p-6 shadow-xl rounded-xl ring-1 ring-black/5 shadow-black/10"> 1129 <h3 class="font-bold tracking-tight text-floral">Starter</h3> 1130 1131 <p class="mt-6 text-4xl font-bold tracking-tighter">$50</p> 1132 1133 <p class="mt-3 text-black/60"> 1134 For small businesses that want to automate their link previews and start growing. 1135 </p> 1136 1137 <a class="flex mt-3 button-small button button-secondary-black" href="https://previewlinks.io/app/register">Try 7 days for free</a> 1138 1139 <ul class="mt-6 space-y-1.5"> 1140 <li class="flex items-center gap-1.5 font-medium"> 1141 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none"
1142 viewBox="0 0 24 24" stroke="currentColor"> 1143 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1144 </svg> 1145 1146 <span>10 Sites</span> 1147 </li> 1148 <li class="flex items-center gap-1.5 font-medium"> 1149 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none" 1150 viewBox="0 0 24 24" stroke="currentColor"> 1151 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1152 </svg> 1153 1154 <span>50 Templates</span> 1155 </li> 1156 <li class="flex items-center gap-1.5 font-medium"> 1157 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none" 1158 viewBox="0 0 24 24" stroke="currentColor"> 1159 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1160 </svg> 1161 1162 <span>250 Images per month</span> 1163 </li> 1164 <li class="flex items-center gap-1.5 font-medium"> 1165 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none"
1166 viewBox="0 0 24 24" stroke="currentColor"> 1167 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1168 </svg> 1169 1170 <span>Full API access</span> 1171 </li> 1172 </ul> 1173</li> 1174 <li class="p-6 shadow-xl rounded-xl ring-1 ring-black/5 shadow-black/10"> 1175 <h3 class="font-bold tracking-tight text-floral">Pro</h3> 1176 1177 <p class="mt-6 text-4xl font-bold tracking-tighter">$140</p> 1178 1179 <p class="mt-3 text-black/60"> 1180 For professional businesses that require automation for scaling their link previews. 1181 </p> 1182 1183 <a class="flex mt-3 button-small button button-secondary-black" href="https://previewlinks.io/app/register">Try 7 days for free</a> 1184 1185 <ul class="mt-6 space-y-1.5"> 1186 <li class="flex items-center gap-1.5 font-medium"> 1187 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none" 1188 viewB
1188ox="0 0 24 24" stroke="currentColor"> 1189 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1190 </svg> 1191 1192 <span>50 Sites</span> 1193 </li> 1194 <li class="flex items-center gap-1.5 font-medium"> 1195 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none" 1196 viewBox="0 0 24 24" stroke="currentColor"> 1197 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1198 </svg> 1199 1200 <span>100 Templates</span> 1201 </li> 1202 <li class="flex items-center gap-1.5 font-medium"> 1203 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none" 1204 viewBox="0 0 24 24" stroke="currentColor"> 1205 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1206 </svg> 1207 1208 <span>1000 Images per month</span> 1209 </li> 1210 <li class="flex items-center gap-1.5 font-medium"> 1211 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none"
1212 viewBox="0 0 24 24" stroke="currentColor"> 1213 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1214 </svg> 1215 1216 <span>Full API access</span> 1217 </li> 1218 </ul> 1219</li> 1220 <li class="p-6 shadow-xl rounded-xl ring-1 ring-black/5 shadow-black/10"> 1221 <h3 class="font-bold tracking-tight text-floral">Business</h3> 1222 1223 <p class="mt-6 text-4xl font-bold tracking-tighter">$290</p> 1224 1225 <p class="mt-3 text-black/60"> 1226 For large organizations that require high volume automation for their link previews. 1227 </p> 1228 1229 <a class="flex mt-3 button-small button button-secondary-black" href="https://previewlinks.io/app/register">Try 7 days for free</a> 1230 1231 <ul class="mt-6 space-y-1.5"> 1232 <li class="flex items-center gap-1.5 font-medium"> 1233 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none"
1234 viewBox="0 0 24 24" stroke="currentColor"> 1235 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1236 </svg> 1237 1238 <span>10000 Sites</span> 1239 </li> 1240 <li class="flex items-center gap-1.5 font-medium"> 1241 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none" 1242 viewBox="0 0 24 24" stroke="currentColor"> 1243 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1244 </svg> 1245 1246 <span>10000 Templates</span> 1247 </li> 1248 <li class="flex items-center gap-1.5 font-medium"> 1249 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none" 1250 viewBox="0 0 24 24" stroke="currentColor"> 1251 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1252 </svg> 1253 1254 <span>10000 Images per month</span> 1255 </li> 1256 <li class="flex items-center gap-1.5 font-medium"> 1257 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-5 h-5 text-floral" fill="none"
1258 viewBox="0 0 24 24" stroke="currentColor"> 1259 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> 1260 </svg> 1261 1262 <span>Full API access</span> 1263 </li> 1264 </ul> 1265</li> 1266 </ul> 1267 </footer> 1268 </div> 1269 </section> 1270 1271 <footer class="py-12 mt-auto text-white bg-black"> 1272 <div class="container"> 1273 <div class="grid lg:grid-cols-[1fr,auto] gap-12"> 1274 <section> 1275 <a 1276 target="_blank" 1277 href="https://twitter.com/realCodeCraft" 1278 class="inline-flex items-center gap-2 font-bold tracking-tight" 1279 > 1280 <svg 1281 class="h-5" 1282 xmlns="http://www.w3.org/2000/svg" 1283 viewBox="0 0 277 320" 1284 > 1285 <path 1286 d="M276.958 109.946v100.62l-94.395 54.454-86.612-49.789 54.457-31.635 40.453-23.336-9.854-5.705-94.39-54.979h-.52V0l182.045 104.767 8.816 5.179ZM0 50.307v219.905L86.097 320V100.095L0 50.307Z" 1287 fill="currentColor" 1288 /> 1289 </svg> 1290 1291 <span>by Craft Enterprises</span> 1292 </a> 1293 1294 <p class="mt-4 text-white/75">© 2026</p> 1295 </section> 1296 1297 <ul class="grid items-start grid-cols-2 gap-12 md:grid-cols-4"> 1298 <li> 1299 <h2 class="font-bold tracking-tight">Pages</h2> 1300 1301 <ul class="mt-4 space-y-1.5 text-white/75"> 1302 <li> 1303 <a 1304 class="transition hover:opacity-60" 1305 href="https://previewlinks.io" 1306 >Home</a> 1307 </li> 1308 1309 <li> 1310 <a 1311 class="transition hover:opacity-60" 1312 href="https://previewlinks.io/check-your-preview" 1313 >Check your preview</a> 1314 </li> 1315 1316 <li> 1317 <a 1318 class="transition hover:opacity-60" 1319 href="https://previewlinks.io/integrations" 1320 >Integrations</a> 1321 </li> 1322 1323 <li> 1324 <a 1325 class="transition hover:opacity-60" 1326 href="https://previewlinks.io/documentation" 1327 >Documentation</a> 1328 </li> 1329 1330 <li> 1331 <a 1332 class="transition hover:opacity-60" 1333 href="https://previewlinks.io/pricing" 1334 >Pricing</a> 1335 </li> 1336 </ul> 1337 </li> 1338 1339 <li> 1340 <h2 class="font-bold tracking-tight">Integrations</h2> 1341 1342 <ul class="mt-4 space-y-1.5 text-white/75"> 1343 <li> 1344 <a 1345 class="transition hover:opacity-60" 1346 href="https://previewlinks.io/integrations/nodejs" 1347 >Node.js</a> 1348 </li> 1349 <li> 1350 <a 1351 class="transition hover:opacity-60" 1352 href="https://previewlinks.io/integrations/nextjs" 1353 >Next.js</a> 1354 </li> 1355 <li> 1356 <a 1357 class="transition hover:opacity-60" 1358 href="https://previewlinks.io/integrations/laravel" 1359 >Laravel</a> 1360 </li> 1361 </ul> 1362 </li> 1363 1364 1365 1366 <li> 1367 <h2 class="font-bold tracking-tight">Company</h2> 1368 1369 <ul class="mt-4 space-y-1.5 text-white/75"> 1370 <li> 1371 <a 1372 class="transition hover:opacity-60" 1373 href="https://previewlinks.io/about" 1374 >About</a> 1375 </li> 1376 1377 <li> 1378 <a 1379 class="transition hover:opacity-60" 1380 href="https://previewlinks.io/blog" 1381 >Blog</a> 1382 </li> 1383 1384 <li> 1385 <a 1386 class="transition hover:opacity-60" 1387 href="https://previewlinks.io/privacy" 1388 >Privacy</a> 1389 </li> 1390 1391 <li> 1392 <a 1393 class="transition hover:opacity-60" 1394 href="https://previewlinks.io/terms-of-service" 1395 >Terms of service</a> 1396 </li> 1397 </ul> 1398 </li> 1399 </ul> 1400 </div> 1401 </div> 1402 </footer> 1403 </div> 1404</body> 1405</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.