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:

For a title dropdown, use the codes as option values and your own labels:

<select data-tiquo-profile="title">
  <option value="">No title</option>
  <option value="mr">Mr</option>
  <option value="mrs">Mrs</option>
  <option value="ms">Ms</option>
  <option value="mx">Mx</option>
  <option value="dr">Dr</option>
</select>
<input data-tiquo-profile="nickname" placeholder="What should we call you?" />

To let customers keep or edit a custom title such as "Captain", add an other option and a customTitle input:

<option value="other">Other</option>
<input data-tiquo-profile="customTitle" placeholder="Your title" />

In Hosted Package 1.3.2 or newer, title, customTitle, and taxId are sent only when the customer changes them. A saved title the dropdown has no option for, or an untouched Tax ID, is never cleared by saving other fields. To show the title as text, render data-tiquo-customer="titleText".

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.

Full email, phone, and address lists

Requires Hosted Package 1.3.0 or newer. Bind each control using a zero-based row index:

For example, add these inside your profile form:

<label>Primary email <input data-tiquo-profile="emails.0.address" type="email"></label>
<label>Secondary email <input data-tiquo-profile="emails.1.address" type="email"></label>
<label>Primary phone <input data-tiquo-profile="phones.0.number" type="tel"></label>
<select data-tiquo-profile="phones.0.countryCode" aria-label="Phone country">
  <option value="GB">United Kingdom</option>
  <option value="FR">France</option>
</select>

Controls populate from the matching array position in the signed-in profile, including each saved address's id. In Hosted Package 1.3.2 or newer, a control with no saved value keeps the value in your markup, so a hidden addresses.1.type with value="billing" stays billing for a new row. Contact indexes support 0 to 99; address indexes support 0 to 9. Without separate controls for the metadata, contacts default to order: N and isPrimary: N === 0; addresses default to type: "both" and isDefault: N === 0. Bind checkboxes for isPrimary and isDefault or use a hidden field with value "true". Address types are billing, shipping, and both.

These arrays replace the full list, so include every row you want to retain. Use either the email shorthand or indexed emails bindings in one form; mixing them reports a form error. New secondary emails must already be verified through the email-verification API. A full phones list takes precedence over a single phone field.

For national-format numbers, supply phoneCountry for the single phone or countryCode for an indexed phone. Use the phone number field helper (data-tiquo-phone-field) on phone inputs so international numbers are formatted correctly; it supplies the selected country and normalized number automatically. Input-only country and portal controls keep their configured defaults when the profile response has no corresponding value.

Address and Tax ID editing require a portal that enables those profile fields:

<input data-tiquo-profile="portalSlug" type="hidden" value="YOUR_PORTAL_SLUG">
<label>Tax ID <input data-tiquo-profile="taxId"></label>
<input data-tiquo-profile="addresses.0.id" type="hidden">
<input data-tiquo-profile="addresses.0.type" type="hidden" value="billing">
<label>Address <input data-tiquo-profile="addresses.0.addressLine1" autocomplete="address-line1"></label>
<label>City <input data-tiquo-profile="addresses.0.city" autocomplete="address-level2"></label>
<label>Postal code <input data-tiquo-profile="addresses.0.postalCode" autocomplete="postal-code"></label>
<label>Country <input data-tiquo-profile="addresses.0.country" autocomplete="country-name"></label>

addressLine1, city, postalCode, and country are required for each address. Include an addresses.N.id control in every row: it fills in with the saved address's ID, and the save uses it to keep that address. A row without an ID is saved as a new address, and a saved address with no row in the form is deleted, so bind every address the customer keeps. For a new row, supply its address type and default choice if the defaults above don't fit. The Tax ID control fills in with the saved value.

Form feedback and values

In Hosted Package 1.3.0 or newer, profile forms prevent duplicate saves while pending. The submit control is disabled and receives aria-busy="true" until the request completes. Use data-tiquo-message for status feedback. tiquo:profile-saved carries the update result; tiquo:profile-error carries { error }, including sign-in and local form-validation errors.

Radio groups submit the selected value; multiple selects submit arrays. In Hosted Package 1.3.0 or newer, controls inside disabled fieldsets and disabled options in multiple selects are omitted. See HTML form bindings for shared behavior and the complete event reference.

Marketing and SMS preferences

For a public newsletter or SMS signup form without login, use data-tiquo-form="marketing-subscribe" or call subscribeToMarketing() directly. The profile form below is for signed-in customers and can also opt them out.

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

You can bind a file input directly inside a profile form:

<input data-tiquo-profile="profilePhoto" type="file" accept="image/jpeg,image/png,image/gif,image/webp" aria-label="Profile photo">

An empty file input leaves the existing photo unchanged. A text input with the same binding accepts a remote image URL, data URI, or blob URI.

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.