How to implement the widget with Vue.js application

Implementing UserWay Widget in a Vue.js Application

Follow these steps to implement the widget using a Vue.js application:

1. Update Layout File: Look for a file named default.vue (this code can be added to other layout files as well). Inside the export default block, add the following code:Before:

   <script>
   import AppHeader from "@/components/AppHeader.vue";
   import AppFooter from "@/components/AppFooter.vue";
   export default {
       name: "Default",
       components: {
           AppHeader,
           AppFooter
       }
   }
   </script>

   After:

   <script>
   import AppHeader from "@/components/AppHeader.vue";
   import AppFooter from "@/components/AppFooter.vue";
   export default {
       name: "Default",
       components: {
           AppHeader,
           AppFooter
       },
       mounted() {
           let userwayscript = document.createElement('script');
           userwayscript.setAttribute('src', 'https://cdn.userway.org/widget.js');
           userwayscript.setAttribute('data-account', 'your actual account ID'); 
           document.head.appendChild(userwayscript);
       }
   }
   </script>

2. Configure UserWay: Modify the value of the data-account attribute to your own account ID.
3. Save and Test: Save the file and test the widget on your website. Check the browser console for any errors if the widget does not appear.

If you require additional assistance, feel free to contact us at desk@support.userway.org.