The ui-ref-link component is designed for generating and displaying referral links either in a popup window or as a single line. It is highly customizable and supports various display modes, including QR code generation and URL display.
Important! If the template references a property, the component must be wrapped in ui-aux. For example, in referraltree:
<ui-aux :tree-id="0" :marketing-props="['m.Active']">
<template #default="{ p, r, loading, error }">
<ui-ref-link
template="https://referraltree.my-office.app/en/enrollment/?ref={{p.invite_code}}"
:single-line="false"
:show-qr="false"
:show-url="true"
></ui-ref-link>
</template>
</ui-aux>
The ui-ref-link component can be used in various ways:
<ui-ref-link
headerClass="bg-primary text-on-primary"
title="Window title in full mode"
template="{{site_enroll_url}}/?ref={{p.invite_code}}"
:single-line="false"
:show-url="true"
:max-visible-chars="50"
:show-qr="true"
:qr-size="160"
>
<!-- Default slot: Text before the link in full mode -->
<template #after="{ url }">
Code to insert after the link in full mode.
</template>
</ui-ref-link>
Or simply:
<ui-ref-link :show-url="true"></ui-ref-link>
This will display a window with a QR code and a link.
<ui-ref-link :single-line="true" :show-qr="false" :show-url="true" ></ui-ref-link>
This will display just the link and a button to copy it to the clipboard.
| Property | Default | Type | Description |
| headerClass | — | String | Header class (only in window mode) |
| title | — | String | Window title (only in window mode) |
| template | {{site_url}}/ref={{p.invite_code}} | String | Link template. Available variables for templating: site_language, site_proto, site_domain, site_instance, site_hostname, site_url, site_enroll_url, and all user profile variables (e.g., p.firstname) |
| :single-line | false | Boolean | Single-line mode (no window, just link and copy button) |
| :max-visible-chars | — | Number | Maximum visible length of the URL; if longer, the middle will be truncated |
| :show-url | true | Boolean | Display the URL |
| :show-qr | false | Boolean | Display the QR code |
| :qr-size | 160 | Number | Size of the QR code in pixels |
The customLayout slot allows you to override the entire content of the link window. It receives the url as a parameter, and you can use ui-ref-link-parts to render the link, buttons, and QR code.
Note: All of the settings can be customized either from admin panel by manually editing code or from within the back office by pressing on a cog icon in a left upper corner of the page (only accessible when "Online office admin" flag is presented).