Trouble embedding code on Wix website

[lnordgreen]

Hello,

I'm also getting married (yay!) and am making a Wix website. Would love to have an easy way for guests to add the scheduled events to their own calendars, but it seems way to be more difficult than I thought.

I'm a complete noob, so please bear with me. I embedded the code into a frame in the Wix Editor, and the calendar button looks fine. On my PC, it works well for the online calendars but downloading an iCal-file does not work. On my iPhone, none of the calendars seem to work.

There are some clues in the WIX Troubleshooting. I'm pasting them below, but I'm to noob to understand them.

Could you please tell me if there is a way to fix this, and if so, how?

Below is the code I've pasted, as well as the Wix troubleshooting Q&A.
Thank you very much for any pointers! 🙏

My code

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/add-to-calendar-button@1/assets/css/atcb.min.css">

<div class="atcb" style="display:none;">
  {
    "name":"Bryllup (partner and me)",
    "description":"Vi gifter oss! 
  Kleskode: Sommerlig pent. 
  Se flere detaljer på nettsiden vår: www.website.com",
    "startDate":"2023-07-29",
    "endDate":"2023-07-30",
    "startTime":"16:00",
    "endTime":"04:00",
    "location":"Wedding location",
    "label":"Add to calendar",
    "options":[
      "Apple",
      "Google",
      "iCal",
      "Microsoft365",
      "MicrosoftTeams",
      "Outlook.com",
      "Yahoo"
    ],
    "timeZone":"Europe/Rome",
    "trigger":"click",
    "inline":true,
    "listStyle":"modal",
    "iCalFileName":"Reminder-Event"
  }
</div>

<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@1" async defer></script>

Wix troubleshooting:

Elements don't look / function as they should
HTML code contains the core elements of a page, but the design settings and other complex functionalities are usually stored separately.
Therefore, some elements may not function or look the same if the relevant elements aren’t included as a reference within the HTML code, for example the CSS and JS files.

The links in my iFrame are not working
In most cases, links don't work if they're set to open in a new tab or window. Check the code you entered to see if that's the issue.
If unsure, contact the third-party provider who wrote the code.

[jekuer]

Checked it.
Unfortunately, Wix is currently not supporting the integration of tools like ours. They are either blocking the whole implementation, because we are manipulating the DOM - OR blocking the client-side iCal generation when including it as an HTML element (like you did).
The only thing I can do right now is recommending you to use something like Webflow instead. We migth come up with a distinctive Wix App in the future.

[lnordgreen]

Ok, thanks for checking that and getting back to me! I'll check out Webflow 🤔

[Gerd1985]

Hello.

First of all I am very happy about this project! :D But as I am a beginner in the programming I might do something wrong with the code.

I tried to include the code to my Thinkific website where I ask people to sign up for a waiting list.

Unfortunately, I was not able to see the button at all after the code was included. Maybe Thinkific is also blocking it.

I added the code block below to the page to see if it works (without changing anything so far).

{ "name":"Reminder to star the add to calendar button repo", "description":"Check out the maybe easiest way to include add to calendar buttons to your website:\n→ [url]https://github.com/add2cal/add-to-calendar-button|Click here![/url]", "startDate":"2023-01-14", "endDate":"2023-01-16", "location":"World Wide Web", "options":[ "Apple", "Google", "iCal", "Microsoft365", "MicrosoftTeams", "Outlook.com", "Yahoo" ], "timeZone":"Europe/Berlin", "iCalFileName":"Reminder-Event" }

Maybe you can help here?

Thanks a lot for your support.
Gerd

[jekuer]

To be honest, I have no idea what this Thinkific is.

Generally speaking: You need to be able to create HTML content and insert JavaScript. The more basic the no code tool, the smaller the chances this works - because they are usually extremely restrictive.

Regarding Thinkific: Do you have a chance to insert pure html? Do you have the official option to include JavaScript?
If the first answer is yes, but the second is no, you still have a small chance that you can infuse JavaScript within the HTML code.
But those are basically the minimal requirements to get this to work at the moment.

For the HTML:
The data block of you is fine. However, you would still need to put a div wrapper around it (as can be seen at the examples at the demo page).

[Gerd1985]

Hi :)

Thanks a lot for your answer. Highly appreciated!

Together with the Thinkific help center (Thinkific is a platform to host online courses) we tried several examples from the demo page (https://add-to-calendar-button.com/).

Luckily with the code from example number 8 we were able to see the calendar button (see screenshot attached). Unfortunately, the button does not work when we try to click on it.

Maybe you can see in the code in the screenshot where our mistake is. :)

Below you can also find the feedback from the Thinkific help center. They also put 2 links in which show videos how they tried to solve the problem. They have the opinion that we should be somehow able to add the calendar button.

Thinkific feedback:

_I'm sorry to hear that you are having trouble adding a calendar button. I have reached out to the team and we have tried adding the codes from https://add-to-calendar-button.com/, it is not working on our end as well.

We even tried copying the code from Example 8, this one showed a button but it did not link to any calendar. Please see the screen recording here: https://share.getcloudapp.com/2Nu7ZxjB

We also tried getting the URL on the code and added it to an iframe generator, it gave us a result but with an error. Please see the recording here: https://share.getcloudapp.com/z8uQ256K_

Thanks again for helping out!

Best regards
Gerd

[jekuer]

Puhhh - a tough platform. But cool - might approach them to build a specific plugin.

Anyway - it will work for you. You can follow the demonstrated approach with the "text & media" block, but add the following (this will use the regular button - not the custom approach):

<div class="atcb" style="display:none;">{
    "name":"Bryllup (partner and me)",
    "description":"Vi gifter oss! 
  Kleskode: Sommerlig pent. 
  Se flere detaljer på nettsiden vår: www.website.com",
    "startDate":"2023-07-29",
    "endDate":"2023-07-30",
    "startTime":"16:00",
    "endTime":"04:00",
    "location":"Wedding location",
    "label":"Add to calendar",
    "options":[
      "Apple",
      "Google",
      "iCal",
      "Microsoft365",
      "MicrosoftTeams",
      "Outlook.com",
      "Yahoo"
    ],
    "timeZone":"Europe/Rome",
    "trigger":"click",
    "inline":true,
    "listStyle":"modal",
    "iCalFileName":"Reminder-Event"
  }</div>
<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@1"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/add-to-calendar-button@1/assets/css/atcb.min.css">

It might require you doing this 2 times, since Thinkific is messing around with saving stuff. But once it is saved, it works - not in the preview, but the live view.
(The approach from the screenshot above was missing loading the actual script - but better go with the default button - more stable.)

[Gerd1985]

It works! Whoop Whoop! 👯

Thanks a lot! Highly appreciated your help!

I will sponsor your channel in a minute!

Best regards
Gerd

[jekuer]

Thanks a lot! 😍