> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daytalog.com/llms.txt
> Use this file to discover all available pages before exploring further.

# link

> Example of email with a link

<Tabs>
  <Tab title="Preview">
    <Frame caption="Example of email with a link" className="mt-3">
      <iframe srcDoc={`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="https://assets.daytalog.com/example/obsidian.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><title>Demo – Day 1 proxies ready</title></head><body style="background-color:#f6f8fa"><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Proxies for day 1 of Demo are ready to download.<div> ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿</div></div><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin:0;background-color:#f6f8fa;color:#24292e;font-family:-apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:520px;margin:40px auto;background-color:#ffffff;border:1px solid #eaecef;border-radius:12px;padding:24px"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;margin-bottom:8px"><tbody><tr><td><img alt="Obsidian Frame Studios" height="64" src="https://assets.daytalog.com/example/obsidian.png" style="display:block;outline:none;border:none;text-decoration:none;margin:0 auto 8px;border-radius:12px" width="64"/><p style="font-size:22px;line-height:24px;font-weight:800;margin:8px 0 2px;margin-top:8px;margin-right:0;margin-bottom:2px;margin-left:0">Day 1 – Demo</p></td></tr></tbody></table><hr style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#eaecef;margin:16px 0 12px"/><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><p style="font-size:13px;line-height:24px;color:#57606a;text-align:center;margin:0 0 16px;margin-top:0;margin-right:0;margin-bottom:16px;margin-left:0">Files: 3 • Size: 653 MB</p><a href="https:daytalog.com/" style="line-height:100%;text-decoration:none;display:block;max-width:100%;mso-padding-alt:0px;width:100%;box-sizing:border-box;padding:14px 16px;font-weight:700;border-radius:10px;text-align:center;background-color:#432dd7;color:#ffffff;padding-top:14px;padding-right:16px;padding-bottom:14px;padding-left:16px" target="_blank"><span><!--[if mso]><i style="mso-font-width:400%;mso-text-raise:21" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:10.5px">Download Proxies</span><span><!--[if mso]><i style="mso-font-width:400%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a><p style="font-size:12px;line-height:24px;color:#57606a;margin-top:12px;word-break:break-all;margin-bottom:16px">If the button doesn’t work, copy and paste this URL into your browser:<br/><a href="https:daytalog.com/" style="color:#0969da;text-decoration:underline">https:daytalog.com/</a></p></td></tr></tbody></table></td></tr></tbody></table><p style="font-size:11px;line-height:24px;text-align:center;color:#6e7781;margin:8px 0 24px;margin-top:8px;margin-right:0;margin-bottom:24px;margin-left:0">Obsidian Frame Studios · 123 Hollywood Lane, Dreamville, CA 90210</p><p style="font-size:12px;line-height:24px;color:#6a737d;text-align:center;margin-top:60px;margin-bottom:16px">Powered by daytalog</p></td></tr></tbody></table><!--7--><!--/$--></body></html>`} className="w-full h-[650px] rounded-xl" height="650px" />
    </Frame>
  </Tab>

  <Tab title="Code">
    ```Typescript theme={null}
    import {
      Html,
      Head,
      Preview,
      Body,
      Container,
      Section,
      Text,
      Img,
      Button,
      Hr,
    } from '@react-email/components';
    import * as React from 'react';
    import { useDaytalog } from 'daytalog';

    const LinkEmail: React.FC = () => {
      // This template is using "message" for the URL,
      // paste the URL into the email message.
      const { message, log, projectName } = useDaytalog();

      const logo = 'https://assets.daytalog.com/example/obsidian.png';
      const address = 'Obsidian Frame Studios · 123 Hollywood Lane, Dreamville, CA 90210';

      return (
        <Html>
          <Head>
            <title>{`${projectName} – Day ${log.day()} proxies ready`}</title>
          </Head>

          <Preview>{`Proxies for day ${log.day()} of ${projectName} are ready to download.`}</Preview>

          <Body style={body}>
            <Container style={card}>
              <Section style={header}>
                <Img src={logo} width={64} height={64} alt='Obsidian Frame Studios' style={logoStyle} />
                <Text style={title}>{`Day ${log.day()} – ${projectName}`}</Text>
              </Section>

              <Hr style={divider} />

              <Section>
                <Text style={meta}>{`Files: ${log.proxy.files()} • Size: ${log.proxy.size()}`}</Text>
                <Button href={message} style={button}>
                  Download Proxies
                </Button>

                <Text style={linkHint}>
                  If the button doesn’t work, copy and paste this URL into your browser:
                  <br />
                  <a href={message} style={url}>
                    {message}
                  </a>
                </Text>
              </Section>
            </Container>

            <Text style={footer}>{address}</Text>
          </Body>
        </Html>
      );
    };

    const body: React.CSSProperties = {
      margin: 0,
      backgroundColor: '#f6f8fa',
      color: '#24292e',
      fontFamily:
        '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
    };

    const card: React.CSSProperties = {
      maxWidth: '520px',
      margin: '40px auto',
      backgroundColor: '#ffffff',
      border: '1px solid #eaecef',
      borderRadius: 12,
      padding: 24,
    };

    const header: React.CSSProperties = {
      textAlign: 'center',
      marginBottom: 8,
    };

    const logoStyle: React.CSSProperties = {
      display: 'block',
      margin: '0 auto 8px',
      borderRadius: 12,
    };

    const title: React.CSSProperties = {
      fontSize: 22,
      fontWeight: 800,
      margin: '8px 0 2px',
    };

    const subtitle: React.CSSProperties = {
      fontSize: 14,
      lineHeight: '20px',
      color: '#57606a',
      margin: 0,
    };

    const divider: React.CSSProperties = {
      borderColor: '#eaecef',
      margin: '16px 0 12px',
    };

    const meta: React.CSSProperties = {
      fontSize: 13,
      color: '#57606a',
      textAlign: 'center',
      margin: '0 0 16px',
    };

    const button: React.CSSProperties = {
      width: '100%',
      boxSizing: 'border-box',
      padding: '14px 16px',
      fontWeight: 700,
      borderRadius: 10,
      textAlign: 'center',
      backgroundColor: '#432dd7',
      color: '#ffffff',
      textDecoration: 'none',
      display: 'block',
    };

    const linkHint: React.CSSProperties = {
      fontSize: 12,
      color: '#57606a',
      marginTop: 12,
      wordBreak: 'break-all',
    };

    const url: React.CSSProperties = {
      color: '#0969da',
      textDecoration: 'underline',
    };

    const footer: React.CSSProperties = {
      fontSize: 11,
      textAlign: 'center',
      color: '#6e7781',
      margin: '8px 0 24px',
    };

    export default LinkEmail;
    ```
  </Tab>
</Tabs>
