E-mail Customization

This section describes how to customize e-mails using JavaScript files and CSS files.
The E-mail Customization function is available in Garoon version 5.5.0 or later.

For the screens that allow customization to be applied, refer to For E-mails.

Adding Customization Group

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
Steps:
  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 E-mail.

  6. Click "JavaScript and CSS customization".

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

    Image with an action link to add customization groups

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

    You should set the name of the customization group.
    Image of the input field of customization group name

  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 E-mail. Selecting such users does not cause an error.
    However, customizations are not applied to users who are not allowed to use E-mail.
    The targets display in the order set automatically. Cannot change.
    Image of the action link to be changed Image of selecting targets for customization

  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.
    Image of an adding a JavaScript file action link

  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.
    Image of an adding a CSS file action link

  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".
    Image of the reorder button

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

    Image of the Apply radio button

  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.

Changing Customization Groups

Change the settings in the customization group.

Steps:
  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.

    Image with the Edit action link

  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.

Reordering Customization Groups

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.

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

  2. Click System settings.

  3. Select "Application settings" tab.

  4. Click E-mail.

  5. Click "JavaScript and CSS customization".

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

    Image with the reordering action link

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

    Screen to reorder 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.

Deleting Customization Groups

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

Deleting Customization Groups One by One

Delete customization groups one by one.

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

  2. Click System settings.

  3. Select "Application settings" tab.

  4. Click E-mail.

  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.

    Image of the action link to delete

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

Deleting Multiple Customization Groups in Bulk

Delete multiple customization groups by selecting them at once.

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

  2. Click System settings.

  3. Select "Application settings" tab.

  4. Click E-mail.

  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.

    Image of selecting the customization group to be deleted

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