Why Is My Widget Not Being Adding to My Site When Selected?

wizfamily
wizfamily Member Posts: 5

Hey Guys,

I have created a private duda widget. When it is viewed in the widget builder's preview screen it shows up. However, when I try to add it to my site nothing happens (as if it cannot be added).


Can anyone please help with this?


Thanks In Advance!

«1

Answers

  • Ryan_Burke
    Ryan_Burke Member Posts: 38 Duda Staff

    Hi @wizfamily ,

    Try refreshing after adding the widget and if it is still not working then you probably need to reach out to our support team via the help widget on support.duda.co so they can check your account.

    Thanks!

  • Aj_Cre8
    Aj_Cre8 Member Posts: 630 MVP

    The widget also has to be Published.

    Within the Widget Builder at the top right of the screen, click Publish.

    Then ensure when using the widget on a site, you are dragging it where you want it not just clicking it.

    I am also going to assume you are the account owner, but if for some reason you are not (and are just a team member) the widget needs to be set to where the team can use the widget in the setting of the widget builder.

  • wizfamily
    wizfamily Member Posts: 5

    Hey Guys,

    Thanks for responding. The widget is published. I tried to drag and drop the widget onto the screen, but it does not seem to actually do anything. When trying to click on the widget, it is not installing. Yes, I am the account owner.

  • wizfamily
    wizfamily Member Posts: 5
    edited March 2022

    So I have done some investigating and figured a few things out.


    When I copy/paste the full html document of my website (widget) into the duda widget div, the preview loads and works fine. However, it does not republish the changes to my website. When I delete and re-add the widget back to the website to get around this issue, the widget does not get added to the website.

    When I remove the html, body and header tags from the document, I can load the widget with no problems into my website, but none of my event listeners are being called.


    Event Listener written as:

    `document.getElementsByClassName(".className")[0].addEventListener('event', function(){...});`

    This pretty much renders the widget useless.


    As stated, when the full web document is copy/pasted into the duda site widget builder, and I click on preview...the site loads and works as it normally should. Am I missing something here?

  • Aj_Cre8
    Aj_Cre8 Member Posts: 630 MVP

    . Are you putting that script in your HTML section?

  • Elizabeth_Fedak
    Elizabeth_Fedak Member Posts: 106 MVP
    edited March 2022

    If you check in the HTML in Dev mode on your site, it’s likely being added but not rendering anything/disappearing.

    btw re using a document selector, it sounds like you’re not using widget best practices on this one. Use the element selector instead of document for widgets ie

    $(element).find(“.classname”)….

    or element.querySelector

    As for the rest—are you putting your JavaScript on the JavaScript page? Or did you add it via a script tag in the html? If html, move it to the JavaScript document in the widget and remove the html <script> tag.

    you can also turn off lazy load in the settings.

    I recommend opening chrome Dev tools and seeing if an error message is displaying to debug the code as a step as well.

    feel free to message me the code if you need more specific pointers.

  • wizfamily
    wizfamily Member Posts: 5

    I am loading all external scripts via JavaScript.

    Is there a reason why we would have to use querySelector as opposed to pulling elements by className? The query selector does a depth first search on the DOM tree and is extremely slow opposed to the latter.

    I also did not want to be forced into using Jquery for similar reasons; though I understand all duda sites come with jQuery pre-loaded.

    I have turned off lazy loading, and yes I have troubleshooted what errors that have appeared in the console. All seems to be well in regards to these things.

  • Elizabeth_Fedak
    Elizabeth_Fedak Member Posts: 106 MVP
    edited March 2022

    I’m not sure of the exact why but the documentation advises using that rather than document.getElementBy etc. One advantage is that you're going to often add widgets multiple times to the same page, so using query selectors within that block of code only w/ a class will make your code only search in that specific widget.

    I have built hundreds of widgets so the easiest way to help would be to share more of the code snippet or the error messages you’re seeing and relevant code. If you’re using the dmAPI load script then the script should be loading but you can verify if it’s in the sources list for the page. The Duda support team doesn’t support troubleshooting widget builder code errors AFAIK. Event listeners definitely work so there might be an issue with the callback function you're executing or maybe there is a small bug that we can help you troubleshoot if we see the code.

  • wizfamily
    wizfamily Member Posts: 5

    I have re-written the event listeners and re-published the widget, but it seems that the updates are having trouble coming through. I have changed the background color of the page to make sure that the changes are being saved, but I do not see them in the editor or on the site.

    Currently troubleshooting this...

  • Aj_Cre8
    Aj_Cre8 Member Posts: 630 MVP

    I am going to +1 what @Elizabeth_Fedak said. You may want to link up with a Duda Expert and have them help you with this. We can not help without inspecting the code and seeing what's wrong.