This article is for the Legacy version of Appointlet. Click here for the instructions on the most recent app version.
In some situations you might want to prepopulate some or all of the fields on your booking page; maybe you already know the user's email address and want to ensure they don't have to type it in again.
Prepopulate with a Link
If you're linking users to your booking page and want to prepopulate a field, here's how you can do that.
First, navigate to the Form Fields section of your Admin panel. Choose the form field that you want to edit
Let's start with email address:
https://<your-organization>.appointlet.com/?email=hello@world.comIf you want to prepopulate one of your custom fields, start by editing it in the admin dashboard and clicking on "Advanced Options". Look for the "Slug" field, it has an example below it on how it would be prepopulated:
Just to be clear, that's "field__" (two underscores) and then the slug for the parameter name.
Prepopulate Multiple Fields
To prepopulate more than one field simply add an & and repeat the field_name=<value>. For instance, if you wanted to prepopulate a name and email address it would look like:
https://<your-organization>.appointlet.com/
?email=hello@world.com&field__first-name=<value>
And you can append to add &field_name=<value> to auto-populate multiple fields
How do I get a checkbox to be automatically ticked?
Do you have a checkbox field and want it to default to "ticked"? Easy! Just pass that field through with no value, ie for a "Subscribe to mailing list" field with a slug of maillinglist - to have that automatically ticked as yes pass that data in like so:
https://<your-organization>.appointlet.com/?field_maillinglist
Prepopulate with Website Integration
You can also prepopulate fields with our website integration. If you've installed the Javascript snippet on your website, you probably have something that looks like this:
<script src="https://d35xd5ovpwtfyi.cloudfront.net/loader/loader.min.js" async="" defer=""></script>
<img src="https://d35xd5ovpwtfyi.cloudfront.net/loader/buttons/008DBD.png" data-appointlet-organization="...">
You can leave the <script ...></script> part alone, but for the <img ...> (or any other HTML tag you might want to use as a button), you can add attributes to prepopulate the fields. An example with email first:
<img src="https://d35xd5ovpwtfyi.cloudfront.net/loader/buttons/008DBD.png" data-appointlet-organization="..."
data-appointlet-email="hello@world.com">
And now an example with a custom field. Keep in mind that you'll need the field "slug" value (instructions in the "Link" section above).
<img
src="https://d35xd5ovpwtfyi.cloudfront.net/loader/buttons/008DBD.png"
data-appointlet-organization="..."
data-appointlet-email="hello@world.com"
data-appointlet-field-name="Jared">
The "name" portion of the data-appointlet-field-name attribute will need to be swapped out for the field's slug.
Prepopulate with the Javascript API
If you're using the Javascript API to open and close the booking widget, you can also pass off prepopulated values for the fields. Example:
<script>
$(function() {
appointlet({
organization: "...",
email: "hello@world.com",
fields: {
"name": "Jared"
}
}).show();
});
</script>