Customer data

Display customer fields and parameters, edit profiles, and upload profile photos. First, complete the installation.

Render customer fields

<span data-tiquo-customer="firstName"></span>
<span data-tiquo-customer="lastName"></span>
<span data-tiquo-customer="displayName"></span>
<span data-tiquo-customer="email"></span>
<span data-tiquo-customer="phone"></span>
<span data-tiquo-customer="createdAt"></span>
<span data-tiquo-customer="firstActiveAt"></span>

The field path is read from the signed-in customer record. The Hosted Package can render these customer fields:

For a Webflow Image element, the package assigns profilePhoto to the image src instead of printing the URL as text:

<img data-tiquo-customer="profilePhoto" alt="Profile photo" />

For a div-based avatar, bind it as a CSS background image:

<div
  data-tiquo-customer="profilePhoto"
  data-tiquo-style="background-image"
  data-tiquo-hide-empty
  aria-label="Profile photo"
></div>

Set the div's dimensions, border radius, background-size: cover, and background-position: center in Webflow. Only HTTP and HTTPS image URLs are accepted. data-tiquo-hide-empty hides the element when the customer does not have a profile photo.

Created and First Active dates

createdAt and firstActiveAt have different meanings:

• Created is when the customer profile was created. Customer activity never changes or backdates this value.
• First Active is when the customer first became active through qualifying customer activity. It is not the database insertion time. Activities performed by staff, systems, integrations, or imports do not set it.

The values are equal when a customer creates their own account and is immediately active in the same flow. An imported or staff-created profile can have a later firstActiveAt, or no value until the customer becomes active.

Without formatting attributes, the Hosted Package renders the raw Unix millisecond value. Use data-tiquo-date-format to format a date declaratively:

<time
  data-tiquo-customer="createdAt"
  data-tiquo-date-format="datetime"
  data-tiquo-locale="en-GB"
  data-tiquo-time-zone="Europe/London"
></time>

<time
  data-tiquo-customer="firstActiveAt"
  data-tiquo-date-format="date"
></time>

Supported date formats:

data-tiquo-locale is optional and defaults to the page language or browser locale. data-tiquo-time-zone is optional and accepts an IANA timezone such as Europe/London. When the customer changes, signs out, or does not have the selected value, the Hosted Package clears the element so stale customer dates are not displayed.

The imperative API always returns the raw millisecond values:

const session = await window.Tiquo.getUser();

console.log(session?.customer?.createdAt);
console.log(session?.customer?.firstActiveAt);

Render customer parameters

Customer parameters are custom fields configured in Tiquo. Render them with data-tiquo-customer-parameter.

<span data-tiquo-customer-parameter="Membership Type"></span>
<span data-tiquo-customer-parameter="membership_type"></span>
<span data-tiquo-customer-parameter="system_source"></span>

The value can be:

• The parameter name, such as Membership Type
• A normalized parameter key, such as membership_type
• A system parameter ID, such as system_source
• A custom parameter schema ID

Parameter names are normalized automatically, so Membership Type, membership type, and membership_type resolve to the same value.

Edit profile fields and customer parameters

Use data-tiquo-form="profile" to let a signed-in customer update their own profile.

<form data-tiquo-form="profile">
  <label>
    First name
    <input data-tiquo-profile="firstName" />
  </label>

  <label>
    Last name
    <input data-tiquo-profile="lastName" />
  </label>

  <label>
    Phone
    <input data-tiquo-profile="phone" />
  </label>

  <label>
    Membership type
    <select data-tiquo-profile-parameter="Membership Type">
      <option value="">Select one</option>
      <option value="Standard">Standard</option>
      <option value="VIP">VIP</option>
    </select>
  </label>

  <label>
    Interests
    <select data-tiquo-profile-parameter="Interests" multiple>
      <option value="Events">Events</option>
      <option value="Dining">Dining</option>
      <option value="Retail">Retail</option>
    </select>
  </label>

  <label>
    Marketing opt-in
    <input data-tiquo-profile-parameter="system_marketing_opt_in" type="checkbox" />
  </label>

  <label>
    SMS opt-in
    <input data-tiquo-profile-parameter="system_sms_opt_in" type="checkbox" />
  </label>

  <p data-tiquo-message></p>
  <button type="submit">Save profile</button>
</form>

Editable built-in profile fields:

displayName is render-only. It cannot be edited through the Hosted Package or DOM Package. Tiquo derives it from first and last name. createdAt and firstActiveAt are also read-only system fields and are never included in profile update payloads.

Editable customer parameters use data-tiquo-profile-parameter. The value can be a parameter name, normalized key, system parameter ID, or custom parameter schema ID.

Dropdown and multiselect values are validated by Tiquo before saving:

• select parameters can only save one configured, non-archived option.
• multiselect parameters can only save configured, non-archived options.
• Checkbox groups with the same data-tiquo-profile-parameter save as a multiselect array.
• Single checkboxes save true or false, including Marketing and SMS Opt-In.
• Disabled controls are omitted. For a multiselect with one option, use a multiple select.

If a form tries to save a value that is not available for that parameter, the save is rejected and the message element shows the error.

Marketing and SMS Preferences

Both consent checkboxes load the saved choice and can be checked or unchecked. Saving sends explicit booleans and reloading shows the stored preference. The hosted script decodes compound consent values such as {"Opt-In":"true"} and legacy boolean values, including bindings by system ID, name, normalized name, or an organisation override's schema ID.

The customer must be signed in and the parameter must be customer-editable. Staff-only parameters are rejected by the backend. Customer portals additionally limit updates to parameters enabled in that portal. The opt-in timestamp is managed by the server, not by a form field.

A profile form uses the same profileParameters payload as:

await window.Tiquo.updateProfile({
  profileParameters: {
    system_marketing_opt_in: true,
    system_sms_opt_in: false,
  },
});

This updates the authenticated customer's own profile. It is separate from Tiquo.setConsent(), which controls website analytics and does not change Marketing or SMS Opt-In. Profile forms emit tiquo:profile-saved or tiquo:profile-error with the result/error in event.detail.

Upload a profile photo

Add a photo trigger and preview within the same profile editor as the profile form. The package creates the file input, validates the selected image, previews it locally, and uploads it when the customer saves the form.

<div data-tiquo-profile-editor>
  <img
    data-tiquo-customer="profilePhoto"
    data-tiquo-profile-photo-preview
    alt="Profile photo"
  />

  <button
    type="button"
    data-tiquo-profile-photo-trigger
  >
    Choose photo
  </button>

  <form data-tiquo-form="profile">
    <input data-tiquo-profile="firstName" />
    <p data-tiquo-message></p>
    <button type="submit">Save profile</button>
  </form>
</div>

The default accepted formats are JPEG, PNG, GIF, and WebP. The maximum upload size is 5 MB. Set data-tiquo-max-size on the trigger to enforce a smaller client-side limit in bytes, or data-tiquo-accept to customise the browser file picker while keeping the same supported formats.

data-tiquo-profile-photo-preview works on an img element or a background-image element. The preview changes immediately after selection, before the form is submitted.

If the form sits elsewhere in the page, set data-tiquo-profile-editor="#profile-editor" on the form and give the containing editor that ID.