Buttons not displaying. HTML is output to the page with no console errors.

Hi @circularsquare,

I guess it might be because of the calendar type options. You need to put the single options in quotes. In your case, I would go for something like…

options='\"apple\",\"google\",\"ical\",\"Microsoft365\",\"MicrosoftTeams\"'

This should do the trick.

If you are still experiencing issues, try to add the “debug” attribute. Only with this set, you will see some more detailed logs in the console and where you place the button.

One more remark based on your last code snippet. You do not need to use the shortcode, when you are already on code level. You could also directly use the <add-to-calendar-button /> tag. It would save you maybe some ms and could be a tiny little bit more stable. Completely up to you and also, of course, depends on the rest of your code. Just wanted to point that out.

Looking forward to your feedback, whether your problem got resolved!

Best,
Jens

• This reply was modified 1 year, 1 month ago by Jens Kuerschner.

Hi there Jens,

Thank you for the quick response. In changing the options formatting to your suggestion and turning on debugging I’m getting the following error –

Error: Add to Calendar Button generation (atcb-btn-3) failed: a subscription calendar requires a valid explicit ics file as well.

The “listStyle” attribute is also missing quotes.

The error you see does not describe the actual problem, but is a symptom for something interfering with the HTML element. Hopefully it is the missing quotes. Possibly, it is another plugin altering the HTML. In this case, it could help to generate the tag directly, as mentioned before.

Hi @circularsquare,

I checked your source code and the problem seems to be the following:

Somehow, when you change an attribute, the button appears. This makes me believe that there is some strange order of events. Like the script being blocked by your consent management, but only partly – or something like this. Either way, something is interfering with the regular flow.

My recommendation: Either disable the plugin and include the script from the jsDelivr CDN + use the default implementation as described here: https://add-to-calendar-button.com/use ; OR try to update an attribute after everything has been loaded. You can add an attribute “instance”, for example, and simply count its value up whenever something changes (like user consent or so).

Hi Jens,
I like your plugin, but I have the same problem as @circularsquare. Only a rollback to version 1.4.1 helped me. Unfortunately a version with a security problem. I think the incompatibility came with version 1.5 (fixing the security problem?). Maybe the hint will help so that the plugin works as usual in the current version.

Best regards Klaus

Hi Klaus,

Can you maybe share some details about your setup? Like plugins you are using – or whether you are using a page builder like elementor.

Are you using the shortcode or the Gutenberg Block?

Version 1.5 did not really change anything big. It only makes sure that malicious attributes are not allowed. In 99,9% this should have no impact at all.

Thanks!

Hello Jens,
to your questions. I only use Gutenberg, no pagebuilder. Kadence theme and blocks. “Cache Enabler” and “Autoptimize” come to mind as special plugins.

I have created my own post type (veranstaltungen) via ACF/CPTUI to manage and display events. The display is done by a own plugin in a loop over relevant events and each event gets its own “Add to Calendar Button”. My plugin generates the string with the angle brackets as shown on the configuration page and below.

After the button was no longer displayed, I went back in the versions with the “WP Rollback” plugin. I have disabled “autoptimize” and “cache enabler”. With versions 1.6, 1.5.1 and 1.5, the debug option displayed the message “Error: Add to Calendar Button generation (atcb-btn-1) failed: a subscription calendar requires a valid explicit ics file as well“. The button was only shown in version 1.4.1.

Here is the excerpt from the page html source code (ba.test is my local test system):

<add-to-calendar-button 
  name="Kochen Nr. 6"
  description=""
  startDate="2023-12-15"
  startTime="16:00"
  endDate="2023-12-15"
  endTime="20:00"
  timeZone="Europe/Berlin"
  location="Anker e.V. (Fstr. 24), 12053 Berlin"
  organizer="Ba|[email protected]"
  options="'Apple','Google','iCal','Outlook.com'"
  buttonStyle="custom"
  customCss="https://ba.test/wp-content/themes/ba/ba-veranstaltungen/ba_atcb-round.css"
  trigger="click"
  hideBackground
  listStyle="dropdown"
  size="3"
  language="de"
  debug="true"
></add-to-calendar-button>

I hope you can show me what I should do differently or that my description helps with troubleshooting.

Best regards Klaus

Thanks! Will investigate.

Could you maybe try writing hideBackground=”true”? I observed some issues with boolean attributes. Not sure if this affects you

Unfortunately no change.

Thanks. One more question: Does it work when not using the custom style, but e.g. buttonStyle=”round” – while also not specifying the customCss option?

Hello,
I have removed “customCss” and changed buttonStyle to “round”. The button is then shortly visible and is then replaced by the error message. With debug=”false” the button appears briefly and then disappears.
The following messages are displayed in the Firefox developer tools console:

Add to Calendar Button script initialized (version 2.4.3)
see https://add-to-calendar-button.com for details.
atcb.js:30:248913
Add to Calendar Button "atcb-btn-1" created atcb.js:30:245400
Add to Calendar Button "atcb-btn-1" destroyed atcb.js:30:241124
Add to Calendar Button generation (atcb-btn-1) failed: a subscription calendar requires a valid explicit ics file as well atcb.js:30:245608
    Mt https://ba.test/wp-content/plugins/add-to-calendar-button/lib/atcb.js?ver=2.4.3:30
    initButton https://ba.test/wp-content/plugins/add-to-calendar-button/lib/atcb.js?ver=2.4.3:30
    connectedCallback https://ba.test/wp-content/plugins/add-to-calendar-button/lib/atcb.js?ver=2.4.3:30
    jQuery 12
        append
        $e
        append
        wrapAll
        wrap
        each
        each
        wrap
        readall
        each
        each
        readall
    <anonym> https://ba.test/aktuelles/:482
    jQuery 2
        e
        t

Thanks for testing.

I found some issues in the core script (which got upgraded from 2.4.1 to 2.4.3) while inspecting every changed line of code.

However, none of this would be an explanation for the observed behavior. I guess it is a strange mixture of multiple things.

Something in your system loads some cached version, then deletes the element, then re-renders the page. During that process, some information gets lost. But not on the script level, but between the cache and the browser.

What is still a little strange: Version <1.5 working. I therefore suppose that your caching is the “bad boy”, injecting some code into the button code (somewhere along this flow), which breaks it due to the mentioned issues.

At least, I do not have any other explanation at the moment.

Would you can do now:

• Try to exclude atcb.js and atcb.min.js from getting cached/optimized. Worth the try, but I guess it is rather some HTML optimization. You could also try to not “Optimize HTML Code?” at autooptimize.
• Wait for the next major upgrade, coming in the next weeks. It at least fixes all the issues from above, which most probably indirectly resolves the issues.
  (Regarding the “security issue” – this would only be relevant, if you allow random people to create Posts or Pages. With the older versions, it was possible to sneak in malicious code – but only, if the attacker has access to the admin panel.)

Sorry for the inconvenience!

The latest v2 fixes a lot of issues. I really hope that your issues are among them. At least it should change something ;).

Closing this for now. Please open a new thread if you’re experiencing new issues. Thanks!