inline example

[asawatzki]

Hi,

I'm trying to render the badge inline (because it is hidden by the footer), but it does not work. Probably, I'm doing it wrong. Can you give me some example or hint?

I register the plugin like:

import Vue from "vue";
import { VueReCaptcha } from "vue-recaptcha-v3";

Vue.use(VueReCaptcha, {
  siteKey: process.env.RECAPTCHA_PUBLIC_KEY,
  loaderOptions: {
    useRecaptchaNet: true,
    autoHideBadge: false
  },
  explicitRenderParameters: {
    container: 'inline-badge',
    badge: 'inline',
    size: 'invisible'
  }
});

and use it like:

<template>
  <v-container>
   <div id="inline-badge"></div>
   <v-btn @click="submit">Suche</v-btn>
  </v-container>
</template>

[SerhiyRomanov]

Hi, i'm faced with the same problem. How can I render the Recaptcha badge inline in my form? Are there any example?

[bokuns]

This works for me, you could just use recaptcha-v3 package instead.

I guess the problem with your code example is that <div id="inline-badge"></div> does not exist until the component mounted, thus configuring the container inside Vue.use(...) at the beginning might not bind the element correctly.

[sjsd]

Try following setup:

      loaderOptions: {
        explicitRenderParameters: {
          container: 'inline-badge',
          badge: 'inline',
        },
      },

[ErikEndler]

work for me

explicitRenderParameters: {
          container: 'inline-badge',
          badge: 'inline',
        },

but in the console log it shows this:
Uncaught (in promise) Error: grecaptcha.execute only works with invisible reCAPTCHA.