diff --git a/assets/js/src/settings/pages/basics/index.tsx b/assets/js/src/settings/pages/basics/index.tsx
index 3ed2997d68..a626f2ee5f 100644
--- a/assets/js/src/settings/pages/basics/index.tsx
+++ b/assets/js/src/settings/pages/basics/index.tsx
@@ -7,6 +7,7 @@ import ManageSubscription from './manage_subscription';
import UnsubscribePage from './unsubscribe_page';
import StatsNotifications from './stats_notifications';
import NewSubscriberNotifications from './new_subscriber_notifications';
+import Shortcode from './shortcode';
export default function Basics() {
return (
@@ -26,6 +27,16 @@ export default function Basics() {
+
+
);
diff --git a/assets/js/src/settings/pages/basics/shortcode.tsx b/assets/js/src/settings/pages/basics/shortcode.tsx
new file mode 100644
index 0000000000..f359f80bb5
--- /dev/null
+++ b/assets/js/src/settings/pages/basics/shortcode.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { t } from 'settings/utils';
+import { Label, Inputs, SegmentsSelect } from 'settings/components';
+
+type Props = {
+ name: 'mailpoet_archive' | 'mailpoet_subscribers_count'
+ title: string
+ description: string
+}
+
+export default function Shortcode({ name, title, description }: Props) {
+ const [segments, setSegments] = React.useState([]);
+ const shortcode = `[${name}${segments.length ? ` segments="${segments.join(',')}"` : ''}]`;
+ const selectText = (event) => {
+ event.target.focus();
+ event.target.select();
+ };
+ return (
+ <>
+
+
+
+
+
+
+ >
+ );
+}
diff --git a/views/settings.html b/views/settings.html
index 8f177ff763..ab9e9b425b 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -76,6 +76,11 @@
'yes': __('Yes'),
'no': __('No'),
+ 'archiveShortcodeTitle': __('Archive page shortcode'),
+ 'archiveShortcodeDescription': __('Paste this shortcode on a page to display a list of past newsletters.'),
+ 'subscribersCountShortcodeTitle': __('Shortcode to display total number of subscribers'),
+ 'subscribersCountShortcodeDescription': __('Paste this shortcode on a post or page to display the total number of confirmed subscribers.'),
+
'reinstallConfirmation': __('Are you sure? All of your MailPoet data will be permanently erased (newsletters, statistics, subscribers, etc.).'),
'announcementHeader': __('Get notified when someone subscribes'),
'announcementParagraph1': __('It’s been a popular feature request from our users, we hope you get lots of emails about all your new subscribers!'),