# Design Guide

## Set Browser Tab Name

To indicate that it is a family service of the Unifi Apps ecosystem, please set the browser tab name in the format as `Name | Unifi Apps.`

<figure><img src="/files/VzLcrQyvKvg7By3J68dt" alt="" width="353"><figcaption></figcaption></figure>

## Set OpenGraph

The LINE MINI App and LINE Login LIFF/Web URLs of the Unifi Apps can be utilized across various marketing channels. If Open Graph is not set up, it may reduce the effectiveness of content delivery. Therefore, please ensure that Open Graph is properly configured. Without it, blank spaces or alternative text may appear where the link is displayed.

<figure><img src="/files/t3UtTUSb4wpvHBqMhc8T" alt="" width="375"><figcaption></figcaption></figure>

## Connect Button

If Wallet Connect is integrated when initiating specific actions (such as Buy, NFT Airdrop, FT Airdrop, etc.) rather than using a standard button, please ensure that Wallet Connect is triggered when those actions are executed. It is acceptable for Wallet Connect not to be initiated based on the button guidelines provided. However, if you create a button similar to Wallet Connect, please make sure to adhere to the aforementioned guidelines.

<figure><img src="/files/wuIJRze2w53aO1mZ0c07" alt=""><figcaption></figcaption></figure>

{% file src="/files/D5I4oAEoNPhudwfJGzoW" %}

{% file src="/files/zylWyuh9aRDzpBAn8uMD" %}

## Set z-index for pop-up

z-index for SDK's pop-up to prevent blocking new windows from Browser set as '999'. Please set your z-index for any pup-up under '999' to avoid conflicting between pop-up's


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.unifi.me/unifi-apps/design-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.