# User attributes (/en/realtime-media/im/build/build-core-messaging/user-attributes/web)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

After joining a Chat channel, a user can update information such as the nickname, avatar, age, and mobile phone number as needed. These are known as user attributes.

    This page shows how to use the Chat SDK to implement managing user attributes.

    <CalloutContainer type="info">
      <CalloutDescription>
        User attributes are stored on the Chat server. If you have security concerns, Agora recommends that you manage user attributes yourself.To ensure information security, app users can only modify their own user attributes. Only app admins can modify the user attributes of other users.
      </CalloutDescription>
    </CalloutContainer>

    ## Understand the tech [#understand-the-tech-6]

    The Chat SDK uses `UserInfoManager` to retrieve, set, and modify user attributes. The following are the core methods:

    * `updateUserInfo`: Set or update user attributes.
    * `fetchUserInfoById`: Retrieve the user attributes of the specified user.

    ## Prerequisites [#prerequisites-6]

    Before proceeding, ensure that you meet the following requirements:

    * You have integrated the Chat SDK, initialized the SDK and implemented the functionality of registering accounts and login. For details, see [Chat SDK quickstart](../../get-started-sdk).
    * Have a thorough understanding of the API call frequency limit, the maximum size of all the attributes of a specified user, and the maximum size of all user attributes in an app. For details, see [Known limitations](../limitations).

    ## Implementation [#implementation-6]

    This section shows how to manage user attributes and contacts with the methods provided by the Chat SDK.

    ### Set user attributes [#set-user-attributes-6]

    Chat users can set and update their own attributes. Refer to the code example to set all the user attributes:

    ```javascript
    // Sets all user attributes
    const options = {
      nickname: "The nickname",
      avatarurl: "https://avatarurl",
      mail: "abc@gmail.com",
      phone: "phone number",
      gender: "female",
      birth: "2000-01-01",
      sign: "a sign",
      ext: JSON.stringify({
        nationality: "China",
        merit: "Hello, world！",
      }),
    };
    chatClient.updateUserInfo(options).then((res) => {
      console.log(res);
    });
    ```

    The following sample code uses nickname as an example to show how to set the specified user attribute:

    ```javascript
    chatClient.updateUserInfo("nickname", "Your nickname").then((res) => {
      console.log(res);
    });
    ```

    Keys listed in the following table are used by default when user attributes are set on the client side, including the nickname, avatar URL, contact information, email address, gender, signature, birthday and extension fields. When you call the [RESTful API to set](/en/api-reference/api-ref/im/user-attributes-management#setting-user-attributes) or [delete](/en/api-reference/api-ref/im/user-attributes-management#deleting-user-attributes) these user attributes, you must pass in the following keys to make sure that the client can obtain the settings from the server:

    | Field       | Type   | Description                                                                            |
    | :---------- | :----- | :------------------------------------------------------------------------------------- |
    | `nickname`  | String | The user nickname, which can contain at most 64 characters.                            |
    | `avatarurl` | String | The user avatar URL, which can contain at most 256 characters.                         |
    | `phone`     | String | The user's phone number, which can contain at most 32 characters.                      |
    | `mail`      | String | The user's email address, which can contain at most 64 characters.                     |
    | `gender`    | Number | The user gender: `1`：Male; `2`：Female;(Default) `0`: Unknown;Other values are invalid. |
    | `sign`      | String | The user's signature, which can contain at most 256 characters.                        |
    | `birth`     | String | The user's birthday, which can contain at most 256 characters.                         |
    | `ext`       | String | The extension fields.                                                                  |

    ### Retrieve user attributes [#retrieve-user-attributes-6]

    You can use `fetchUserInfoById` to retrieve the user attributes of the specified users. For each method call, you can retrieve the user attributes of a maximum of 100 users.

    Refer to the following code example to retrieve all the attributes of the specified user:

    ```javascript
    /**
     * @param {String|Array} users - The user ID. You can set it as one user ID, or multiple user IDs in the format of array.
     */
    let users = "user1" || ["user1", "user2"];
    chatClient.fetchUserInfoById(users).then((res) => {
      console.log(res);
    });
    ```

    The following sample code shows how to retrieve the specified attributes of the user.

    ```javascript
    /**
     * @param {String|Array} users - The user ID. You can set it as one user ID, or multiple user IDs in the format of array.
     * @param {String|Array} properties - The specified attribute.
     */
    chatClient.fetchUserInfoById("userId", "nickname").then((res) => {
      console.log(res);
    });

    // Retrieves the specified attributes of the specified users.
    chatClient
      .fetchUserInfoById(["user1", "user2"], ["nickname", "avatarurl"])
      .then((res) => {
        console.log(res);
      });
    ```

    ## Next steps [#next-steps-6]

    This section introduces extra functions you can implement in your app using user attributes and contact management.

    ### Manage user avatar [#manage-user-avatar-6]

    The Chat SDK only supports storing the URL address of the avatar file rather than the file itself. To manage user avatars, you need to use a third-party file storage service.

    To implement user avatar management in your app, take the following steps:

    1. Upload the avatar file to the third-party file storage service. Once the file is successfully uploaded, you get a URL address of the avatar file.
    2. Set the `avatarUrl` parameter in user attributes as the URL address of the avatar file.
    3. To display the avatar, call `fetchUserInfoById` to retrieve the URL of the avatar file, and then render the image on the local UI.

    ### Create and send a namecard using user attributes [#create-and-send-a-namecard-using-user-attributes-5]

    Namecard messages are custom messages that include the user ID, nickname, avatar, email address, and phone number of the specified user. To create and send a namecard, take the following steps:

    1. Set the message type as `custom`.
    2. Set the `customEvent` of the custom message as `userCard`.
    3. Retrieve the values of `nickname`, `mail`, and `avatarurl` from the user attributes, and then set them as the extension of the custom message using `customExts`.

    The following is sample code for creating and sending a namecard message:

    ```javascript
    // Set custom event type as userCard
    const customEvent = "userCard";
    // Set these attributes as the extension of the custom message using customExts.
    const customExts = {
      nickname: "The nickname",
      avatarurl: "https://avatarurl",
      mail: "abc@gmail.com",
      phone: "phone number",
      gender: "female",
      birth: "2000-01-01",
      sign: "a sign",
    };
    const options = {
      // Set the message type.
      type: "custom",
      // Set the message recipient.
      to: "username",
      // Set the message event.
      customEvent,
      // Set the message content
      customExts,
      chatType: "singleChat",
    };
    // Create a custom message.
    const msg = AgoraChat.message.create(options);
    chatClient
      .send(msg)
      .then((res) => {
        console.log("Success");
      })
      .catch((e) => {
        console.log("error");
      });
    ```