Emoticons

You can modify this configuration in the settings interface of the Dashboard, or through configuration files and environment variables.

In the configuration file, you can fill in the URL of the emoticon list under frontend.emoticons:

frontend:
  emoticons: https://raw.githubusercontent.com/ArtalkJS/Emoticons/master/grps/default.json

Emoticon Presets

The Artalk community offers many emoticon presets. You can choose a few favorite sets and easily add them to your comment system with simple configurations. Visit the repository: @ArtalkJS/Emoticons.

Supported Formats

OwO Format

OwO is an open-source JS plugin developed by @DIYgod that allows quick insertion of emoticons into the input box.

Artalk's emoticon feature draws inspiration from its excellent design and natively supports and is compatible with OwO format emoticon data files, as shown below:

frontend:
  emoticons: https://raw.githubusercontent.com/DIYgod/OwO/master/demo/OwO.json
  # Directly use OwO format emoticons ↑↑

The community also has many OwO format emoticon resources that can be used directly, for example: @2X-ercha/Twikoo-Magic.

Artalk Emoticon List File Standard Format

In addition to supporting the OwO format, Artalk also natively supports a standard format for emoticon list files:

[
  {
    name: 'Emoji',
    type: 'emoticon', // Text type
    items: [
      { key: 'Hi', val: '|´・ω・)ノ' },
      { key: 'Happy', val: 'ヾ(≧∇≦*)ゝ' },
      //...
    ],
  },
  {
    name: 'Funny',
    type: 'image', // Image type
    items: [
      {
        key: 'Original Funny',
        val: '<Image URL>',
      },
      //...
    ],
  },
]

Front-end Configuration

To configure emoticon lists on the front end, for example:

Artalk.init({
  // Default emoticon list, dynamically imported ↓↓
  emoticons:
    'https://raw.githubusercontent.com/ArtalkJS/Emoticons/master/grps/default.json',
})

TIP

Configuration file and dashboard emoticon settings have a higher priority than front-end configuration.

Disabling Emoticons

You can disable the emoticon feature by setting emoticons to false:

Artalk.init({
  emoticons: false,
})

Loading Methods

Dynamic Loading

Set the emoticons attribute to the URL of the emoticon data file. When the emoticon list is opened, Artalk will dynamically import it.

Artalk.init({
  emoticons: '<Emoticon Data File URL>',
})

Remote emoticon files support both Artalk and OwO formats, and support nested and mixed loading.

Static Loading

Compared to dynamic importing, you can statically save the emoticon list object in the JS code of the page to avoid dynamic loading:

Artalk.init({
  emoticons: [
    {
      name: 'Emoji',
      type: 'emoticon', // Text type
      items: [
        { key: 'Hi', val: '|´・ω・)ノ' },
        { key: 'Happy', val: 'ヾ(≧∇≦*)ゝ' },
        //...
      ],
    },
    {
      name: 'Funny',
      type: 'image', // Image type
      items: [
        {
          key: 'Original Funny',
          val: '<Image URL>',
        },
        //...
      ],
    },
  ],
})

Mixed Loading

Artalk supports a mix of dynamic and static loading, for example:

Artalk.init({
  emoticons: [
    // Dynamic loading
    'https://raw.githubusercontent.com/DIYgod/OwO/master/demo/OwO.json', // OwO format emoticons
    'https://raw.githubusercontent.com/qwqcode/huaji/master/huaji.json',
    // Static loading
    {
      name: 'Emoticon Name',
      type: 'emoticon', // Text type
      items: [
        { key: 'Go Master Ball', val: '(╯°A°)╯︵○○○' },
        //...
      ],
    },
  ],
})

Nested Import

Artalk supports nested import of other emoticon resources within remote emoticon resources, for example:

Artalk.init({
  emoticons: ['https://example.org/emoticons.json'],
})

Data in emoticons.json:

[
  "https://example.org/other-emoticons.json",
  //...
  {
    // Artalk format, OwO format
    //...
  }
]

This allows you to efficiently manage and load multiple emoticon sets with minimal configuration.