analytics/lib/plausible_web/templates/site/snippet.html.heex

<PlausibleWeb.Components.FirstDashboardLaunchBanner.set
  :if={@conn.params["site_created"] == "true"}
  site={@site}
/>

<div class="w-full max-w-3xl mt-4 mx-auto flex">
  <%= form_for @conn, "/", [class: "max-w-lg w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded px-8 pt-6 pb-8 mb-4 mt-8"], fn f -> %>
    <h2 class="text-xl font-bold dark:text-gray-100">Add JavaScript snippet</h2>
    <div class="mt-4">
      <p class="dark:text-gray-100">
        Paste this snippet in the <code>&lt;head&gt;</code> of your website.
      </p>

      <div class="relative">
        <%= textarea(f, :domain,
          id: "snippet_code",
          class:
            "transition overflow-hidden bg-gray-100 dark:bg-gray-900 appearance-none border border-transparent rounded w-full p-2 pr-6 text-gray-700 dark:text-gray-300 leading-normal appearance-none focus:outline-none focus:bg-white dark:focus:bg-gray-800 focus:border-gray-400 dark:focus:border-gray-500 text-xs mt-4 resize-none",
          value: render_snippet(@site),
          rows: 3,
          readonly: "readonly"
        ) %>
        <a
          onclick="var textarea = document.getElementById('snippet_code'); textarea.focus(); textarea.select(); document.execCommand('copy');"
          href="javascript:void(0)"
          class="no-underline text-indigo-500 text-sm hover:underline"
        >
          <svg
            class="absolute text-indigo-500"
            style="top: 24px; right: 12px;"
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
          </svg>
        </a>
      </div>
    </div>

    <div class="mt-2 dark:text-gray-100">
      <p class="text-sm">
        On WordPress? We have
        <.styled_link new_tab href="https://plausible.io/wordpress-analytics-plugin">
          a plugin
        </.styled_link>
      </p>

      <p class="text-sm">
        See more
        <.styled_link new_tab href="https://plausible.io/docs/integration-guides">
          integration guides
        </.styled_link>
      </p>
    </div>
    <%= link("Start collecting data →",
      class: "button mt-4 w-full",
      to: "/#{URI.encode_www_form(@site.domain)}"
    ) %>
  <% end %>

  <%= if @is_first_site do %>
    <div class="pt-12 pl-8 hidden md:block">
      <%= render(PlausibleWeb.AuthView, "_onboarding_steps.html", current_step: 3) %>
    </div>
  <% end %>
</div>