diff --git a/.github/workflows/screenshot-failure-comment.yml b/.github/workflows/screenshot-failure-comment.yml
index 35f5f3b..63b0c92 100644
--- a/.github/workflows/screenshot-failure-comment.yml
+++ b/.github/workflows/screenshot-failure-comment.yml
@@ -12,6 +12,7 @@ on:
 
 permissions:
   actions: read
+  contents: write
   pull-requests: write
 
 jobs:
@@ -36,23 +37,71 @@ jobs:
             echo "found=false" >> "$GITHUB_OUTPUT"
           fi
 
+      - name: Checkout report branch base
+        if: steps.artifacts.outputs.found == 'true'
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.repository.default_branch }}
+          path: report-repo
+          fetch-depth: 1
+
+      - name: Publish screenshot report images
+        if: steps.artifacts.outputs.found == 'true'
+        id: publish
+        env:
+          GH_REPO: ${{ github.repository }}
+          PR_NUMBER: ${{ github.event.workflow_run.pull_requests[0].number }}
+          RUN_ID: ${{ github.event.workflow_run.id }}
+          REPORT_BRANCH: screenshot-reports
+        shell: bash
+        run: |
+          set -euo pipefail
+
+          cd report-repo
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+
+          if git ls-remote --exit-code --heads origin "$REPORT_BRANCH" >/dev/null 2>&1; then
+            git fetch --depth=1 origin "$REPORT_BRANCH"
+            git switch -C "$REPORT_BRANCH" FETCH_HEAD
+          else
+            git switch --orphan "$REPORT_BRANCH"
+            git rm -rf . >/dev/null 2>&1 || true
+          fi
+
+          report_dir="pr-$PR_NUMBER/run-$RUN_ID"
+          mkdir -p "$report_dir"
+          cp ../screenshot-artifacts/*.png "$report_dir"/
+
+          cat > "$report_dir/README.md" <<EOF
+          Screenshot comparison generated for PR #$PR_NUMBER from workflow run $RUN_ID.
+          EOF
+
+          git add "$report_dir"
+          git commit -m "docs: screenshot report for PR #$PR_NUMBER run $RUN_ID"
+          git push origin "HEAD:$REPORT_BRANCH"
+
+          echo "base_url=https://raw.githubusercontent.com/$GH_REPO/$REPORT_BRANCH/$report_dir" >> "$GITHUB_OUTPUT"
+
       - name: Comment on pull request
         if: steps.artifacts.outputs.found == 'true'
         env:
           GH_TOKEN: ${{ github.token }}
           GH_REPO: ${{ github.repository }}
           PR_NUMBER: ${{ github.event.workflow_run.pull_requests[0].number }}
+          RUN_ID: ${{ github.event.workflow_run.id }}
+          REPORT_BASE_URL: ${{ steps.publish.outputs.base_url }}
         shell: bash
         run: |
           set -euo pipefail
 
-          cat > screenshot-comment.md <<'EOF'
+          cat > screenshot-comment.md <<EOF
           ## Documentation screenshot check failed
 
           One or more generated documentation screenshots differ from the committed versions.
-          EOF
 
-          attachments=()
+          The images below are published from the workflow artifact so they can be reviewed directly in this PR.
+          EOF
 
           add_report() {
             local key="$1"
@@ -68,42 +117,44 @@ jobs:
             cat >> screenshot-comment.md <<EOF
 
           ### $label
+          EOF
 
-          #### Expected
-
-          ![Expected $label](./$expected)
+            if [[ -f "$expected" ]]; then
+              cat >> screenshot-comment.md <<EOF
 
-          #### Generated
+          #### Committed
 
-          ![Generated $label](./$actual)
+          ![Committed $label]($REPORT_BASE_URL/$key.expected.png?run=$RUN_ID)
           EOF
-
-            if [[ -f "$expected" ]]; then
-              attachments+=("--attach" "./$expected#Expected $label")
             fi
 
-            attachments+=("--attach" "./$actual#Generated $label")
+            cat >> screenshot-comment.md <<EOF
+
+          #### Generated
+
+          ![Generated $label]($REPORT_BASE_URL/$key.actual.png?run=$RUN_ID)
+          EOF
 
             if [[ -f "$diff" ]]; then
               cat >> screenshot-comment.md <<EOF
 
-          #### Diff
+          #### Difference
 
-          ![Visual diff for $label](./$diff)
+          ![Visual difference for $label]($REPORT_BASE_URL/$key.diff.png?run=$RUN_ID)
           EOF
-              attachments+=("--attach" "./$diff#Visual diff for $label")
             fi
           }
 
           add_report settings "Plugin settings"
           add_report preview "Telegram preview"
 
-          cat >> screenshot-comment.md <<'EOF'
+          cat >> screenshot-comment.md <<EOF
+
+          [Download the workflow artifact](https://github.com/$GH_REPO/actions/runs/$RUN_ID)
 
           If the visual change is expected, run `npm run screenshots:update` and commit the updated PNG files.
           EOF
 
           gh pr comment "$PR_NUMBER" \
             --repo "$GH_REPO" \
-            --body-file screenshot-comment.md \
-            "${attachments[@]}"
+            --body-file screenshot-comment.md
diff --git a/README.md b/README.md
index 041b53c..272d772 100644
--- a/README.md
+++ b/README.md
@@ -31,9 +31,10 @@ The image below is a locally generated preview of a rendered Telegram message us
 2. Add the bot to the Telegram group that should receive survey notifications.
 3. Get the group chat ID. One option is to temporarily add [@RawDataBot](https://t.me/RawDataBot) to the group, read the `chat.id` value it reports, and remove the bot afterwards.
 4. Open the LSTelegramNotify settings in LimeSurvey.
-5. Set `Auth Token` to the token created by BotFather and `Chat id` to the destination group ID.
-6. Choose the parse mode and notification options you want, then save the settings.
-7. Use `Send test message` to verify that the saved bot token and chat destination work before relying on survey notifications.
+5. Set `Bot token` to the token created by BotFather and `Chat ID` to the destination group ID.
+6. Enable `Send a custom message` if you want a Telegram message for each completed response. When enabled, choose the `Message format` and edit the `Message template`.
+7. Enable the PDF and CSV options independently if you also want those files sent with each completed response.
+8. Save the settings, then use `Send test message` to verify that the saved bot token and chat destination work before relying on survey notifications.
 
 The README screenshots below show the current plugin settings and a rendered Telegram notification example. They are generated and validated automatically by the repository screenshot workflow.
 
@@ -65,7 +66,7 @@ These placeholders work in both legacy and mustache syntax:
 - `{urlExport}` / `{{urlExport}}`
 - `{urlAttachments}` / `{{urlAttachments}}`
 
-When `ParseMode` is `HTML`, the rendered template is sent through Telegram's `sendRichMessage` API using Rich HTML. This enables richer blocks such as headings, tables, `<details>` and media such as `<img src="https://example.test/photo.jpg" />`. All placeholder values are escaped before rendering so survey content cannot break the markup.
+When `Message format` is `HTML`, the rendered template is sent through Telegram's `sendRichMessage` API using Rich HTML. This enables richer blocks such as headings, tables, `<details>` and media such as `<img src="https://example.test/photo.jpg" />`. All placeholder values are escaped before rendering so survey content cannot break the markup.
 
 ### Survey field placeholders
 
diff --git a/img/settings.png b/img/settings.png
index e6a82d3..97bf939 100644
Binary files a/img/settings.png and b/img/settings.png differ
diff --git a/scripts/screenshots/README.md b/scripts/screenshots/README.md
index 7b18000..2de5f47 100644
--- a/scripts/screenshots/README.md
+++ b/scripts/screenshots/README.md
@@ -46,5 +46,7 @@ Useful optional overrides:
 - `Documentation Screenshots` starts the repository-root disposable LimeSurvey stack with Docker Compose (`up -d --force-recreate`) and validates both `img/settings.png` and `img/telegram_example.png` in a single job.
 - The workflow should break when the plugin settings UI changes enough to make `img/settings.png` drift from the committed version.
 
-When validation fails, the workflow summary tells you which command to run next and uploads diff artifacts under `test-results/screenshots/`.
+When validation fails, the workflow summary tells you which command to run next and uploads the committed, generated, and visual-diff images under `test-results/screenshots/`.
+
+For pull requests, the `Screenshot failure comment` workflow downloads that artifact, publishes the images to the dedicated `screenshot-reports` branch, and comments on the PR with the committed screenshot, the generated screenshot, and the visual difference. The report branch is used because GitHub Actions tokens cannot upload PR comment attachments through `gh pr comment --attach`.
 
diff --git a/scripts/screenshots/browser-flows.mjs b/scripts/screenshots/browser-flows.mjs
index 6aab3d0..024404c 100644
--- a/scripts/screenshots/browser-flows.mjs
+++ b/scripts/screenshots/browser-flows.mjs
@@ -289,6 +289,37 @@ async function waitForDocumentFonts(page) {
   });
 }
 
+export async function fillTelegramConnectionSettings(page, maskedSettingsValues) {
+  await page.getByRole('textbox', { name: 'Bot token' }).fill(maskedSettingsValues.authToken);
+  await page.getByRole('textbox', { name: 'Chat ID' }).fill(maskedSettingsValues.chatId);
+}
+
+export function getPluginSettingContainer(page, settingName) {
+  const settingField = page.locator(
+    `[name="${settingName}"], [name$="[${settingName}]"]`
+  ).first();
+
+  return settingField.locator(
+    'xpath=ancestor::*[contains(concat(" ", normalize-space(@class), " "), " mb-3 ") or contains(concat(" ", normalize-space(@class), " "), " form-group ")][1]'
+  );
+}
+
+export async function enableCustomMessageSettings(page) {
+  const sendMessage = page.getByRole('checkbox', { name: 'Send a custom message' });
+  const messageFormatContainer = getPluginSettingContainer(page, 'ParseMode');
+  const messageTemplateContainer = getPluginSettingContainer(page, 'DefaultText');
+  const messageTemplate = page.getByRole('textbox', { name: 'Message template' });
+
+  await messageFormatContainer.waitFor({ state: 'hidden' });
+  await messageTemplateContainer.waitFor({ state: 'hidden' });
+
+  await sendMessage.check();
+  await messageFormatContainer.waitFor({ state: 'visible' });
+  await messageTemplateContainer.waitFor({ state: 'visible' });
+
+  return messageTemplate;
+}
+
 export async function captureSettingsScreenshot(page, {
   configureUrl,
   pluginName,
@@ -299,10 +330,9 @@ export async function captureSettingsScreenshot(page, {
   await page.goto(configureUrl, { waitUntil: 'networkidle' });
   await page.getByRole('tab', { name: 'Settings' }).click();
 
-  await page.getByRole('textbox', { name: 'Auth Token' }).fill(maskedSettingsValues.authToken);
-  await page.getByRole('textbox', { name: 'Chat id' }).fill(maskedSettingsValues.chatId);
+  await fillTelegramConnectionSettings(page, maskedSettingsValues);
 
-  const defaultTextField = page.getByRole('textbox', { name: 'Default Text' });
+  const defaultTextField = await enableCustomMessageSettings(page);
 
   await defaultTextField.fill(maskedSettingsValues.defaultText);
   await defaultTextField.evaluate((element) => {
diff --git a/scripts/screenshots/checker.mjs b/scripts/screenshots/checker.mjs
index 9475a94..768ab42 100644
--- a/scripts/screenshots/checker.mjs
+++ b/scripts/screenshots/checker.mjs
@@ -14,12 +14,26 @@ export function comparePngBuffers(expectedBuffer, actualBuffer, {
   const actualImage = PNG.sync.read(actualBuffer);
 
   if (expectedImage.width !== actualImage.width || expectedImage.height !== actualImage.height) {
+    const width = Math.max(expectedImage.width, actualImage.width);
+    const height = Math.max(expectedImage.height, actualImage.height);
+    const expectedCanvas = normalizePngCanvas(expectedImage, width, height);
+    const actualCanvas = normalizePngCanvas(actualImage, width, height);
+    const diffImage = new PNG({ width, height });
+    const diffPixels = pixelmatch(
+      expectedCanvas.data,
+      actualCanvas.data,
+      diffImage.data,
+      width,
+      height,
+      { threshold: pixelmatchThreshold }
+    );
+
     return {
       matches: false,
       reason: `Image dimensions differ: expected ${expectedImage.width}x${expectedImage.height}, got ${actualImage.width}x${actualImage.height}`,
-      diffPixels: Number.POSITIVE_INFINITY,
-      diffPixelRatio: 1,
-      diffBuffer: null,
+      diffPixels,
+      diffPixelRatio: diffPixels / (width * height),
+      diffBuffer: PNG.sync.write(diffImage),
     };
   }
 
@@ -47,6 +61,21 @@ export function comparePngBuffers(expectedBuffer, actualBuffer, {
   };
 }
 
+function normalizePngCanvas(image, width, height) {
+  const canvas = new PNG({ width, height });
+
+  for (let index = 0; index < canvas.data.length; index += 4) {
+    canvas.data[index] = 255;
+    canvas.data[index + 1] = 255;
+    canvas.data[index + 2] = 255;
+    canvas.data[index + 3] = 255;
+  }
+
+  PNG.bitblt(image, canvas, 0, 0, image.width, image.height, 0, 0);
+
+  return canvas;
+}
+
 export async function assertScreenshotsUpToDate(config, { logger = console, browserType } = {}) {
   const screenshots = await captureScreenshots(config, { logger, browserType });
   const refreshCommand = buildScreenshotCommand('screenshots:update', config.targets);
diff --git a/src/Plugin/DefaultTextHelpBuilder.php b/src/Plugin/DefaultTextHelpBuilder.php
index 4f8cdc2..9f25415 100644
--- a/src/Plugin/DefaultTextHelpBuilder.php
+++ b/src/Plugin/DefaultTextHelpBuilder.php
@@ -21,7 +21,7 @@ public function build(?int $surveyId = null): string
             '<ul>' . $this->buildMetadataPlaceholderHelpItems() . '</ul>',
             '<p><strong>Survey field syntax</strong></p>',
             '<ul>' . $this->buildFieldSyntaxHelpItems() . '</ul>',
-            '<p>When <code>ParseMode</code> is <code>HTML</code>, placeholder values are escaped automatically before rendering.</p>',
+            '<p>When <strong>Message format</strong> is <code>HTML</code>, placeholder values are escaped automatically before rendering.</p>',
         ];
 
         if ($surveyId === null) {
diff --git a/src/Plugin/LSTelegramNotifyPlugin.php b/src/Plugin/LSTelegramNotifyPlugin.php
index 31772df..e9d8566 100644
--- a/src/Plugin/LSTelegramNotifyPlugin.php
+++ b/src/Plugin/LSTelegramNotifyPlugin.php
@@ -35,48 +35,39 @@ class LSTelegramNotifyPlugin extends \PluginBase
 	protected $settings = [
 		'Enable' => [
 			'type' => 'checkbox',
-			'label' => 'Enable telegram notifications',
+			'label' => 'Enable Telegram notifications',
 			'default' => true,
 		],
 		'AuthToken' => [
 			'type' => 'string',
-			'label' => 'Auth Token',
-			'help' => 'Bot API auth token, you can get one at <a href="https://t.me/BotFather" target="_blank">BotFather</a>.',
+			'label' => 'Bot token',
+			'help' => 'Telegram Bot API token. Create or manage one with <a href="https://t.me/BotFather" target="_blank">BotFather</a>.',
 		],
 		'ChatId' => [
 			'type' => 'string',
-			'label' => 'Chat id',
-			'help' => 'The ID of group that will receive the notification messages. You can add the bot <a href="https://t.me/RawDataBot" target="_blank">RawDataBot</a> to your group, get the chat_id and after remove this bot from group.',
+			'label' => 'Chat ID',
+			'help' => 'The ID of the Telegram group that will receive notifications. You can temporarily add <a href="https://t.me/RawDataBot" target="_blank">RawDataBot</a> to the group to find its chat ID, then remove the bot.',
 		],
 		'TestMessage' => [
 			'type' => 'info',
 			'content' => '',
 		],
+		'SendMessage' => [
+			'type' => 'checkbox',
+			'label' => 'Send a custom message',
+			'help' => 'Send a Telegram text message when a survey response is completed. Enable this to choose the message format and edit the template below.',
+			'default' => false,
+		],
 		'ParseMode' => [
 			'type' => 'select',
-			'label' => 'Parse mode',
+			'label' => 'Message format',
 			'options' => array('HTML' => 'HTML', 'Markdown'  => 'Markdown', 'MarkdownV2' => 'MarkdownV2', 'Text' => 'Text'),
-			'help' => 'As the Telegram bot API <a href="https://core.telegram.org/bots/api#formatting-options" target="_blank">formatting options</a>.',
+			'help' => 'Formatting used for the custom Telegram message. See the <a href="https://core.telegram.org/bots/api#formatting-options" target="_blank">Telegram formatting options</a>.',
 			'default' => 'HTML',
 		],
-		'SendPdf' => [
-			'type' => 'checkbox',
-			'label' => 'Check to send the answer as PDF file',
-			'default' => false,
-		],
-		'SendCsv' => [
-			'type' => 'checkbox',
-			'label' => 'Check to send all answers as CSV file',
-			'default' => false,
-		],
-		'SendMessage' => [
-			'type' => 'checkbox',
-			'label' => 'Check to send a text message using the default text template',
-			'default' => false,
-		],
 		'DefaultText' => [
 			'type' => 'text',
-			'label' => 'Default Text',
+			'label' => 'Message template',
 			'default' =>
 				"New Survey Completed!\n" .
 				"Title: <code>{title}</code>\n" .
@@ -84,6 +75,16 @@ class LSTelegramNotifyPlugin extends \PluginBase
 				"ResponseId: <code>{responseId}</code>\n" .
 				"PDF: <a href=\"{urlPDF}\">here</a>"
 		],
+		'SendPdf' => [
+			'type' => 'checkbox',
+			'label' => 'Send the response as a PDF file',
+			'default' => false,
+		],
+		'SendCsv' => [
+			'type' => 'checkbox',
+			'label' => 'Send all survey responses as a CSV file',
+			'default' => false,
+		],
 	];
 
 	/**
@@ -94,6 +95,7 @@ public function init(): void
 		$this->settings['DefaultText']['help'] = $this->createDefaultTextHelpBuilder()->build();
 		$this->settings['TestMessage'] = $this->createTestMessageUiBuilder()->buildSetting();
 		$this->registerTestMessageScript();
+		$this->registerMessageSettingsVisibilityScript();
 		$this->subscribe('newSurveySettings');
 		$this->subscribe('afterSurveyComplete');
 		$this->subscribe('beforeSurveySettings');
@@ -360,6 +362,11 @@ protected function createTestMessageUiBuilder(): TestMessageUiBuilder
 		return new TestMessageUiBuilder();
 	}
 
+	protected function createMessageSettingsUiBuilder(): MessageSettingsUiBuilder
+	{
+		return new MessageSettingsUiBuilder();
+	}
+
 	protected function createTelegramApi(string $authToken): Api
 	{
 		return new Api($authToken);
@@ -488,7 +495,7 @@ public function beforeSurveySettings(): void
 					],
 					'ChatId' => [
 						'type' => 'string',
-						'label' => 'Chat id',
+						'label' => $this->settings['ChatId']['label'],
 						'help' => $this->settings['ChatId']['help'],
 						'current' => $this->get(
 							'ChatId',
@@ -498,6 +505,22 @@ public function beforeSurveySettings(): void
 						),
 					],
 					'TestMessage' => $this->createTestMessageUiBuilder()->buildSetting($surveyId),
+					'SendMessage' => [
+						'type' => $this->settings['SendMessage']['type'],
+						'label' => $this->settings['SendMessage']['label'],
+						'help' => $this->settings['SendMessage']['help'],
+						'current' => $this->get(
+							'SendMessage',
+							'Survey',
+							$surveyId,
+							$this->get(
+								'SendMessage',
+								null,
+								null,
+								$this->settings['SendMessage']['default']
+							)
+						),
+					],
 					'ParseMode' => [
 						'type' => $this->settings['ParseMode']['type'],
 						'label' => $this->settings['ParseMode']['label'],
@@ -516,6 +539,22 @@ public function beforeSurveySettings(): void
 							)
 						),
 					],
+					'DefaultText' => [
+						'type' => 'text',
+						'label' => $this->settings['DefaultText']['label'],
+						'help' => $defaultTextHelp,
+						'current' => $this->get(
+							'DefaultText',
+							'Survey',
+							$surveyId,
+							$this->get(
+								'DefaultText',
+								null,
+								null,
+								$this->settings['DefaultText']['default']
+							)
+						),
+					],
 					'SendPdf' => [
 						'type' => $this->settings['SendPdf']['type'],
 						'label' => $this->settings['SendPdf']['label'],
@@ -546,37 +585,7 @@ public function beforeSurveySettings(): void
 							)
 						),
 					],
-					'SendMessage' => [
-						'type' => $this->settings['SendMessage']['type'],
-						'label' => $this->settings['SendMessage']['label'],
-						'current' => $this->get(
-							'SendMessage',
-							'Survey',
-							$surveyId,
-							$this->get(
-								'SendMessage',
-								null,
-								null,
-								$this->settings['SendMessage']['default']
-							)
-						),
-					],
-					'DefaultText' => [
-						'type' => 'text',
-						'label' => 'Default Text',
-						'help' => $defaultTextHelp,
-						'current' => $this->get(
-							'DefaultText',
-							'Survey',
-							$surveyId,
-							$this->get(
-								'DefaultText',
-								null,
-								null,
-								$this->settings['DefaultText']['default']
-							)
-						),
-					]
+
 				]
 			]
 		);
@@ -694,6 +703,21 @@ public function newSurveySettings(): void
 		}
 	}
 
+	protected function registerMessageSettingsVisibilityScript(): void
+	{
+		$script = $this->createMessageSettingsUiBuilder()->buildScript();
+
+		if ($script === '') {
+			return;
+		}
+
+		\Yii::app()->getClientScript()->registerScript(
+			'ls-telegram-notify-message-settings-visibility',
+			$script,
+			\LSYii_ClientScript::POS_POSTSCRIPT
+		);
+	}
+
 	protected function registerSurveyPluginSettingsSaveWorkaround(): void
 	{
 		$saveUrl = \App()->createAbsoluteUrl(
diff --git a/src/Plugin/MessageSettingsUiBuilder.php b/src/Plugin/MessageSettingsUiBuilder.php
new file mode 100644
index 0000000..c25c77e
--- /dev/null
+++ b/src/Plugin/MessageSettingsUiBuilder.php
@@ -0,0 +1,91 @@
+<?php
+
+namespace LibreCodeCoop\LSTelegramNotify\Plugin;
+
+final class MessageSettingsUiBuilder
+{
+    public function buildScript(): string
+    {
+        return <<<'JS'
+var findLSTelegramNotifySettingField = function (settingName) {
+    return $(
+        '[name="' + settingName + '"], ' +
+        '[name$="[' + settingName + ']"]'
+    );
+};
+
+var findLSTelegramNotifySettingContainer = function ($field) {
+    if (!$field.length) {
+        return $();
+    }
+
+    var $container = $field.closest('.mb-3, .form-group');
+
+    if ($container.length) {
+        return $container.first();
+    }
+
+    return $field.closest('.row').first();
+};
+
+var updateLSTelegramNotifyMessageSettingsVisibility = function () {
+    var $sendMessage = findLSTelegramNotifySettingField('SendMessage')
+        .filter(':checkbox')
+        .first();
+
+    if (!$sendMessage.length) {
+        return;
+    }
+
+    var enabled = $sendMessage.is(':checked');
+
+    ['ParseMode', 'DefaultText'].forEach(function (settingName) {
+        findLSTelegramNotifySettingContainer(
+            findLSTelegramNotifySettingField(settingName).first()
+        ).toggle(enabled);
+    });
+};
+
+$(updateLSTelegramNotifyMessageSettingsVisibility);
+
+if (window.MutationObserver && document.body) {
+    var lsTelegramNotifyMessageSettingsObserver = new MutationObserver(function (mutations) {
+        var hasAddedNodes = mutations.some(function (mutation) {
+            return mutation.addedNodes && mutation.addedNodes.length > 0;
+        });
+
+        if (hasAddedNodes) {
+            updateLSTelegramNotifyMessageSettingsVisibility();
+        }
+    });
+
+    lsTelegramNotifyMessageSettingsObserver.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+}
+
+$(document)
+    .off(
+        'change.lsTelegramNotifyMessageSettings',
+        'input[type="checkbox"][name$="[SendMessage]"], input[type="checkbox"][name="SendMessage"]'
+    )
+    .on(
+        'change.lsTelegramNotifyMessageSettings',
+        'input[type="checkbox"][name$="[SendMessage]"], input[type="checkbox"][name="SendMessage"]',
+        updateLSTelegramNotifyMessageSettingsVisibility
+    )
+    .off('shown.bs.tab.lsTelegramNotifyMessageSettings')
+    .on(
+        'shown.bs.tab.lsTelegramNotifyMessageSettings',
+        '[data-bs-toggle="tab"], [data-toggle="tab"]',
+        updateLSTelegramNotifyMessageSettingsVisibility
+    )
+    .off('pjax:scriptcomplete.lsTelegramNotifyMessageSettings')
+    .on(
+        'pjax:scriptcomplete.lsTelegramNotifyMessageSettings',
+        updateLSTelegramNotifyMessageSettingsVisibility
+    );
+JS;
+    }
+}
diff --git a/src/Plugin/TestMessageUiBuilder.php b/src/Plugin/TestMessageUiBuilder.php
index 3ab6e6e..59b1cf0 100644
--- a/src/Plugin/TestMessageUiBuilder.php
+++ b/src/Plugin/TestMessageUiBuilder.php
@@ -13,6 +13,7 @@ public function buildSetting(?int $surveyId = null): array
 
         return [
             'type' => 'info',
+            'label' => 'Connection test',
             'content' =>
                 '<button type="button" class="btn btn-secondary ls-telegram-notify-test-message"' .
                 $surveyAttribute .
diff --git a/tests/Node/Scripts/Screenshots/browser-flows.test.mjs b/tests/Node/Scripts/Screenshots/browser-flows.test.mjs
index 6ae73ae..aa1c6ce 100644
--- a/tests/Node/Scripts/Screenshots/browser-flows.test.mjs
+++ b/tests/Node/Scripts/Screenshots/browser-flows.test.mjs
@@ -3,6 +3,9 @@ import test from 'node:test';
 import {
   buildPluginInstallInputSelector,
   buildPluginActionSelector,
+  enableCustomMessageSettings,
+  fillTelegramConnectionSettings,
+  getPluginSettingContainer,
   extractPluginInstallRequest,
   getPluginManagerPageUrl,
   getPluginManagerScanFilesUrl,
@@ -92,6 +95,137 @@ test('shouldIgnorePageErrorMessage filters the known CKEditor language error onl
   assert.equal(shouldIgnorePageErrorMessage('Something else exploded'), false);
 });
 
+test('fillTelegramConnectionSettings follows the current settings labels', async () => {
+  const fills = [];
+  const page = {
+    getByRole(role, options) {
+      assert.equal(role, 'textbox');
+
+      return {
+        async fill(value) {
+          fills.push([options.name, value]);
+        },
+      };
+    },
+  };
+
+  await fillTelegramConnectionSettings(page, {
+    authToken: 'masked-token',
+    chatId: '-10042',
+  });
+
+  assert.deepEqual(fills, [
+    ['Bot token', 'masked-token'],
+    ['Chat ID', '-10042'],
+  ]);
+});
+
+test('enableCustomMessageSettings waits for hidden setting containers and reveals them after enabling the message', async () => {
+  let enabled = false;
+  const waits = [];
+
+  const sendMessage = {
+    async check() {
+      enabled = true;
+    },
+  };
+
+  const buildContainer = (name) => ({
+    async waitFor(options) {
+      waits.push([name, options]);
+      assert.equal(enabled, options.state === 'visible');
+    },
+  });
+
+  const formatContainer = buildContainer('format');
+  const templateContainer = buildContainer('template');
+  const messageTemplate = {};
+
+  const buildField = (container) => ({
+    first() {
+      return this;
+    },
+    locator() {
+      return container;
+    },
+  });
+
+  const page = {
+    locator(selector) {
+      return selector.includes('ParseMode')
+        ? buildField(formatContainer)
+        : buildField(templateContainer);
+    },
+    getByRole(role, options) {
+      if (role === 'checkbox') {
+        assert.deepEqual(options, { name: 'Send a custom message' });
+        return sendMessage;
+      }
+
+      assert.equal(role, 'textbox');
+      assert.deepEqual(options, { name: 'Message template' });
+      return messageTemplate;
+    },
+  };
+
+  const result = await enableCustomMessageSettings(page);
+
+  assert.equal(result, messageTemplate);
+  assert.deepEqual(waits, [
+    ['format', { state: 'hidden' }],
+    ['template', { state: 'hidden' }],
+    ['format', { state: 'visible' }],
+    ['template', { state: 'visible' }],
+  ]);
+});
+
+test('enableCustomMessageSettings stops when the initial hidden state cannot be reached', async () => {
+  let checked = false;
+  const visibilityError = new Error('field did not become hidden');
+  const failingContainer = {
+    async waitFor(options) {
+      assert.deepEqual(options, { state: 'hidden' });
+      throw visibilityError;
+    },
+  };
+  const unusedContainer = {
+    async waitFor() {},
+  };
+  const buildField = (container) => ({
+    first() {
+      return this;
+    },
+    locator() {
+      return container;
+    },
+  });
+
+  const page = {
+    locator(selector) {
+      return selector.includes('ParseMode')
+        ? buildField(failingContainer)
+        : buildField(unusedContainer);
+    },
+    getByRole(role) {
+      if (role === 'checkbox') {
+        return {
+          async check() {
+            checked = true;
+          },
+        };
+      }
+
+      return {};
+    },
+  };
+
+  await assert.rejects(
+    () => enableCustomMessageSettings(page),
+    visibilityError
+  );
+  assert.equal(checked, false);
+});
+
 test('login retries when the first fresh-stack attempt stays on the login page', async () => {
   let currentUrl = 'http://localhost:8080/index.php/admin/authentication/sa/login';
   let attempt = 0;
diff --git a/tests/Node/Scripts/Screenshots/checker.test.mjs b/tests/Node/Scripts/Screenshots/checker.test.mjs
index 480f217..beabb6e 100644
--- a/tests/Node/Scripts/Screenshots/checker.test.mjs
+++ b/tests/Node/Scripts/Screenshots/checker.test.mjs
@@ -88,19 +88,27 @@ test('comparePngBuffers can tolerate a small diff ratio', () => {
   assert.equal(result.diffPixels, 1);
 });
 
-test('comparePngBuffers fails when image dimensions differ', () => {
+test('comparePngBuffers generates a visual diff when image dimensions differ', () => {
   const expectedBuffer = createPngBuffer(1, 1, [
     [255, 255, 255, 255],
   ]);
   const actualBuffer = createPngBuffer(2, 1, [
     [255, 255, 255, 255],
-    [255, 255, 255, 255],
+    [0, 0, 0, 255],
   ]);
 
-  const result = comparePngBuffers(expectedBuffer, actualBuffer);
+  const result = comparePngBuffers(expectedBuffer, actualBuffer, {
+    pixelmatchThreshold: 0,
+  });
 
   assert.equal(result.matches, false);
-  assert.equal(result.diffPixels, Number.POSITIVE_INFINITY);
+  assert.equal(result.diffPixels, 1);
+  assert.equal(result.diffPixelRatio, 0.5);
   assert.match(result.reason, /Image dimensions differ/);
-  assert.equal(result.diffBuffer, null);
+  assert.ok(result.diffBuffer);
+
+  const diffImage = PNG.sync.read(result.diffBuffer);
+
+  assert.equal(diffImage.width, 2);
+  assert.equal(diffImage.height, 1);
 });
diff --git a/tests/Unit/Plugin/DefaultTextHelpBuilderTest.php b/tests/Unit/Plugin/DefaultTextHelpBuilderTest.php
index 6a56921..c9e94d1 100644
--- a/tests/Unit/Plugin/DefaultTextHelpBuilderTest.php
+++ b/tests/Unit/Plugin/DefaultTextHelpBuilderTest.php
@@ -28,6 +28,8 @@ public function getFieldPlaceholderCatalog(int $surveyId): array
         $this->assertSame([], $provider->surveyIds);
         $this->assertStringContainsString('{{FIELD_CODE_answer}}', $help);
         $this->assertStringContainsString('{{urlAttachments}}', $help);
+        $this->assertStringContainsString('<strong>Message format</strong>', $help);
+        $this->assertStringNotContainsString('<code>ParseMode</code>', $help);
         $this->assertStringContainsString('survey-specific plugin settings', $help);
         $this->assertStringNotContainsString('No field codes could be identified for this survey.', $help);
     }
diff --git a/tests/Unit/Plugin/LSTelegramNotifyPluginTest.php b/tests/Unit/Plugin/LSTelegramNotifyPluginTest.php
index e753ef6..2ee2825 100644
--- a/tests/Unit/Plugin/LSTelegramNotifyPluginTest.php
+++ b/tests/Unit/Plugin/LSTelegramNotifyPluginTest.php
@@ -43,6 +43,15 @@ public function testInitSubscribesToRequiredPluginEvents(): void
             'survey-specific plugin settings',
             $plugin->getSettingsDefinition()['DefaultText']['help']
         );
+        $this->assertArrayHasKey('ls-telegram-notify-message-settings-visibility', \Yii::$registeredScripts);
+        $this->assertStringContainsString(
+            "['ParseMode', 'DefaultText']",
+            \Yii::$registeredScripts['ls-telegram-notify-message-settings-visibility']['script']
+        );
+        $this->assertStringContainsString(
+            'SendMessage',
+            \Yii::$registeredScripts['ls-telegram-notify-message-settings-visibility']['script']
+        );
     }
 
     public function testAfterSurveyCompleteSkipsProcessingWhenNotificationsAreDisabled(): void
@@ -354,17 +363,34 @@ public function testBeforeSurveySettingsPublishesCurrentValuesAndCheckboxDefault
 
         $this->assertIsArray($definition);
         $this->assertSame(LSTelegramNotifyPluginDouble::class, $definition['name']);
+        $this->assertSame([
+            'Enable',
+            'SettingsInfo',
+            'AuthToken',
+            'ChatId',
+            'TestMessage',
+            'SendMessage',
+            'ParseMode',
+            'DefaultText',
+            'SendPdf',
+            'SendCsv',
+        ], array_keys($definition['settings']));
         $this->assertTrue($definition['settings']['Enable']['current']);
-        $this->assertSame('Enable telegram notifications', $definition['settings']['Enable']['label']);
-        $this->assertSame('Auth Token', $definition['settings']['AuthToken']['label']);
+        $this->assertSame('Enable Telegram notifications', $definition['settings']['Enable']['label']);
+        $this->assertSame('Bot token', $definition['settings']['AuthToken']['label']);
         $this->assertSame('bot-token', $definition['settings']['AuthToken']['current']);
+        $this->assertSame('Chat ID', $definition['settings']['ChatId']['label']);
         $this->assertSame('chat-42', $definition['settings']['ChatId']['current']);
+        $this->assertSame('Send a custom message', $definition['settings']['SendMessage']['label']);
+        $this->assertStringContainsString('Enable this to choose the message format', $definition['settings']['SendMessage']['help']);
+        $this->assertSame('Message format', $definition['settings']['ParseMode']['label']);
         $this->assertSame('Markdown', $definition['settings']['ParseMode']['current']);
         $this->assertSame('Text', $definition['settings']['ParseMode']['options']['Text']);
+        $this->assertSame('Message template', $definition['settings']['DefaultText']['label']);
+        $this->assertSame('Mensagem padrão', $definition['settings']['DefaultText']['current']);
         $this->assertFalse($definition['settings']['SendPdf']['current']);
         $this->assertFalse($definition['settings']['SendCsv']['current']);
         $this->assertFalse($definition['settings']['SendMessage']['current']);
-        $this->assertSame('Mensagem padrão', $definition['settings']['DefaultText']['current']);
         $this->assertStringContainsString('{{urlAttachments}}', $definition['settings']['DefaultText']['help']);
         $this->assertStringContainsString('{{FIELD_CODE_answer}}', $definition['settings']['DefaultText']['help']);
         $this->assertStringContainsString('CONTATO[EMAIL]', $definition['settings']['DefaultText']['help']);
diff --git a/tests/Unit/Plugin/MessageSettingsUiBuilderTest.php b/tests/Unit/Plugin/MessageSettingsUiBuilderTest.php
new file mode 100644
index 0000000..3165562
--- /dev/null
+++ b/tests/Unit/Plugin/MessageSettingsUiBuilderTest.php
@@ -0,0 +1,42 @@
+<?php
+
+require_once dirname(__DIR__, 3) . '/vendor/autoload.php';
+
+use LibreCodeCoop\LSTelegramNotify\Plugin\MessageSettingsUiBuilder;
+use PHPUnit\Framework\TestCase;
+
+final class MessageSettingsUiBuilderTest extends TestCase
+{
+    public function testBuildScriptBindsVisibilityToSendMessageSetting(): void
+    {
+        $script = (new MessageSettingsUiBuilder())->buildScript();
+
+        $this->assertStringContainsString('SendMessage', $script);
+        $this->assertStringContainsString("filter(':checkbox')", $script);
+        $this->assertStringContainsString('input[type="checkbox"][name$="[SendMessage]"]', $script);
+        $this->assertStringContainsString("['ParseMode', 'DefaultText']", $script);
+        $this->assertStringContainsString('.toggle(enabled)', $script);
+        $this->assertStringContainsString('change.lsTelegramNotifyMessageSettings', $script);
+        $this->assertStringContainsString('shown.bs.tab.lsTelegramNotifyMessageSettings', $script);
+        $this->assertStringContainsString('pjax:scriptcomplete.lsTelegramNotifyMessageSettings', $script);
+        $this->assertStringContainsString('new MutationObserver', $script);
+        $this->assertStringContainsString('childList: true', $script);
+        $this->assertStringContainsString('subtree: true', $script);
+    }
+
+    public function testBuildScriptSupportsGlobalAndSurveySettingNames(): void
+    {
+        $script = (new MessageSettingsUiBuilder())->buildScript();
+
+        $this->assertStringContainsString("'[name=\"' + settingName + '\"], '", $script);
+        $this->assertStringContainsString("'[name$=\"[' + settingName + ']\"]'", $script);
+    }
+
+    public function testBuildScriptUsesStableLimeSurveySettingContainers(): void
+    {
+        $script = (new MessageSettingsUiBuilder())->buildScript();
+
+        $this->assertStringContainsString('.mb-3, .form-group', $script);
+        $this->assertStringContainsString("closest('.row')", $script);
+    }
+}
diff --git a/tests/Unit/Plugin/TestMessageUiBuilderTest.php b/tests/Unit/Plugin/TestMessageUiBuilderTest.php
index 442f88d..c326935 100644
--- a/tests/Unit/Plugin/TestMessageUiBuilderTest.php
+++ b/tests/Unit/Plugin/TestMessageUiBuilderTest.php
@@ -12,6 +12,7 @@ public function testBuildSettingCreatesGlobalTestControl(): void
         $setting = (new TestMessageUiBuilder())->buildSetting();
 
         $this->assertSame('info', $setting['type']);
+        $this->assertSame('Connection test', $setting['label']);
         $this->assertStringContainsString('Send test message', $setting['content']);
         $this->assertStringNotContainsString('data-survey-id=', $setting['content']);
         $this->assertStringContainsString('Save the Telegram settings before sending a test message.', $setting['content']);