# Set display content (/en/realtime-media/im/build/notifications-and-event-handling/offline-push/set-display-content/react-native)

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

You can configure the push title and content displayed in the notification bar in the following ways, with the configuration priority from low to high:

    1. Configure the display attributes of push notifications;
    2. Use the default push template;
    3. Use message extension fields;
    4. Use a custom push template.

    ## Configure the display attributes of push notifications [#configure-the-display-attributes-of-push-notifications-3]

    Call `updatePushNickname` and `updatePushDisplayStyle` to set the nickname (`nickname`) and notification display style (`displayStyle`), which includes the push title and content in the notification bar.

    This nickname indicates the nickname of the message sender that is displayed in the push notification bar of the recipient's client when a message from the user is pushed. The nickname can be different from the nickname in user attributes. However, Agora recommends that you use the same nickname for both. Therefore, if either nickname is updated, the other should be changed at the same time. To update the nickname in user attributes, see [Set user attributes](..//en/realtime-media/im/build/build-core-messaging/user-attributes#set-user-attributes).

    ```typescript
    ChatClient.getInstance()
      .pushManager.updatePushNickname(nickname)
      .then(() => {
        console.log("Succeeded in updating the nickname.");
      })
      .catch((reason) => {
        console.log("Failed to update the nickname.", reason);
      });
    ```

    ```typescript
    ChatClient.getInstance()
      .pushManager.updatePushDisplayStyle(displayStyle)
      .then(() => {
        console.log("Succeeded in updating the display style.");
      })
      .catch((reason) => {
        console.log("Failed to update the display style.", reason);
      });
    ```

    You can call `fetchPushOptionFromServer` to retrieve the display attributes in a push notification, as shown in the following example:

    ```typescript
    ChatClient.getInstance()
      .pushManager.fetchPushOptionFromServer()
      .then(() => {
        console.log("Succeeded in getting the push configurations.");
      })
      .catch((reason) => {
        console.log("Failed to get the push configuration.", reason);
      });
    ```

    To display the message content in the notification bar, set the notification display style (`displayStyle`). This parameter has the following two settings:

    * (Default) `Simple`: Regardless of whether `nickname` is set, for any type of message pushed, the notification bar uses the default display settings, that is, the push title is "You have a new message" and the push content is "Please click to view".
    * `Summary`: Displays the message content. The nickname you set only takes effect when `displayStyle` is `Summary`, not `Simple`.

    The following table uses a one-to-one chat text message as an example to introduce the settings of the display attributes.
    For group chats, "Push nickname of message sender" and "Chat user ID of message sender" in the table below are displayed as "Group ID".

    | Parameter settings                                             | Push display                                                                                               | Image                                                                                            |
    | :------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------- |
    | `displayStyle`: (default) `Simple` `nickname`: Set or not set. | Push title: "You have a new message"  Push content: "Please click to view"                                 | ![push\_displayattribute\_1](https://assets-docs.agora.io/images/im/push_displayattribute_1.png) |
    | `displayStyle`: `Summary`  `nickname`: Set a specific value    | Push title: "You have a new message"  Push content: "Push nickname of the message sender: message content" | ![push\_displayattribute\_2](https://assets-docs.agora.io/images/im/push_displayattribute_2.png) |
    | `displayStyle`: `Summary`  `nickname`: Not set                 | Push title: “You have a new message”  Push content: “Chat user ID of the message sender: message content”  | ![push\_displayattribute\_3](https://assets-docs.agora.io/images/im/push_displayattribute_3.png) |

    ## Use the default push template [#use-the-default-push-template-4]

    The default push template is mainly used when the default configuration provided by the server does not meet your needs. It allows you to set the global push title and push content. For example, the default settings provided by the server are push titles and content in English. If you need to use push titles and content in another language, you can set the push template in the corresponding language.

    To use the default template, create a default push template in [Agora Console](https://console.agora.io/v2) or [call RESTful API](/en/api-reference/api-ref/im/offline-push/offline-push-configuration). The template name is `default`. After setting, the default template is automatically used when pushing messages, and there is no need to enter the template name when creating messages.

    Follow the steps below to create a default push template in [Agora Console](https://console.agora.io/v2):

    1. Log in to [Agora Console](https://console.agora.io/v2) and click **Project Management** in the left navigation bar.

    2. On the **Project Management** page, click **Config** in the **Action** column for the project that has Chat enabled.

    3. On the **Edit Project** page, in the **Features** area, click **Enable / Config** for Chat.

    4. On the project configuration page, select **Features** > **Push Template**, click **Add Push Template**, and configure the fields in the pop-up dialog box, as shown in the following figure:

       ![push\_add\_template](https://assets-docs.agora.io/images/im/push_add_template.png)

    5. Set the **Template Name** to **default**, then set the **Title** and **Content** parameters, and click **OK**.

       | Parameter         | Type   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Required |
       | :---------------- | :----- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
       | **Template Name** | String | The push template name. The default template is **default**.                                                                                                                                                                                                                                                                                                                                                                                                             | Yes      |
       | **Title**         | Array  | The push title. Can be set in the following ways: Enter a fixed push title. Use built-in variables and enter `{$fromNickname}, {$msg}`. Set custom variables through the value array. The field format is `{0} {1} {2} ... {n}`. If the default template is used, the first two settings do not need to pass in this parameter when creating a message. The server automatically obtains it. The third setting method needs to be passed in through the extension field. | Yes      |
       | **Content**       | Array  | The push content. Can be set in the following ways: Enter fixed push content. Use variables and enter `{$fromNickname}, {$msg}`. Set custom variables through the value array. The field format is `{0} {1} {2} ... {n}`. If the default template is used, the first two settings do not require parameters to be passed in when creating a message. The server automatically obtains them. The third setting method needs to be passed in through the extension field.  | Yes      |

    ## Use message extension fields [#use-message-extension-fields-3]

    When creating a push message, you can set the `em_push_title` and `em_push_content` message extension fields to customize the push title and content, respectively.

    ```typescript
    msg.attributes = {
      // Message extension field. This field is a built-in field and the field name cannot be modified.
      em_apns_ext: {
        em_push_title: " custom push title " , // Custom push message title. This field is a built-in field and the field name cannot be modified.
        em_push_content: " custom push content " , // Custom push message content. This field is a built-in field and the field name cannot be modified.
      },
    };
    ```

    The data structure of the custom display field is as follows:

    ```java
    {
        "em_apns_ext": {
            "em_push_title": "custom push title",
            "em_push_content": "custom push content"
        }
    }
    ```

    ## Use a custom push template [#use-a-custom-push-template-4]

    The steps to use a custom push template are as follows:

    1. If you use a custom push template, create it in [Agora Console](https://console.agora.io/v2) or call [RESTful API](/en/api-reference/api-ref/im/offline-push/offline-push-configuration#create-a-push-template). For a description of the parameters in the **Add Push Template** dialog box, see the section about using the default template. When using a custom template, regardless of how the **Title** and **Content** parameters are set, they must be passed in through the extension fields when creating a message.

    2. When creating a message, pass in the template name, push title, and push content by using the extension fields. The push title and content in the notification bar use the formats in the template, respectively.

       ```typescript
       // The following takes text messages as an example. The setting methods for other types of messages are the same.
       const msg = ChatMessage.createTextMessage(targetId, content, targetType);
       msg.attributes = {
         em_push_template: {
           name: "foo",
           // Set the value array of the push title in the template. If the push title specified in the template is placeholder data, you can customize the title here; if the specified title is a fixed value, the title will be a fixed value when using this template.
           title_args: "title",
           // Set the value array of the pushed content in the template. If the template content specified in the template is placeholder data, you can customize the content here; if the specified content is a fixed value, the content will be a fixed value when using the template.
           content_args: "test",
         },
       };
       ChatClient.getInstance()
         .chatManager.sendMessage(msg, {
           onError: (error) => {},
           onSuccess: (msg) => {},
         } as  any )
         .then(() => {
           console.log("send message success");
         })
         .catch((reason) => {
           console.log("set message fail.", reason);
         });
       ```

    The JSON structure of the push template is as follows:

    ```json
    "em_push_template":{
            "name":"test6",
            "title_args":[
                "test1"
            ],
            "content_args":[
                "{$fromNickname}",
                "{$msg}"
            ]
    }
    ```

    The message receiver can call `selectPushTemplate` to pass in the push template name and select the template to use.

    If the sender uses a push template when sending a message, the content displayed in the push notification bar is based on the sender's push template.

    ```typescript
    ChatClient.getInstance()
      .pushManager.selectPushTemplate(templateName)
      .then(() => {
        console.log("Succeeded in updating the nickname.");
      })
      .catch((reason) => {
        console.log("Failed to update the nickname.", reason);
      });
    ```