Custom Content in Footer Gets Overwritten on Step Change

[iqmalr]

Hi,
i'm trying to inject a custom checkbox (don't show again) into the tour's footer using tour.on("show", handler), but the injected DOM is consistently being overwritten by Shepherd js right after the step is rendered. but (don't show again) only render in first step only, i want the (don't show again) always render in all step. I'am using vue.js by the waay

here's my code

        injectDismissCheckbox() {
            const tryInject = (attempt = 0) => {
                const footer = document.querySelector(".shepherd-footer");
                console.log("footer:", footer);

                if (!footer) {
                    console.log("Footer not found yet, retrying...", attempt);
                    if (attempt < 10) {
                        setTimeout(() => tryInject(attempt + 1), 50);
                    }
                    return;
                }

                const shepherdButtons = footer.querySelectorAll(".shepherd-button");
                console.log("Shepherd buttons found (initial):", shepherdButtons);

                setTimeout(() => {
                    const buttons = footer.querySelectorAll(".shepherd-button");
                    console.log("Shepherd buttons found (after delay):", buttons);

                    const existingCheckbox = document.getElementById("dontShowAgainCheckbox");
                    if (existingCheckbox) {
                        console.log("Removing existing checkbox");
                        existingCheckbox.closest("label")?.remove();
                    }

                    const wrapper = document.createElement("div");
                    wrapper.style.display = "flex";
                    wrapper.style.justifyContent = "space-between";
                    wrapper.style.alignItems = "center";
                    wrapper.style.width = "100%";

                    const checkboxWrapper = document.createElement("label");
                    checkboxWrapper.style.display = "flex";
                    checkboxWrapper.style.alignItems = "center";

                    const checkbox = document.createElement("input");
                    checkbox.type = "checkbox";
                    checkbox.id = "dontShowAgainCheckbox";
                    checkbox.style.marginRight = "6px";
                    checkbox.checked = localStorage.getItem("dashboard_tour_dismissed") === "true";

                    const label = document.createElement("span");
                    label.textContent = "Don't show again";

                    checkboxWrapper.appendChild(checkbox);
                    checkboxWrapper.appendChild(label);

                    const btnGroup = document.createElement("div");
                    btnGroup.style.display = "flex";
                    btnGroup.style.gap = "8px";
                    buttons.forEach((btn) => btnGroup.appendChild(btn));

                    footer.innerHTML = "";
                    wrapper.appendChild(checkboxWrapper);
                    wrapper.appendChild(btnGroup);
                    footer.appendChild(wrapper);

                    console.log("Checkbox inserted into DOM:", checkboxWrapper);
                    console.log("Wrapper inserted into DOM:", wrapper);
                }, 100);
            };

            tryInject();
        }

            tour.addStep({
                id: "step-6",
                title: "Step 6: Ready to Share?",
                text: "Your deck will be saved as a link, so it’s easy to share it via email, SMS and WhatsApp.",
                attachTo: { element: ".shepherd-done", on: "top" },
                buttons: [
                    {
                        text: "Back",
                        action: tour.back,
                    },
                    {
                        text: "Selesai",
                        action: () => {
                            const checkbox = document.getElementById(
                                "dontShowAgainCheckbox"
                            );
                            if (checkbox?.checked) {
                                localStorage.setItem(
                                    "dashboard_tour_dismissed",
                                    "true"
                                );
                            }
                            tour.complete();
                            this.launchAiPop();
                        },
                    },
                ],
            });

            // tour.on("show", this.injectDismissCheckbox);
            tour.on("show", (event) => {
                console.log("Step shown:", event.step.id);
                this.injectDismissCheckbox(event.step);
            });
            tour.start();
        },
    },