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

<section class="shadow bg-white dark:bg-gray-800 sm:rounded-md sm:overflow-hidden">
  <PlausibleWeb.Components.Billing.extra_feature_notice
    site={@site}
    current_user={@current_user}
    feature_mod={Plausible.Billing.Feature.Props}
    grandfathered?
  />

  <div class="py-6 px-4 sm:p-6">
    <header class="w-full flex">
      <span class="flex-1">
        <h1 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
          Custom Properties
        </h1>

        <p class="mt-2 text-sm leading-5 text-gray-500 dark:text-gray-200">
          Attach Custom Properties when sending a Pageview or an Event to
          create custom metrics.
        </p>
        <p class="text-sm leading-5 text-gray-500 dark:text-gray-200">
          In order for the properties to show up on your dashboard, you need to
          explicitly add them below first.
        </p>
      </span>

      <.link
        href="https://plausible.io/docs/custom-props/introduction"
        target="_blank"
        rel="noreferrer"
      >
        <svg
          class="w-6 h-6 text-gray-400"
          fill="currentColor"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
            clip-rule="evenodd"
          >
          </path>
        </svg>
      </.link>
    </header>

    <PlausibleWeb.Components.Site.Feature.toggle
      feature_mod={Plausible.Billing.Feature.Props}
      site={@site}
      conn={@conn}
    >
      <%= live_render(@conn, PlausibleWeb.Live.PropsSettings,
        id: "props-form",
        session: %{"site_id" => @site.id, "domain" => @site.domain}
      ) %>
    </PlausibleWeb.Components.Site.Feature.toggle>
  </div>
</section>