Lead form

To add the lead form widget to your site you can follow this guide.

In this guide we are going to add the lead form widget to your job pages via GTM. Adding the script using GTM requires you to add a Custom HTML tag, a Trigger and a Variable. This guide will go in to detail on what settings your need to add.

This guide expects you to use some sort of CMS making sure your vacancy pages all use the same layout. This guide will not work if your vacancy pages are not build by some sort of layout builder.

Variable (Lookup Table)

First determine what flow needs to be added to what page. This mapping is defined using a Lookup Table. Go to the Variables page in your GTM environment and scroll down to add a user defined variable.

Select the option to add a Lookup table and add the text {{Page Path}} as your Input variable.

In the section 'Lookup Table' add the Page path on the left side and the flow id on the right side of the table.

If you are unsure what the Page Path is you can use the preview mode to see the Page Path in the variables tab of every event.

To find the flow id you can open the flow using the Botstudio, the ID can be found in the URL.

Trigger

The trigger will make sure the code we are adding in the next step will be excecuted at the right time. The trigger needs to fire on all the pages that are added in the Lookup table.

To make this happen navigate to the Trigger page in your GTM environment and add a new trigger. After creating the trigger select the trigger type 'Page View'. To make sure the trigger is only fired on the correct pages switch the radio button to 'Some Page Views and set it up by adding the Recrubo Lookup variable you have just made as the first option, does not equal as the second and add the text undefined as the third.

Custom HTML tag

The Custom HTML tag determines what code is excecuted on your site. The code below will create the lead form script Recrubo provides in the deploy dialog dynamically.

The code

The code does need some configuration before being added to a tag. This can be done in two steps.

First the organization id needs to be added to the script replace *YOUR ORGANIZATION ID* with the id of your organization. You can find this id in the script provided in the deploy dialog.

Second the location of the button needs to be determined. In this example the site https://recrubo.com/en/ will be used to show how you can find the querySelector you need to add on line 9 of the code.

In this case i'm using the 'Book a demo' button. To find the querySelector, right click the button and click the option 'inspect'.

After clicking 'inspect' and editor will open highlighting the element you've just inspected. Right click the element and copy the selector as shown in the example. This will result in something similar to the code below. Replace the text *PATH TO PARENT* with the code you've copied.

#page > section.pb-[100px].pt-[50px].md:pt-[70px].lg:pt-[100px].overflow-hidden > div > div.max-w-[614px].mx-auto.text-center.mb-20 > div.[&_>div]:justify-center > div > a

<script>
    // Build the div
    var desktopButton = document.createElement('div');
    desktopButton.className = 'recrubo-lead-form';
    desktopButton.dataset.flowId = {{Recrubo Lookup}};
    desktopButton.dataset.organizationId = '*YOUR ORGANIZATION ID*';
    
    // Find the element you want the button to be displayed under.
    var desktopTopButton = document.querySelector(*PATH TO PARENT*);
    // Check if the element can be found and add the recrubo div
    if (desktopTopButton != null) {
        desktopTopButton.parentNode.insertBefore(desktopButton, desktopTopButton.nextSibling);
    }
</script>

<script type="application/javascript" src="https://widget.recrubo.app/form/webwidget.js"></script>

The tag

After setting up the code it is now time to set up the tag. The Tag Type should be Custom HTML. Paste the code in the input field en select the trigger build in the previous step.

Don't forget to test and publish your changes after you are finished with this guide.