76 lines
1.8 KiB
Vue
76 lines
1.8 KiB
Vue
<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>
|