@flonix/ig-embed 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -519,8 +519,11 @@ function buildPrefill(post, account, type) {
   const common = {
     postId: post.id,
     type,
+    // 1st DM (opening) + its button.
+    openingMessage: "Thanks for your comment! \u{1F64C} Tap below and I'll send your link.",
     entryButtonLabel: "Send me the link",
-    deliveryMessage: "Thanks for reaching out! \u{1F64C} Here's the link you asked for \u{1F447}",
+    // Final DM, shown right before the link buttons.
+    deliveryMessage: "As promised, here's your link \u{1F447}",
     // One link button prefilled; the merchant fills in their own URL.
     linkButtons: [{ label: "Shop now", url: "" }],
     // Follow-gate is ON and prefilled by default, per product spec.
@@ -529,7 +532,9 @@ function buildPrefill(post, account, type) {
       followProfileUrl: profileUrl(account),
       followButtonLabel: `Follow ${handle}`,
       followConfirmButtonLabel: "I'm following \u2705",
-      followUpMessage: "Awesome \u2014 thanks for following! \u{1F499} Here's your link \u{1F447}"
+      // Shown AT the gate (with the Follow buttons), i.e. before they follow —
+      // so it must read as a request, not a thank-you.
+      followUpMessage: "One quick step \u2014 follow us, then tap \u201CI'm following\u201D to get your link \u{1F447}"
     }
   };
   if (type === "COMMENT") {
@@ -622,8 +627,9 @@ function openAutomateDialog(opts) {
       values: draft.keywords,
       placeholder: "Add keyword\u2026"
     });
+    const openingMessage = textArea({ value: draft.openingMessage, rows: 2 });
     const commentReply = textInput({ value: (_a2 = draft.commentReply) != null ? _a2 : "" });
-    const deliveryMessage = textArea({ value: draft.deliveryMessage, rows: 3 });
+    const deliveryMessage = textArea({ value: draft.deliveryMessage, rows: 2 });
     const entryButtonLabel = textInput({ value: draft.entryButtonLabel });
     const links = linkButtonsEditor({
       values: draft.linkButtons,
@@ -636,10 +642,14 @@ function openAutomateDialog(opts) {
     const gateFields = el(
       "div",
       { class: "flxig-gate__fields", dataset: { off: String(!draft.followGate.enabled) } },
+      field(
+        "Follow prompt",
+        followUpMessage,
+        "Shown with the Follow buttons, before they follow \u2014 e.g. \u201CPlease follow us to get your link \u{1F447}\u201D."
+      ),
       field("Follow profile URL", followProfileUrl),
       field("Follow button label", followButtonLabel),
-      field("Confirm button label", followConfirmLabel),
-      field("Message after they follow", followUpMessage)
+      field("Confirm button label", followConfirmLabel)
     );
     const gateSwitch = switchToggle({
       checked: draft.followGate.enabled,
@@ -671,20 +681,21 @@ function openAutomateDialog(opts) {
         type === "COMMENT" ? "Trigger keywords (in comments)" : "Trigger keywords (in DMs)",
         keywords.element,
         "Press Enter or comma to add. The automation fires on these words."
-      )
+      ),
+      field("Opening message", openingMessage, "The first DM the user receives."),
+      field("First reply button", entryButtonLabel, "Button attached to that first DM.")
     ];
     if (type === "COMMENT") {
-      fields.push(field("Public comment reply", commentReply, "Posted under the comment."));
+      fields.push(field("Public comment reply", commentReply, "Posted under the comment (optional)."));
     }
     fields.push(
-      field("DM message", deliveryMessage, "The direct message delivered to the user."),
+      gate,
+      field("Final delivery message", deliveryMessage, "Shown right before your link buttons."),
       field(
         "Link buttons",
         links.element,
-        `Where they enter the link(s). Up to ${MAX_LINK_BUTTONS} \u2014 each has a label and a URL.`
-      ),
-      field("Opt-in button label", entryButtonLabel, "Button users tap in the first DM."),
-      gate
+        `At least one is required. Up to ${MAX_LINK_BUTTONS} \u2014 each needs a label and a URL (https://\u2026).`
+      )
     );
     body.replaceChildren(...fields);
     readForm = () => ({
@@ -693,6 +704,7 @@ function openAutomateDialog(opts) {
       name: draft.name,
       keywords: keywords.getValues(),
       commentReply: type === "COMMENT" ? commentReply.value.trim() || null : null,
+      openingMessage: openingMessage.value.trim(),
       entryButtonLabel: entryButtonLabel.value.trim(),
       deliveryMessage: deliveryMessage.value.trim(),
       linkButtons: links.getValues(),
@@ -719,8 +731,26 @@ function openAutomateDialog(opts) {
         opts.onToast("Add at least one keyword");
         return;
       }
+      if (!data.openingMessage) {
+        opts.onToast("Add an opening message");
+        return;
+      }
       if (!data.deliveryMessage) {
-        opts.onToast("Add a DM message");
+        opts.onToast("Add a final delivery message");
+        return;
+      }
+      const withUrl = data.linkButtons.filter((b) => b.url.trim());
+      if (withUrl.length === 0) {
+        opts.onToast("Add at least one link button with a URL");
+        return;
+      }
+      const badUrl = withUrl.find((b) => !/^https?:\/\/.+/i.test(b.url.trim()));
+      if (badUrl) {
+        opts.onToast("Link URLs must start with http:// or https://");
+        return;
+      }
+      if (data.followGate.enabled && !data.followGate.followUpMessage) {
+        opts.onToast("Add a follow-gate message");
         return;
       }
       submitting = true;
@@ -871,6 +901,15 @@ var STYLES = `
   container-type: inline-size;
 }
 
+/* Borderless / full-bleed: blends into the host page and fills its container.
+   Only the OUTER chrome is removed \u2014 internal borders (tiles, inputs) stay. */
+.flxig-root.flxig-plain {
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
+}
+
 /* ---- typography ---- */
 .flxig-h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
 .flxig-h2 { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
@@ -1041,7 +1080,9 @@ var Widget = class {
       el("style", { text: `${buildThemeVars(theme)}
 ${STYLES}` })
     );
-    this.root = el("div", { class: "flxig-root" });
+    this.root = el("div", {
+      class: config.appearance === "plain" ? "flxig-root flxig-plain" : "flxig-root"
+    });
     this.content = el("div", { class: "flxig-content" });
     this.root.appendChild(this.content);
     this.shadow.appendChild(this.root);
@@ -1286,7 +1327,7 @@ function createMockTransport(options = {}) {
 }
 
 // src/index.ts
-var version = "0.1.0";
+var version = "0.1.2";
 function mount(target, config) {
   var _a, _b, _c;
   const element = typeof target === "string" ? document.querySelector(target) : target;