1

I am trying to build a reusable Google reCAPTCHA LWC component for our org. I have successfully implemented this in Experience Cloud for another org we have, however that org is using the standard Lightning Community Builder. I followed this tutorial: https://www.learnexperiencecloud.com/s/article/Implementing-reCAPTCHA-in-Community-Cloud

In this tutorial we modify the markup directly in the community builder itself. This worked on the other org we have that uses the community builder.

An older org we have uses standard Visualforce community. I am trying to render this LWC reCAPTCHA component using Lightning Out. I can see the component is called, I see the browser inspector's logs and it is working correctly, however the actual "I am not a robot" checkbox I cannot get to display. I tried adding static text "test123" to the LWC and it is displaying in Visualforce. So I am doing something wrong where the reCAPTCHA checkbox just isn't displaying.

One reason could be is I don't have any place to put the markup. Trying to put it on the VF page throws me an error with the link to the reCAPTCHA script:

<script src='https://www.google.com/recaptcha/api.js?render=explicit&onload=onloadCallback' async defer></script>

Error when deploying page:

The reference to entity "onload" must end with the ';' delimiter.

I posted this question to Stackexchance but have no answers yet.

Is it possible I can put the markup which includes the above script directly into LWC? I'm not sure if this missing markup is causing the reCAPTCHA to not display, but I don't know why else it isn't showing.

I was thinking of trying to put this LWC directly into an app page in Salesforce instead of VF to see if it will even display there. But in that case I still don't know where to put the markup!

Thanks

1 Answer 1

1

As far as I know, to include external libraries in VF you need to use the apex:includeScript tag. Check this article https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_includeScript.htm

After including like that, you should be able to handle the onload with the html pass attributes (https://developer.salesforce.com/docs/atlas.en-us.238.0.pages.meta/pages/pages_html_features_pass_through_attributes.htm) and do whatever you need

1
  • THANK YOU! Such a simple solution. Do you know how I can use the "async" and "defer" with apex:includeScript? I don't even know if it's needed... Jun 10, 2022 at 17:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .