Details and usage of the "Notification" action template for mobile.
The contents of this page correspond to the templates listed in "Target action templates" below.

Overview

The mobile-friendly "Notification" action template can be selected from "All Menu > Action > Customer Service Templates > Show to User > Notification."

You can also search for the keyword "mobile" in the template search box.
null

Target action template
こちらのテンプレートはモバイル向け（PCブラウザ非対応）です。

  • [Mobile] Notification 01
  • [Mobile] Notification 02
    null

各テンプレートの３点リーダーより、接客サービスを作成できます（reference）。

Action Settings (Basic)

The items that can be set from the "Basic" tab on the editing screen are as follows.

2-1. Headline and detailed text

通知の見出し・詳細テキストを入力します。
空白の場合は、エリアごと非表示にできます。
null
null

The [Align text left] option allows you to change the position of the text.

  • Checked: Text is displayed left-justified
  • Unchecked: Text is centered.
    null

2-2. Text Link (Text and Link Destination)

You can switch the display of text links using the [Show text links] option.

  • Checked: Display text link (with transition when tapping notification)
  • Unchecked: Do not display text links (no transition when tapping notifications)

If you want to be redirected to a specific page when you tap the notification, please use a text link.
null

You can specify the text of the text link and the link destination.
null

2-3. Images

You can switch image display on or off using the [Show images] option.

  • Checked: Display image
  • Unchecked: Do not display images
    null

You can set an image in the notification.
reference:How to change “Image / Icon”

2-4. Option to close actions when swiping up

ポップアップをスワイプ操作した時の、挙動を切り替えられます。
null

  • Checked: "Close" notifications when you swipe
    • message_closeThe event occurs automatically
  • Unchecked: Do not close notifications when you swipe
    If you want to add a "slide down" animation to your notification display settings,Recommended to checkis.
    null

2-5. Card style

You can set the style of the notification card.
null

【通知02テンプレートのみ】

  • ① 上部パディング(px)：カード上部のパディングを指定できます
  • ② 下部パディング(px)：カード下部のパディングを指定できます
    null

活用例：AndroidのEdge to Edge対応

【共通】

  • ① Text color: You can specify the color of the heading and description text.
  • ② Text link color: You can specify the color of the text link.
  • ③ Background color: You can specify the background color of the card.
    null
  • ④ Card width (px): You can specify the width of the card.
    • *The vertical width will be automatically adjusted depending on the elements within the card.
  • ⑤ Image width (px): You can specify the display size (width) of the image in the card.
    • *Since it is displayed as a square, the height and width will be uniform.
  • ⑥ Background Rounded Corners (px): Allows you to round the corners of the card.
    null
  • ⑦ Border thickness (px): Add a border to the card and specify the thickness.
    • *If you want to add a border, please specify 1 or more.
  • ⑧ Border color: You can specify the border color of the card.
    null

The [Add shadow] option allows you to turn on or off the display of shadows.

  • Checked: Add shadow to card
  • Unchecked: No shadow on the card
    null

2-6. Close button

You can specify the display position and design of the close button.

  • Close Icon: You can specify the icon for the close button.
  • Icon Color: You can specify the icon color.
  • Background Color: You can specify the background color.
  • Icon width (px): Specify the width to display the icon.
  • Button top position (px), Button right position (px): You can specify the display position of the icon.

2-7. Display settings

You can specify the display position and animation of the action.
How to change “Display Position / Display Timing”

2-8. Data Management

By specifying user information variables, you can dynamically assign values to each user.
How to use and specifications of "Static variables/User information variables"

Action settings (customization)

More advanced customization is possible by changing the HTML/CSS/JavaScript from the "Customize" tab on the editing screen.
Please note that we do not provide support regarding specific methods of customizing actions, including inquiries via chat.

reference:Common customization recipes

others

4-1. Specifying link destination

If you want to transition to a specific screen within the app, specify a deep link.
*If the deep links are different for Android/iOS, you will need to create a customer support page for each.
reference:Link control of customer service delivered by KARTE for App

If you want to specify all transition destinations (WEB, iOS, and Android) on a single template, you will need to customize the actions.
Please note that we do not provide support regarding specific methods of customizing actions, including inquiries via chat.

4-2. Add a custom template

The actions you create can be added as templates so that you can refer to them when creating other customer service requests.
Detail is,How to add a customized action to a custom templatePlease refer to.