Skip to main content

Helium Customer Fields

Real ID integrates into Helium's Customer Fields so you can add modern ID verification to your wholesale or customer registration forms.

info

This guide assumes you have Customer Fields and Real ID installed on your Shopify store.

Getting Started​

First, open the Customer Fields app and open the form that you'd like to add ID verification to.

Then in the Form Editor add a custom HTML block:

Adding a custom HTML block to the Customer Fields form through their designer

After dragging and dropping the custom HTML block into your form, click on the new field, you should see a the HTML block's editor appear on the left hand side:

The HTML block editor in the Customer Fields app

Copy the code below and paste it into this Content field for your HTML custom block:

<style>
  .ri-cf-banner {
    background: white;
    color: #333;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 600px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      sans-serif;
  }

  .ri-cf-banner h2 {
    margin: 0 0 16px 0;
    font-size: 24px;
    font-weight: 600;
  }

  .ri-cf-banner p {
    margin: 0;
    line-height: 1.6;
    font-size: 16px;
    opacity: 0.95;
  }

  .ri-cf-callout {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    margin: 20px 0 12px 0;
    border-left: 3px solid #ddd;
    color: #666;
  }

  .ri-cf-start-button {
    background-color: #4caf50;
    color: white;
    border: none;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .ri-cf-start-button:hover {
    background-color: #45a049;
  }

  .ri-cf-bottom-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
  }

  .ri-cf-badge-link {
    display: inline-block;
  }

  .ri-cf-badge-link img {
    height: 44px;
    width: auto;
    border-radius: 4px;
  }

  @media (max-width: 480px) {
    .ri-cf-banner {
      margin: 0 10px;
      padding: 20px;
    }

    .ri-cf-banner h2 {
      font-size: 20px;
    }

    .ri-cf-banner p {
      font-size: 14px;
    }
  }
</style>

<div id="real-id-mount" class="ri-cf-banner">
  <h2>ID verification</h2>
  <p>
    We require all customers to verify their ID as a part of account
    registration.
  </p>
  <br />
  <p>
    This one time ID verification is instant and secure through our partner Real
    ID.
  </p>

  <div class="ri-cf-callout">
    The button below is for demonstration only. Design and content will change
    in your live form.
  </div>

  <div class="ri-cf-bottom-section">
    <a
      href="https://getverdict.com/?utm_source=customer-fields&utm_campaign=form-designer"
      class="ri-cf-badge-link"
      target="_blank"
    >
      <img
        src="https://res.cloudinary.com/tinyhouse/image/upload/w_120,h_44,c_fit/v1625170204/Real%20ID/Screen_Shot_2020-09-17_at_5.38.59_PM_1.png"
        alt="Real ID Badge"
      />
    </a>
    <button class="ri-cf-start-button">Start</button>
  </div>
</div>

You should now see a place holder for the ID verification prompt appear in your form. Your same theme, content and branding appear in the live version of your form.

info

The Start button in this ID verification placeholder isn't functional within the Customer Fields Form Editor.

However, on the live version of your form it will function properly.

Finally, don't forget to click Save in the top right corner of the Form Editor to make sure these changes have been saved.

Frequently Asked Questions​

Is the Customer Fields integration available on all Real ID plans?​

Yes, this integration is available on all Real ID plans.

I have an approval step before Customer Fields creates the customer record, will this still work?​

Yes, Real ID can still verify your customer's ID, then you can view the ID verification results in the Real ID app before you approve their account.

I'm having issues setting this up, can you help me?​

Of course, happy to help. Please contact us so we can help you get ID verification embedded into your Customer Fields Form.