This section describes how to customize messages using JavaScript files and CSS files.
For the screens that allow customization to be applied, refer to For Messages.

Add a customization group for each target or purpose of the customization.
Set the following information to customization groups:

• Users, organizations, or roles for which you want to apply customizations
• JavaScript files required for customization
• CSS files required for customization

1. You can prepare JavaScript files and CSS files yourself.

2. Click the administration menu icon (gear icon) in the header.

3. Click System settings.

4. Select "Application settings" tab.

5. Click Messages.

6. Click "JavaScript and CSS customization".

7. On the "JavaScript and CSS customization" screen, click "Add customization group".

   

8. On the "Add Customization Group" screen, enter the "Customization Group name" field.

   You should set the name of the customization group.
   

9. In the "Applied to" field, click "Edit" and select the target for which you want to apply the customization.

   Select the target from the user, organization, or role. By default, the logged-in user has been set for the target.
   You also can select users who are not allowed to use Messages. Selecting such users does not cause an error.
   However, customizations are not applied to users who are not allowed to use Messages.
   The targets display in the order set automatically. Cannot change.
   

10. In the "JavaScript customization" field, set the JavaScript file you want to apply.

    You can add up to 30 files or links.

    • File:
      Only files with a file extension of ".js" can be added.
      Up to 5 MB of files can be uploaded.
    • Link:
      Specify a URL starting with "https://" in up to 512 characters.
    

11. In the "CSS customization" field, set the CSS file you want to apply.

    You can add up to 30 files or links.

    • File:
      Only files with a file extension of ".css" can be added.
      Up to 5 MB of files can be uploaded.
    • Link:
      Specify a URL starting with "https://" in up to 512 characters.
    

12. You can change the order of the files and links as needed.

    JavaScript files run from top to bottom.
    Select the checkboxes for the files and links you want to reorder, and then click "Move Up" or "Move Down".
    

13. In the "Customization" field, select "Apply".

    

14. Confirm your settings and click Add.

15. On the screen where the customizations are applied, confirm that the design and item functions are fine.

Change the settings in the customization group.

1. Click the administration menu icon (gear icon) in the header.

2. Click System settings.

3. Select "Application settings" tab.

4. Click Messages.

5. Click "JavaScript and CSS customization".

6. On the "JavaScript and CSS customization" screen, click the customization group name of the customization group to change.

7. On the "Customization group details" screen, click Edit.

   

8. On the "Edit customization group" screen, set the required items.

9. Confirm your settings and click Save.

10. On the screen where the customizations are applied, confirm that the design and item functions are fine.

Reorder the customization groups.
The JavaScript file and the CSS file are imported from top to bottom in the order appearing in "JavaScript and CSS customization" screen.

1. Click the administration menu icon (gear icon) in the header.

2. Click System settings.

3. Select "Application settings" tab.

4. Click Messages.

5. Click "JavaScript and CSS customization".

6. On the "JavaScript and CSS customization" screen, click "Reorder Customization Groups".

   

7. On the "Reorder Customization Groups" screen, reorder the customization groups.

   

8. Confirm your settings and click Save.

9. On the screen where the customizations are applied, confirm that the design and item functions are fine.

Delete customization groups.
If you delete a customization group, its settings are disabled.

Delete customization groups one by one.

1. Click the administration menu icon (gear icon) in the header.

2. Click System settings.

3. Select "Application settings" tab.

4. Click Messages.

5. Click "JavaScript and CSS customization".

6. On the "JavaScript and CSS customization" screen, click the customization group name of the customization group to delete.

7. On the "Customization group details" screen, click Delete.

   

8. Click Yes on the "Delete customization group" screen.

Delete multiple customization groups by selecting them at once.

1. Click the administration menu icon (gear icon) in the header.

2. Click System settings.

3. Select "Application settings" tab.

4. Click Messages.

5. Click "JavaScript and CSS customization".

6. On the "JavaScript and CSS customization" screen, select the checkbox of the customization group to delete, then click Delete.

   

7. Click Yes on the "Delete customization groups" screen.