Add 1737 support to your website

<!-- 1737 Support Widget -->
<div class="c1737" role="complementary"
     aria-label="1737 mental health support">
  <button class="c1737__close" type="button" aria-label="Close">
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
         aria-hidden="true" focusable="false"
         xmlns="http://www.w3.org/2000/svg">
      <line x1="1.10628" y1="12.8449" x2="12.9647" y2="0.986465"
            stroke="#1E3D2B" stroke-width="2.79021"/>
      <line y1="-1.39511" x2="16.7703" y2="-1.39511"
            transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 11.8584 13.8314)"
            stroke="#1E3D2B" stroke-width="2.79021"/>
    </svg>
  </button>
  <p class="c1737__title">Need to talk?</p>
  <p class="c1737__text">
    Free call or text
    <a class="c1737__num">1737</a>
    &ndash; <span class="c1737__avail">available 24/7.</span>
  </p>
  <a class="c1737__cta" href="https://1737.org.nz/"
     target="_blank" rel="noopener">
    Visit the 1737 Digital Hub
  </a>
</div>

<style>
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@500;600;700;800&display=swap");
.c1737{
  --c1737-bg:#F9FFE3;
  --c1737-ink:#1E3D2B;
  --c1737-cta-bg:#1E3D2B;
  --c1737-cta-ink:#D8EA88;

  box-sizing:border-box;
  position:relative;
  width:350px;
  max-width:100%;
  min-height:153px;
  padding:13px 16px 13px 13px;
  background:var(--c1737-bg);
  color:var(--c1737-ink);
  border-radius:12.555px;
  box-shadow:0 3.348px 16.74px 0 rgba(0,0,0,.35);
  font-family:"Work Sans",system-ui,-apple-system,
    "Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.76;
  overflow-wrap:break-word;
}
.c1737 *{box-sizing:border-box; font-family:inherit;}

.c1737__close{
  position:absolute; top:10px; right:10px;
  width:28px; height:28px;
  display:inline-flex; align-items:center;
  justify-content:center;
  padding:0; border:0; border-radius:8px;
  background:transparent; cursor:pointer;
}
.c1737__close:focus-visible{
  outline:2px solid var(--c1737-ink); outline-offset:2px;
}

.c1737__title{margin:0; font-size:28.156px; font-weight:600; letter-spacing:-0.282px;}
.c1737__text{margin:0 0 12px; font-size:17px; font-weight:500; letter-spacing:-0.17px; line-height:1.4;}
.c1737__num{color:inherit; font-weight:800; text-decoration:none;}
.c1737__num:hover{text-decoration:underline;}
.c1737__avail{font-weight:600;}

.c1737__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  padding:8.416px 26.93px;
  background:var(--c1737-cta-bg);
  color:var(--c1737-cta-ink);
  font-size:16.894px;
  font-weight:600;
  line-height:1.32;
  text-decoration:none;
  border-radius:75.742px;
}
.c1737__cta:hover{opacity:.92;}
.c1737__cta:focus-visible{
  outline:2px solid var(--c1737-cta-ink); outline-offset:2px;
}

.c1737[hidden]{display:none;}
</style>