Collect User Key

Automatically collect the user key with the pre-made UI components

If you have a SaaS product, you probably need to send customized notifications to each user.

Depending on your product, it might be useful to send events like: new invitations, new messages, new events received, new testimonials received, new customer support requests received, and so on.

This means that in your SaaS, you need to provide a way for the user to provide you with their User Key.

User Key

The User Key is a unique code that is generated when a user installs the Wuf application on a mobile device. The User Key identifies a user, and this code is shared between different devices if the user logs in with the same account.

We provide a pre-made UI component to collect the User Key in your SaaS.

Collect User Key UI Component

We provide you with the code to easily add this UI component to your SaaS.

TailwindCSS

<div class="divide-y divide-gray-300/50">
  <div class="py-8 text-base leading-7 text-gray-600">
    <p>Enable Mobile Push Notifications with <a href="https://usewuf.com" class="underline"target="_blank">Wuf</a></p>

    <div class="flex ml-[-8px]">
      <a
          href="https://apps.apple.com/us/app/wuf-push/id6462699610?itsct=apps_box_badge&amp;itscg=30200"
          target="_blank"
          class="flex overflow-hidden w-[165px] h-[69px] p-2 items-center"
        >
          <img
            src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1692662400"
            alt="Download on the App Store"
            class="w-[144px] h-[70px]"
          />
        </a>

        <div class="w-[180px]">
          <a
            href="https://play.google.com/store/apps/details?id=com.pushtarget.app&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"
            target="_blank"
          >
            <img
              alt="Get it on Google Play"
              src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
            />
          </a>
        </div>
    </div>
    
    <div class="mt-4">
      <label for="userkey">Wuf User Key</p>

      <div class="inline-flex">
        <input 
          class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 mr-2"
          type="text"
          name="userkey"
          placeholder="paste here">
        <button
          class="bg-black hover:bg-black-700 text-white font-semibold h-[40px] rounded-md px-3 focus:outline-none focus:shadow-outline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 active:bg-slate-900"
          type="button"
        >
          Save
        </button>
      </div>
    </div>

    <p class="mt-1 text-slate-500 leading-5">After signing up for Wuf, you'll receive a user key that you can copy and paste here.</p>
  </div>
</div>

React with TailwindCSS

const CollectWufUserKey = ({ onSave }) => {
  const [userKey, setUserKey] = useState("");

  const onSubmit = () => {
    onSave(userKey);
  };

  return (
    <div className="divide-y divide-gray-300/50">
      <div className="py-8 text-base leading-7 text-gray-600">
        <p>Enable Mobile Push Notifications with <a href="https://usewuf.com" className="underline"target="_blank">Wuf</a></p>

        <div className="flex ml-[-8px]">
          <a
              href="https://apps.apple.com/us/app/wuf-push/id6462699610?itsct=apps_box_badge&amp;itscg=30200"
              target="_blank"
              className="flex overflow-hidden w-[165px] h-[69px] p-2 items-center"
            >
              <img
                src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1692662400"
                alt="Download on the App Store"
                className="w-[144px] h-[70px]"
              />
            </a>

            <div className="w-[180px]">
              <a
                href="https://play.google.com/store/apps/details?id=com.pushtarget.app&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"
                target="_blank"
              >
                <img
                  alt="Get it on Google Play"
                  src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
                />
              </a>
            </div>
        </div>
        
        <div className="mt-4">
          <label for="userkey">Wuf User Key</p>

          <div className="inline-flex">
            <input
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 mr-2"
              type="text"
              name="userkey"
              placeholder="paste here"
              onChange={(e) => setUserKey(e.target.value)}  
            />
            <button 
              className="bg-black hover:bg-black-700 text-white font-semibold h-[40px] rounded-md px-3 focus:outline-none focus:shadow-outline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 active:bg-slate-900"
              type="button"
              onClick={onSubmit}
            >
              Save
            </button>
          </div>
        </div>

        <p className="mt-1 text-slate-500 leading-5">
          After signing up for Wuf, you'll receive a user key that you can copy and paste here.
        </p>
      </div>
    </div>
  )
}