Successfully embed 3rd party widget code on Wix

  • État: Closed
  • Prix: $1500
  • Propositions reçues: 2
  • Gagnant: benipuri

Résumé du concours

The contest is to see who can embed the attached 3rd party widget code on a Wix website without using the built-in embed HTML/Code feature since it simply puts the widget in an iFrame. The widget code needs to be able to load properly without being in an iFrame, be fully functional, and work as intended. I've included a .html file so you can see how it should work. If you win, you need to be able to demonstrate how you did it so we can offer this solution to other people that use Wix.



#### OPTIONAL DETAILS IF YOU WANT TO KNOW MORE #####


** THE PROBLEM **
We have a website that provides clients widget code that allows them to embed a shopping cart and checkout system on their website. On most sites, it's very simple to just coy and paste the widget code we provide and everything works great. With Wix, when you use the Embed HTML feature, it puts the code into an iframe which destroying the user experience of the widget. We've fought with Wix trying to find a way to embed the code so it loads properly. The main issue we've found is that we require access to DOM which isn't allowed directly with Wix.


** OUR CURRENT SOLUTION **
We were able to find a work around that allowed us to load the widget code properly by adding a "box" element into their page, grabbing the tag ID of this box on the page, then using custom site code that injects our javascript and associated custom div tags dynamically after the page has loaded This works and the widget loads and functions properly. However, it only works when you go directly to the page with the widget on it. If you navigate to the page by clicking links through their site, it will not load. From what I understand, the problem is related to the way Wix loads as it's technically a single page, or at least it's something like that so the code we have to inject our custom javascript and div tags only works the first time the website loads is the page with the "box" element that we are using to dynamically replace with our code. I searched around and found a company that has instructions on how to fully embed their widget to a wix site and it uses custom elements. I was unable to get it to work properly for us.


** SAMPLE WIDGET CODE **
I've attached an HTML file which you can open on your computer to see how the widget should work (loads full screen over the whole site). I've also attached a .txt file with the code to add to a Wix site using the "Embed HTML" feature so you can see for yourself how Wix breaks the UX by putting it in an iframe.


** REFERENCE INSTRUCTIONS ON OUR CURRENT SOLUTION **
Here is a link to the site where we got instructions on how to dynamically inject our custom code while giving us full DOM access. This is the current solution we have implemented but as mentioned, it still has the problem where the widget only loads when you go directly to the website in a new window and not when you navigate to the page from within the Wix site.
https://help.elfsight.com/article/1118-how-to-install-a-widget-on-wix-avoiding-iframe


** REFERENCE INSTRUCTIONS FROM SITE USING CUSTOM ELEMENTS **
Here is a link to that site I was referring to that has a simple solution for embedding their widget on a Wix site using custom elements: https://help.givebutter.com/en/articles/6464972-how-to-use-givebutter-widgets-on-a-wix-website
One thing I noticed about this solution is that it triggers on a button click. For us we need it to automatically run when the site loads so not sure if that will work or not with this custom element solution.

Compétences recommandées

Commentaire de l'employeur

“Absolutely outstanding work! Extremely attentive and has a strong desire to not just complete the task, but complete it as well as it can possibly be done. He made several suggestions and proposed new ideas I didn't think of to help produce the best outcome possible. Usually people on Freelancer are quick to just finish a task and move on but Rajan wanted to be sure everything was done right. It's refreshing and his skill, experience, and perseverance to solving every problem that came his way makes him one of the best freelancers I've worked with so far in my last 20+ years on this site (Back before when it was scriptlance).”

Image de profil PPass, United States.

Meilleures propositions de ce concours

Afficher plus de propositions

Tableau de clarification publique

  • usmancodes
    usmancodes
    • il y a 1 mois

    please checkout my #26

    • il y a 1 mois
  • mdraselsarker17
    mdraselsarker17
    • il y a 1 mois

    #guaranteed

    • il y a 1 mois
  • techxp23
    techxp23
    • il y a 1 mois

    Hello Sir, Please check my entry............................................................................... #8 ✅

    • il y a 1 mois
  • techxp23
    techxp23
    • il y a 1 mois

    Hello Sir, Please check my entry............................................................................... #8 ✅

    • il y a 1 mois
  • techxp23
    techxp23
    • il y a 1 mois

    Hello Sir, Please check my entry............................................................................... #8 ✅

    • il y a 1 mois
  • techdevelop5685
    techdevelop5685
    • il y a 1 mois

    #guaranteed please

    • il y a 1 mois
  • irvanmoses10
    irvanmoses10
    • il y a 1 mois

    do you guarantee $1500?

    • il y a 1 mois
  • huzaifa959
    huzaifa959
    • il y a 1 mois

    Dear Contest Holder, I want to discuss about the project. So please inbox me.

    • il y a 1 mois
  • shahoriarkhondo1
    shahoriarkhondo1
    • il y a 1 mois

    #guaranteed please

    • il y a 1 mois

Montrer plus de commentaires

Comment commencez des concours

  • Publiez votre concours

    Publiez votre concours Rapide et facile

  • Obtenez des tonnes de propositions

    Obtenez des tonnes de propositions De partout dans le monde

  • Attribuez la meilleure proposition

    Attribuez la meilleure proposition Télécharger les fichiers - Facile !

Publier un concours maintenant ou rejoignez-nous maintenant !