Feature request: Edit Preheader/Preview text from the Campaign Settings

[candidexmedia]

Is your feature request related to a problem? Please describe.

Hi! I'd like to be able to edit the preheader text for campaigns (building on https://github.com/knadh/listmonk/issues/924).

Describe the solution you'd like

Typically, the field to edit preheader text is beside the subject line field.

Listmonk

MailChimp

Envoke

Why is this important?

Preheader text is a great way to entice people to open the email by summarizing its content. Email clients generally display at minimum of 40 characters on the low end and up to 100 in some cases. Most mailing list services limit the number of characters for this field.

If preheader/preview text isn't added, the first line of the email is used. For some of us, that would be "View email in browser", which isn't the most descriptive or appealing text to display...

[knadh]

Can you share the raw HTML body of an e-mail sent by Mailchimp which has the "preheader" text?

[candidexmedia]

@knadh Here's an example from this campaign sent from MailChimp. The preheader is "Get access to our brand new course by joining SuperHi Unlimited"

Delivered-To: ...
Received: by 2002:a05:6918:9054:b029:2d:6e47:9e3c with SMTP id g20csp3679971ysf;
        Mon, 21 Jun 2021 11:02:08 -0700 (PDT)
X-Google-Smtp-Source: ABdhPJwcb0ly8wyKyXf8vLcuJ/Fi6xAAr3XUri5r8b7G/GHtExjMeIt3uzdoPQS5CjyazHyc7bu2
X-Received: by 2002:a17:902:d3d5:b029:121:94ad:51fe with SMTP id w21-20020a170902d3d5b029012194ad51femr16549203plb.45.1624298527828;
        Mon, 21 Jun 2021 11:02:07 -0700 (PDT)
ARC-Seal: i=1; a=rsa-sha256; t=1624298527; cv=none;
        d=google.com; s=arc-20160816;
        b=BJx4Jm5KhSDg218DRVgA40JNbvdH+GMnUSYjBhc7kjW9XwARBQJMlSP2L6PJC16Exy
         Czv+QnpD2OPwYPm64hhYin78zeDIu7o+B/C2YB34ILpBo7s3Hb/F1BlQloAutZ/RAlvH
         HeYWBSJz/fk+HC499OYbBYD4Cq0za8d7SlGrfgCm1Ghu4uW6sAZJu7FIV3F2V9kPXG3N
         12Okto2auJu5AVZxS2AnBxLSHdmuGZjkuxC5Bqr/4DSen9+Kj0lxzEhxySBqvjm8uaPH
         pK1zHwBLMmfGl+XUNCT9tqStvnQC5AuDM4cchRetXHeG24l1Nk5eKKtJlTgLjE7U2Xkf
         l4Fg==
ARC-Message-Signature: i=1; a=rsa-sha256; c=relaxed/relaxed; d=google.com; s=arc-20160816;
        h=mime-version:list-unsubscribe-post:list-unsubscribe:list-id
         :feedback-id:message-id:date:to:reply-to:from:subject:dkim-signature
         :dkim-signature;
        bh=SvplAb1aFp3SHxzYXK3dFNCvb5ezNEzycvi8OsJ8YOc=;
        b=hOvXPkAEuiYY5TxV/aZuwtH472vxrV21N4F/OpGO/xB28RgZg5N2CZ/PI35FwyzgsS
         YxVmnXuCT0zccprxNI50tOAiPxGcEhGzzEH9YRHL5vHpNV5XekjzDw9C27V515X+ld9z
         kEBbcxQngqiwiq3qggwGfbAFj+1Q88H4A4YwH2Uf70NsycxK36eG/50CEk0DNn3FQvL3
         6pBxV/wjsynIUxNJwTRARo3dfBfODFFHzMcFF0D6/LXSmLit+tMBAnVUKBD/xPIOEwey
         zW9M7P4TEp9OfY+RE43DeMMCLaBKkDlKHJxgY8QDTuL1zVm3AVxqUZaQAHPa/ZdWelzi
         2Yow==
ARC-Authentication-Results: i=1; mx.google.com;
       dkim=pass header.i=@gmail.mcsv.net header.s=k1 header.b=Uqb4nac1;
       dkim=pass header.i=@mailchimpapp.net header.s=k2 header.b=RSR04X86;
       spf=pass (google.com: domain of bounce-mc.us11_42903721.4757942-af4628d228@mail141.sea71.mcsv.net designates 148.105.11.141 as permitted sender) smtp.mailfrom=bounce-mc.us11_42903721.4757942-af4628d228@mail141.sea71.mcsv.net
Return-Path: <bounce-mc.us11_42903721.4757942-af4628d228@mail141.sea71.mcsv.net>
Received: from mail141.sea71.mcsv.net (mail141.sea71.mcsv.net. [148.105.11.141])
        by mx.google.com with ESMTPS id u19si16942217pfg.219.2021.06.21.11.02.07
       for ...>
        (version=TLS1_2 cipher=ECDHE-ECDSA-AES128-GCM-SHA256 bits=128/128);
        Mon, 21 Jun 2021 11:02:07 -0700 (PDT)
Received-SPF: pass (google.com: domain of bounce-mc.us11_42903721.4757942-af4628d228@mail141.sea71.mcsv.net designates 148.105.11.141 as permitted sender) client-ip=148.105.11.141;
Authentication-Results: mx.google.com;
       dkim=pass header.i=@gmail.mcsv.net header.s=k1 header.b=Uqb4nac1;
       dkim=pass header.i=@mailchimpapp.net header.s=k2 header.b=RSR04X86;
       spf=pass (google.com: domain of bounce-mc.us11_42903721.4757942-af4628d228@mail141.sea71.mcsv.net designates 148.105.11.141 as permitted sender) smtp.mailfrom=bounce-mc.us11_42903721.4757942-af4628d228@mail141.sea71.mcsv.net
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=gmail.mcsv.net; s=k1; t=1624298431; bh=SvplAb1aFp3SHxzYXK3dFNCvb5ezNEzycvi8OsJ8YOc=; h=Subject:From:Reply-To:To:Date:Message-ID:Feedback-ID:List-ID:
     List-Unsubscribe:List-Unsubscribe-Post:Content-Type:MIME-Version; b=Uqb4nac1NjVIArcBZ7apWApFuSar+K8ZucjqkZy4IKrcmkVRPbxF3g3q8zG8max8b
     MoJhlm8oi2/edC810HYfkd4qbl0vKoXEU7KK/od1S26tqkxsHifP3GIo5VW6tllV9y
     QS4c14rMFIWSIDI6Auwd0m/UxcR8fckttk7/GchA=
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=mailchimpapp.net; s=k2; t=1624298431; i=hi=3Dsuperhi.com@mailchimpapp.net; bh=SvplAb1aFp3SHxzYXK3dFNCvb5ezNEzycvi8OsJ8YOc=; h=Subject:From:Reply-To:To:Date:Message-ID:List-ID:List-Unsubscribe:
     List-Unsubscribe-Post:Content-Type:MIME-Version; b=RSR04X86SynTo0waFDi/jQeLOQYWPhMKPG9WbHsv4bOTYdZy45jeUjB+xwJ0mw09m
     d1Sk66sN9JExIaDjN7gRXzGYC2kHAVosaG1oHIibixcq3GXjaaj3XYq1sWD4Yxvr7Z
     pEWLfNOHAKFxEoKX7UlWjVmW+tUPORiiacjcPchVJoPC6XtaL7EDE/qhBDvQmQDEL6
     hDaRzVB72wYzttCMbCqyRU4CPt98yeBGwjf61PboNRDJgs/w+Fzn4FEdMeIFkyr4U2
     F8M9eK0XxwhNvj3JKWIG9Hh4p7gJhhKScqBjYdW5N9IVi5dt6BsVaWUtG92QxOgUuS
     sQ/8HHDGNFq3w==
Received: from localhost (localhost [127.0.0.1]) by mail141.sea71.mcsv.net (Mailchimp) with ESMTP id 4G7y4G6ttbzPm2Rdj for <...>; Mon, 21 Jun 2021 18:00:30 +0000 (GMT)
Subject: Intro to User Interface Design course: now available
From: Rik from SuperHi <hi@superhi.com>
Reply-To: Rik from SuperHi <hi@superhi.com>
To: <...>
Date: Mon, 21 Jun 2021 18:00:00 +0000
Message-ID: <12c17c0d0a672fda02e8bf509.af4628d228.20210621175949.693889d310.a39de572@mail141.sea71.mcsv.net>
X-Mailer: MailChimp Mailer - **CID693889d310af4628d228**
X-Campaign: mailchimp12c17c0d0a672fda02e8bf509.693889d310
X-campaignid: mailchimp12c17c0d0a672fda02e8bf509.693889d310
X-Report-Abuse: Please report abuse for this campaign here: https://mailchimp.com/contact/abuse/?u=12c17c0d0a672fda02e8bf509&id=693889d310&e=af4628d228
X-MC-User: 12c17c0d0a672fda02e8bf509
Feedback-ID: 42903721:42903721.4757942:us11:mc
List-ID: 12c17c0d0a672fda02e8bf509mc list <12c17c0d0a672fda02e8bf509.483582.list-id.mcsv.net>
X-Accounttype: pr
List-Unsubscribe: <https://superhi.us11.list-manage.com/unsubscribe?u=12c17c0d0a672fda02e8bf509&id=01cde0de1a&e=af4628d228&c=693889d310>, <mailto:unsubscribe-mc.us11_12c17c0d0a672fda02e8bf509.693889d310-af4628d228@mailin.mcsv.net?subject=unsubscribe>
List-Unsubscribe-Post: List-Unsubscribe=One-Click
Content-Type: multipart/alternative; boundary="_----------=_MCPart_11699983"
MIME-Version: 1.0

--_----------=_MCPart_11699983
Content-Type: text/plain; charset="utf-8"; format="fixed"
Content-Transfer-Encoding: quoted-printable

Get access to our brand new course by joining SuperHi Unlimited

View this email in your browser (https://mailchi.mp/superhi/may-news-475794=
2?e=3Daf4628d228)
https://www.superhi.com?goal=3D0_01cde0de1a-693889d310-332352394&mc_cid=3D6=
93889d310&mc_eid=3DUNIQID
https://www.superhi.com/unlimited-membership?goal=3D0_01cde0de1a-693889d310=
-332352394&mc_cid=3D693889d310&mc_eid=3DUNIQID
Hey everyone,

From today you can access to our brand new course, Intro to User Interface =
Design, by upgrading to a SuperHi Unlimited membership (https://www.superhi=
.com/unlimited-membership?goal=3D0_01cde0de1a-693889d310-332352394&mc_cid=
=3D693889d310&mc_eid=3DUNIQID)  (US$360 a year until June 30th). The topics=
 covered in this course are, by far, our most-requested ones so we're very =
happy to announce this launch!

<!---(see edit history for rest of code)--->

[knadh]

As I'd said earlier, why not insert this in the top of the campaign body? It won't make sense to add a dedicated field for this in the UI as it's just an arbitrary string inserted into the template in an arbitrary position. It would also require the header to have specific template code in its HTML.

[candidexmedia]

Besides the Raw HTML editor, how could users add a preheader text with the Rich text, Markdown, or Plain text editors without the text being visible? Personally, I wouldn't know how to, and I'm not sure if less technically-inclined users would either (say, if an instance was deployed and maintained for them).

Adding a field for preheader/preview text saves the headache of figuring that out, and incorporates a feature that people switching to Listmonk would expect to see. Preheaders/Preview texts are just as visible and important as email subject lines:

(source: Why PreHeader Text Is the Most Neglected Part of An Email)

Nearly all comparable apps have a field for the preheader:

(click for examples)

### MailChimp  ### Sendinblue  ### Sendgrid  ### ActiveCampaign  ### Get Responses  ### Campaign Monitor  ### Constant Contact  ### Moosend  ### Flodesk  ### My Emma  ### Mailerlite  ### phpList (PR)  ### Envoke 

[ashso]

Apart from it is only doable using raw HTML editor, you could already have certain text within the template, in this case such text is being loaded to the preheader of the email clients no matter what you tried to type in the Campaign content.

A better approach is to allow insert additional text fields to the template in addition to {{ template "content" . }}, in this case user can use their own way to achieve the preheader text feature (e.g. put that addition text field to a hidden div).

[knadh]

A better approach is to allow insert additional text fields to the template in addition to {{ template "content" . }}, in this case user can use their own way to achieve the preheader text feature (e.g. put that addition text field to a hidden div).

Yeah, this is the better way. Dynamic campaign attributes without hardcoding "pre header" as a feature.

[candidexmedia]

As long as there is clear and easy to follow documentation on how to use dynamic campaign attributes for preheader/preview text (likely through a user guide), I'm on board with whatever solution makes the most sense from a development standpoint.

[reinier]

I was looking for a solution to have a separate content field for the message preview. I have some default stuff as the first content in the mail and I want to prepend that with a (hidden in email content) message preview that will show up in the inbox.

This is such a common use case in email campaign software that it might be a feature on it's own instead of a whole 'custom content fields' feature.

[candidexmedia]

Good point @reinier !

[candidexmedia]

I've just realized that this was marked as "not planned"...

How are users supposed to add preheader content?

[Francescoliverio]

Hey everyone,

Could be very nice to add a {{ preHeader }} variable inside the email body, similar to the following:

<body>
  <!-- -->
  <!--[if !gte mso 9]>
  <!-- -->
  <span style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">
    {{ preHeader }}
  </span>
  <!--<![endif]-->
  <!-- -->

  ... the HTML content ...

</body>

Additionally, it would be great to have this {{ preHeader }} variable available as a new field within the campaign creation process. This would allow users to easily customize their preheader text.

To make the emails even more engaging, I suggest providing the ability to insert dynamic variables within attributes. This would enable personalized and dedicated messages, enhancing the overall user experience when sending and receiving emails.

[candidexmedia]

@Francescoliverio I 100% agree. If I had the technical ability, I would definitely make a PR.