HTML Hooks

​

Installation

Please reference one of Rownd’s other Web SDKs for instructions on installing Rownd onto your site or web app. The HTML Hooks functionality is available with any or our web SDKs.

​

HTML Hooks

The Rownd Hub supports various hooks that can be used to modify the behavior of content on a page. These are controlled by HTML data attributes. The following attribute hooks are supported.

​

Sign in / sign up buttons / triggers

​

data-rownd-sign-in-trigger

Attach to a clickable control (e.g., <a> or <button>) to trigger the Rownd authentication modal when not signed in.

Example:

<a href="/dashboard" data-rownd-sign-in-trigger>
  Sign in
</a>

data-rownd-authenticated-text="<text>"

When the user is authenticated, the text in this attribute will replace the element’s original text.

Example:

<a
  href="/dashboard"
  data-rownd-sign-in-trigger
  data-rownd-authenticated-text="Sign out"
>
  Sign in
</a>

data-rownd-authenticated-redirect-url="<url>"

When the user is authenticated, the clicked element will navigate the browser to the specified absolute or relative URL. If not specified in the case of an <a> tag, the href attribute from the tag will be used instead.

Example:

<button
  data-rownd-sign-in-trigger
  data-rownd-authenticated-text="Sign out"
  data-rownd-authenticated-redirect-url="/dashboard"
>
  Sign in
</button>

data-rownd-request-sign-in / data-rownd-require-sign-in

When one of these attributes is present on any DOM element, the Rownd sign-in modal will automatically display if the user is not currently signed in.

The only difference between the two is that data-rownd-request-sign-in will display a closable sign-in modal (i.e., with a close icon showing) whereas data-rownd-require-sign-in will display a persistent, non-closable modal until the user successfully completes the sign-in process.

Pre-set the user’s email address or phone number

If you already know the current visitor’s sign-in identifier (i.e., email or phone), Rownd can pre-populate that into the sign-in modal. Simply add the following additional attribute to the same element where the request/require sign-in attribute is present: data-rownd-default-user-identifier="REPLACE_WITH_EMAIL_OR_PHONE"

Here’s a complete example:

<div
  data-rownd-require-sign-in="auto-submit"
  data-rownd-default-user-identifier="jrose@rownd.io"
/>

​

Display user profile information for site customization

Use these hooks when you want to customize site content with information about the currently signed-in user. The fields available here will match those specified in the Rownd dashboard.

If the user’s profile changes within the browser context, the changes will automatically be reflected within the site.

data-rownd-field-interpolate

Replaces templated strings within the element’s HTML content with the values from the currently signed-in user’s profile.

Example:

<p data-rownd-field-interpolate>
  Hello, {{ first_name }} {{ last_name }}!
</p>

// Result: <p data-rownd-field-interpolate>Hello, Alice Remansi!</p>

data-rownd-field-mapping="<field name>"

Examples:

<p>
  Hello,
  <span data-rownd-field-mapping="first_name"></span>
  <span data-rownd-field-mapping="last_name"></span>!
</p>;

Result: <p>
  {" "}
  Hello,
  <span data-rownd-field-mapping="first_name">Alice</span>
  <span data-rownd-field-mapping="last_name">Remansi</span>!
</p>;

Rownd can also render images when this attribute is applied to an img element and the field name corresponds to a field of type “image”. Example:

<h3>Profile Picture</h3>
<img data-rownd-field-mapping="profile_picture" />