nextcloud_stickerpicker

integration_stickers

integration_stickers adds a /stickers smart picker integration for Nextcloud Talk.

The picker reads local sticker files from stickerpacks/ and inserts the selected sticker into chat as a URL served by this app.

Installation

1. Build frontend assets

Run this in the app source directory before deploying:

npm install
npm run build

2. Install on a standard Nextcloud server

1. Copy this project folder to your Nextcloud custom_apps directory and name it integration_stickers.
2. Ensure the web server user can read the app files.
3. Enable the app:

sudo -u www-data php /var/www/nextcloud/occ app:enable integration_stickers

1. Open Nextcloud Talk and use /stickers.

Common custom apps path:

• /var/www/nextcloud/custom_apps/integration_stickers

3. Install on Nextcloud AIO (Docker)

In AIO, apps are loaded from /var/www/html/custom_apps inside the nextcloud-aio-nextcloud container.

1. Copy the app into that container path:

docker cp ./integration_stickers nextcloud-aio-nextcloud:/var/www/html/custom_apps/integration_stickers

1. Enable the app:

docker exec --user www-data nextcloud-aio-nextcloud php occ app:disable integration_stickers

1. Restart the Nextcloud container (recommended after manual app copy):

docker restart nextcloud-aio-nextcloud

1. Open Talk and run /stickers.

If your AIO container name differs, replace nextcloud-aio-nextcloud with your actual container name from docker ps.

Features

• /stickers picker interface in Talk
• Sticker discovery from local stickerpacks/ directories
• Supports jpg, jpeg, png, and gif
• Public sticker URLs for chat messages, including public conversations
• No external provider dependency

Project layout

• appinfo/ App metadata and routes
• lib/ PHP backend (search provider, reference provider, API controller, sticker service)
• src/ Frontend picker and reference widget
• stickerpacks/ Sticker packs used by the picker

How it works

1. The app registers a searchable reference provider (stickers) and a search provider (stickers-search-files).
2. Nextcloud Talk exposes the provider through the slash-command smart picker.
3. The Vue custom picker fetches sticker entries from an OCS endpoint.
4. Selecting a sticker emits its URL back to Talk, which inserts it into chat.
5. The URL is resolved as a reference and rendered as an image preview.

Additional Nice Things

Using the Custom CSS app from the NextCloud AppStore lets you tweak the appearance so the filename isn’t obvious. Install the app and then in Administration Settings, under Theming, paste this into the Custom CSS app:

  /* Talk only, sticker links only */
  #content.app-spreed .markdown-message a[href*="/apps/integration_stickers/s/"],
  #content.app-spreed .markdown-message a[href*="giphy.com/gifs/"],
  #content.app-spreed .markdown-message a[href*="/apps/integration_stickers/sticker/"] {
  	display: none !important;
  }

Development

PHP

composer install
composer run lint

Frontend

npm install
npm run build

Build output is generated by Vite in Nextcloud app format.

Notes

• Sticker files are discovered at runtime from stickerpacks/ inside the app directory.
• File access is limited to the indexed sticker files and image MIME types.

Adding sticker packs

Sticker packs must be placed inside this app folder:

• custom_apps/integration_stickers/stickerpacks/<pack_name>/

Supported file extensions:

• .jpg
• .jpeg
• .png
• .gif

Standard Nextcloud server

Copy your files into:

• /var/www/nextcloud/custom_apps/integration_stickers/stickerpacks/<pack_name>/

Ensure permissions are readable by the web server user (www-data on many systems).

Nextcloud AIO (Docker)

Copy your pack into the Nextcloud container:

docker cp ./stickerpacks/<pack_name>/. nextcloud-aio-nextcloud:/var/www/html/custom_apps/integration_stickers/stickerpacks/<pack_name>/
docker exec nextcloud-aio-nextcloud sh -c "chown -R www-data:www-data /var/www/html/custom_apps/integration_stickers/stickerpacks/<pack_name>"

If stickers are listed but images do not render

Try these in order:

1. Hard-refresh the browser page to clear cached assets and references.
2. Close and reopen the Talk chat.
3. Restart the Nextcloud container/service.

For AIO:

docker restart nextcloud-aio-nextcloud

This site is open source. Improve this page.