📝 How to Create a Dynamic Check-In Button (Query String Passthrough)
This guide shows how to build the Virtual Check-In button that takes a guest’s query string from the checkin page and passes it on to the checkinguest page.
Step 1: Create the Button
- Insert an Otter Button.
- In Link Settings, set the Button URL to:
https://clevelandbyjay.com/checkinguest/ - Go to Advanced → Additional CSS Class(es).
- Add:
swj-checkin-btn
(screenshot of button settings here — your Virtual Check In button)
The 2 images below are critical into making it happen (the #signwithinthebutttonURLiskey)

Step 2: Add the Script
- Directly under the button, add a Custom HTML block.
- Paste the following code:
<script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('.swj-checkin-btn a').forEach(function(btn){ btn.href = "https://clevelandbyjay.com/checkinguest/" + window.location.search; }); }); </script>
(screenshot of Custom HTML block with script)
Step 3: Save as a Pattern
- Select both the Button and the Custom HTML block.
- Click the 3-dot menu → Create Pattern / Reusable Block.
- Name it:
Virtual Check-In Button - Now, you can drop this prebuilt button+script anywhere on the site.
(screenshot of save as pattern)
Step 4: Confirm
- Visit your
checkinpage with a query string.
Example:https://clevelandbyjay.com/checkin/?wpf4043_19=123456&wpf4043_21=Booking.com - Click the button → it should redirect to:
https://clevelandbyjay.com/checkinguest/?wpf4043_19=123456&wpf4043_21=Booking.com
(screenshots of before/after with working URL)
✅ Result: Guests are always redirected to checkinguest/ with their unique codes preserved.
1. Saving as a Pattern
Yes ✅ — if you save the Button block + its CSS class (swj-checkin-btn) + the Custom HTML block with script as a Pattern (Reusable Block), both will be preserved.
- The CSS class stays attached to the button.
- The script inside the HTML block stays with it.
- When you drop that pattern on a new page, it will work the same way.
2. Validity of Custom HTML
Yes ✅ — the <script> inside the Custom HTML block is valid on any page where it’s placed.
- It doesn’t matter what the page slug is.
- As long as the button has the
swj-checkin-btnclass, the script will find it and append the query string. - If you drop multiple buttons with that class on the same page, the script updates all of them.





