Softr

by Build client portals and

about 200K users per month

Visit

Plans

freepaid

Platforms

website

Requirements

Google sign inemail required

Softr is an online service that allows you to build client portals and internal tools using Airtable or Google Sheets data. With pre-built blocks and a drag-and-drop interface, you can create functional apps without code. Sign in with Google and start building today.

🔽💻

generate javascript code for a scroll button

️📥

download youtube thumbnail

generate app from prompt

Examples

💻🔽

Generate Javascript Code For A Scroll Button

inputs

outputs

&lt;script&gt; configObj = {"buttonD":"M16.806 13.667v-5.25c0-.967-.841-1.75-1.879-1.75-1.037 0-1.878.783-1.878 1.75v8.998c0 .912-1.073 1.472-1.907.995l-1.79-1.024c-.588-.328-1.326-.312-1.896.042-.93.578-1.061 1.805-.27 2.542l5.757 5.363h10.929l1.43-7.49c.22-1.333-.714-2.594-2.129-2.876l-6.367-1.3z","buttonT":"translate(-1208 -172) translate(832 140) translate(32 32) translate(344)","shadowSize":"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)","roundnessSize":"6px","buttonDToBottom":"32px","buttonDToRight":"32px","selectedBackgroundColor":"#ffb30b","selectedIconColor":"#111213","buttonWidth":"48px","buttonHeight":"48px","svgWidth":"40px","svgHeight":"40px"};function createButton(obj, pageSimulator) {&nbsp;&nbsp;const body = document.querySelector("body");&nbsp;&nbsp;backToTopButton = document.createElement("span");&nbsp;&nbsp;backToTopButton.classList.add("softr-back-to-top-button");&nbsp;&nbsp;backToTopButton.id = "softr-back-to-top-button";&nbsp;&nbsp;pageSimulator&nbsp;&nbsp;&nbsp;? pageSimulator.appendChild(backToTopButton)&nbsp;&nbsp;&nbsp;: body.appendChild(backToTopButton);&nbsp;&nbsp;backToTopButton.style.width = obj.buttonWidth;&nbsp;&nbsp;backToTopButton.style.height = obj.buttonHeight;&nbsp;&nbsp;backToTopButton.style.marginRight = obj.buttonDToRight;&nbsp;&nbsp;backToTopButton.style.marginBottom = obj.buttonDToBottom;&nbsp;&nbsp;backToTopButton.style.borderRadius = obj.roundnessSize;&nbsp;&nbsp;backToTopButton.style.boxShadow = obj.shadowSize;&nbsp;&nbsp;backToTopButton.style.color = obj.selectedBackgroundColor;&nbsp;&nbsp;backToTopButton.style.backgroundColor = obj.selectedBackgroundColor;&nbsp;&nbsp;pageSimulator ? backToTopButton.style.position = "absolute" : backToTopButton.style.position = "fixed";&nbsp;&nbsp;backToTopButton.style.outline = "none";&nbsp;&nbsp;backToTopButton.style.bottom = "0px";&nbsp;&nbsp;backToTopButton.style.right = "0px";&nbsp;&nbsp;backToTopButton.style.cursor = "pointer";&nbsp;&nbsp;backToTopButton.style.textAlign = "center";&nbsp;&nbsp;backToTopButton.style.border = "solid 2px currentColor";&nbsp;&nbsp;backToTopButton.innerHTML =&nbsp;&nbsp;&nbsp;'&lt;svg class="back-to-top-button-svg" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" &gt; &lt;g fill="none" fill-rule="evenodd"&gt; &lt;path d="M0 0H32V32H0z" transform="translate(-1028 -172) translate(832 140) translate(32 32) translate(164) matrix(1 0 0 -1 0 32)" /&gt; &lt;path class="back-to-top-button-img" fill-rule="nonzero" d="M11.384 13.333h9.232c.638 0 .958.68.505 1.079l-4.613 4.07c-.28.246-.736.246-1.016 0l-4.613-4.07c-.453-.399-.133-1.079.505-1.079z" transform="translate(-1028 -172) translate(832 140) translate(32 32) translate(164) matrix(1 0 0 -1 0 32)" /&gt; &lt;/g&gt; &lt;/svg&gt;';&nbsp;&nbsp;backToTopButtonSvg = document.querySelector(".back-to-top-button-svg");&nbsp;&nbsp;backToTopButtonSvg.style.verticalAlign = "middle";&nbsp;&nbsp;backToTopButtonSvg.style.margin = "auto";&nbsp;&nbsp;backToTopButtonSvg.style.justifyContent = "center";&nbsp;&nbsp;backToTopButtonSvg.style.width = obj.svgWidth;&nbsp;&nbsp;backToTopButtonSvg.style.height = obj.svgHeight;&nbsp;&nbsp;backToTopButton.appendChild(backToTopButtonSvg);&nbsp;&nbsp;backToTopButtonImg = document.querySelector(".back-to-top-button-img");&nbsp;&nbsp;backToTopButtonImg.style.fill = obj.selectedIconColor;&nbsp;&nbsp;backToTopButtonSvg.appendChild(backToTopButtonImg);&nbsp;&nbsp;backToTopButtonImg.setAttribute("d", obj.buttonD);&nbsp;&nbsp;backToTopButtonImg.setAttribute("transform", obj.buttonT);&nbsp;&nbsp;&nbsp;&nbsp;if(!pageSimulator) {&nbsp;&nbsp;&nbsp;backToTopButton.style.display = "none";&nbsp;&nbsp;&nbsp;window.onscroll = function() {&nbsp;&nbsp;&nbsp;&nbsp;if (document.body.scrollTop &gt; 20 || document.documentElement.scrollTop &gt; 20) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;backToTopButton.style.display = "block";&nbsp;&nbsp;&nbsp;&nbsp;} else {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;backToTopButton.style.display = "none";&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp;backToTopButton.onclick = function() {&nbsp;&nbsp;&nbsp;&nbsp;document.body.scrollTop = 0;&nbsp;&nbsp;&nbsp;&nbsp;document.documentElement.scrollTop = 0;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;}&nbsp;};document.addEventListener("DOMContentLoaded", function() { createButton(configObj, null); });&lt;/script&gt;

📥🎞️

Download Youtube Thumbnail

inputs

outputs

🌊✍️

Create Wave

inputs

outputs

🖌️🔵

Create Shape

inputs

outputs

📝📱

Generate App From Prompt

inputs

outputs

inputs

outputs

Features

Softr integrates with popular tools like Zapier, Google Analytics, Stripe, Hotjar, and Mailchimp.
With Softr, you can publish on any device.
Softr offers granular permissions and access levels.
Softr has a user-friendly drag and drop interface.
Softr comes with prebuilt functional blocks like lists, charts, forms, tables, calendar, and maps.

Perfect for

Clients can use Softr to access custom-branded and secure client portals.
Non-developers can use Softr to easily build internal tools for business processes and workflows.
Businesses can use Softr to create community hubs for resource sharing and more.

Zapier

Share this page:

Softr

Service information

Examples

Generate Javascript Code For A Scroll Button

Download Youtube Thumbnail

Create Wave

Create Shape

Generate App From Prompt

Features

Perfect for

Similar services