Autofill Dynamic Calendly link with logged-in user data

Ask the community
1

Hi,
In a list-detail I would like to include a button linked to a calendly link for each record that picks up the logged-in user data so it can create an URL like Calendly - ---[logged-in user email].

I appreciate any help :slight_smile:

Thanks a lot

2

Check this out:

On that page, look for “pre-fill questions”.

You want to follow the email example. You will want to use window['logged_in_user']['softr_user_email'] as the value for the email parameter.

Let me know if this is enough of a clue!

3

Re-reading your post, I think I missed something. You wanted to pre-fill the user’s email address via the calendly url. Docs for that are here: https://help.calendly.com/hc/en-us/articles/226766767-Pre-populate-invitee-information-on-the-scheduling-page

4

I have such an example perhaps it could help

<!-- Calendly inline widget begin -->
<script>
    let calendlyUrl = 'https://calendly.com/your-url';
    
    if(window['logged_in_user'] && window['logged_in_user']['softr_user_email']) {
        calendlyUrl = calendlyUrl + '&email=' + window['logged_in_user']['softr_user_email'];
        calendlyUrl = calendlyUrl + '&name=' + window['logged_in_user']['softr_user_full_name'];
    }
    
    document.write('<div class="calendly-inline-widget" data-url="' + calendlyUrl + '" style="min-width:320px;height:630px;"></div>');
</script>

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->
1 Like
5

The code does not seem to work, but this is exactly what I need code wise.

When I embed the usual calendly code, it shows the below in my editor and the page loads normally when I publish the app.
Screenshot 2022-10-13 at 10.25.10

When I use the code you provided, it shows the below in my editor and the entire page is blank when I publish (not even the header)
Screenshot 2022-10-13 at 10.29.32

My usual calendly code is

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/talkytalk/h23jh3ejgut6t668?hide_event_type_details=1" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->

The code I’ve been using with your guidance is

<!-- Calendly inline widget begin -->
<script>
    let calendlyUrl = 'https://calendly.com/talkytalk/h23jh3ejgut6t668?hide_event_type_details=1';
    
    if(window['logged_in_user'] && window['logged_in_user']['softr_user_email']) {
        calendlyUrl = calendlyUrl + '&email=' + window['logged_in_user']['softr_user_email'];
        calendlyUrl = calendlyUrl + '&name=' + window['logged_in_user']['softr_user_full_name'];
    }
    
    document.write('<div class="calendly-inline-widget" data-url="' + calendlyUrl + '" style="min-width:320px;height:630px;"></div>');
</script>

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->

I would really appreciate any help having spent most of the night trying to crack that :sleepy:

Thanks A LOT for your help !

1 Like
6

@rbnplt can you pls share a link to check ?

7

Thanks David, sorry, my question was not super clear.
For each of my “products” within in a list, I have a specific Calendly URL.
In a list detail block, I would like to have either:

  • A button redirecting to the calendly page
  • An in-line embed Calendly widget

In both cases, I would like the URL to pick up window['logged_in_user']['softr_user_email'] to be added at the end of the original URL. This is the step I am struggling with.
Thanks a lot !

8

We can use the one I left in the code above https://calendly.com/talkytalk/h23jh3ejgut6t668
Thanks a lot Artur !

9

@rbnplt I mean the link to the detail page that is not rendering at all

10

https://talkytalk.softr.app/expertpage?recordId=reca88tPemBGZsZLV

11

I think document.write is the one messing up. I will check this and share better version. Ping us when code by us is not working :slight_smile: it’s mostly our fault :slight_smile:

12

Besides that, it is still a pleasure to use softr :upside_down_face:

1 Like
13

@rbnplt did you make it work with embed type ? but I guess you did not autofill then ?

14

Sadly I didn’t manage to make the autofill work, still the same issue. Do you think it is due to the code or the platform?

15

Been giving a try again but so far still unsuccessful :sweat_smile: Any advice will be greatly greatly appreciated :pray:t2:

1 Like
16

On it now :slight_smile: Let me do some checks and tests… The whole challenge is that the field comes from airtable dynamically

1 Like
17

I found this code on the Memberstack support, which could potentially be adapted for Softr

<script>
window?.$memberstackDom.getCurrentMember().then(({ data: member }) => {
 let memberEmail = member.auth.email
 let memberName = member.customFields["name"]
 Calendly.initInlineWidget({
  url: 'https://calendly.com/YOUR_LINK/30min',
  prefill: {
   name: memberName,
   email: memberEmail,
   customAnswers: {
    ...
  }
 } 
});

}).catch(err => console.log(err)) // catch errors and log them to console
</script>```
18

@rbnplt this is great! can you pls try this ?

<script>
if(window['logged_in_user'] && window['logged_in_user']['softr_user_email']) {
    const memberEmail = window['logged_in_user']['softr_user_email'];
    const memberName = window['logged_in_user']['softr_user_full_name'];
    Calendly.initInlineWidget({
        url: 'https://calendly.com/YOUR_LINK/30min',
        prefill: {
         name: memberName,
         email: memberEmail
       } 
      });
}
</script>
1 Like