Sync

resources/js/vue/GetEmbedCode.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div class="d-grid gap-2 mx-auto" style="width: 250px">
+      <img
+        style="width: 250px; height: auto"
+        :src="imgSrc"
+        alt="Featured banner"
+      />
+      <button @click="getEmbedCode" class="btn btn-sm btn-outline-primary px-3">
+        Get HTML embed code
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { toast } from "vue3-toastify";
+export default {
+  name: "GetEmbedCode",
+  mixins: [],
+  components: {},
+  props: ["url", "name"],
+  data: () => ({
+    imgSrc: "https://cdn.aibuddytool.com/featured-on-aibuddytool-1-1000.webp",
+    showToast: false,
+  }),
+  computed: {
+    embedCode() {
+      return (
+        "<!-- " +
+        this.name +
+        ' featured by AiBuddyTool.com --><a href="' +
+        this.url +
+        '" target="_blank"><img alt="' +
+        this.name +
+        '" style="width: 250px; height: auto" src="' +
+        this.imgSrc +
+        '"></a>'
+      );
+    },
+  },
+  methods: {
+    getEmbedCode() {
+      const el = document.createElement("textarea");
+      el.value = this.embedCode;
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand("copy");
+      document.body.removeChild(el);
+
+      toast(
+        "Copied! Paste the HTML embed code at the bottom of your business website footer.",
+        {
+          position: "bottom-center",
+          type: "success",
+          timeout: 3000,
+          closeOnClick: true,
+          pauseOnFocusLoss: true,
+          pauseOnHover: true,
+          draggable: true,
+          draggablePercent: 0.6,
+          showCloseButtonOnHover: false,
+          hideProgressBar: false,
+          closeButton: true,
+          icon: true,
+          rtl: false,
+        },
+      );
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped></style>