Here’s something I have been playing around with – try it and let me know what you think?
Sometimes I’m looking at one of my sites and I see a typo or something and I just want to zip into the studio and fix it easily. So I wanted an “Edit this page” button to appear, just for me, that would take me directly to the page in the studio where I could edit it.
To try this out in one of your apps, put the following in the site settings’ custom code under Code Inside Footer.
What it does: creates a floating button in the lower left corner of every page on your site. The button is labeled “Edit This Page” and displays the button only if you are logged in to your site with your admin email. When the button is clicked, it opens up studio.softr.io so you can edit the page from which you clicked the button.
IMPORTANT: change superuser@example.com to the email address of the account you use to log into your sites.
<style>
.edit-this-page {
position: fixed;
z-index: 9999999;
left: 20px;
bottom: 60px;
}
</style>
<script>
function editThisPage() {
const appId = document.querySelectorAll("div[data-appid]")[0].attributes['data-appid'].value;
const pageId = document.querySelectorAll("div[data-appid]")[0].attributes['data-pageid'].value
const url = `https://studio.softr.io/applications/${appId}/pages/${pageId}`
window.open(url);
}
</script>
<input class="edit-this-page" type="button" value="Edit this page" onclick='editThisPage()')">
<script>
if (!(typeof logged_in_user === 'object') || logged_in_user.softr_user_email != "superuser@example.com") {
document.querySelectorAll('input.edit-this-page')[0].remove();
}
</script>
