Webstudio Community

Join the Webstudio community

How to Create a Website with User Authentication and Protected Pages

Hi everyone,
I’m looking to create a website where users can:

Register and log in,
Access specific pages only if they are logged in (protected pages).

I’m new to this and would love some guidance on how to achieve this using Webstudio.
Are there any tutorials, examples, or tips you could share to help me get started?

Thank you in advance for your help! 😊

TTommy Lambert

Coda.io implementation

Hi,

Is there any chance to implement coda.io to webstudio?

I can help if needed!

Cheers,

Tommy

1 comment

AArisa

Connecting Vercel-Managed Domain (Apex + www) to Webstudio

Hi! I’m trying to connect a domain purchased through Vercel to my Webstudio project, and I need both the apex domain (ally-studio.tokyo) and the www subdomain (www.ally-studio.tokyo) to point to Webstudio.

Since Vercel doesn’t allow a CNAME for the apex domain, I used an ALIAS record, but Webstudio shows an error saying “custom hostname does not CNAME to this zone.”

To work around this, I created a placeholder project on Vercel to enable their redirect feature. My current setup:
• The apex domain (ally-studio.tokyo) redirects to www.ally-studio.tokyo using Vercel’s redirect feature.
• The www subdomain (www.ally-studio.tokyo) is a CNAME pointing to Webstudio.

This setup is working fine; however, the Vercel console shows “invalid configuration” for the www domain because it’s not pointing to their infrastructure.

What’s the recommended way to properly connect both the apex and www domains to Webstudio when the domain is managed through Vercel? Thank you!

2 comments

DDia Reyez

Viewing Analytics for a Website Built with Webstudio

Hello everyone, I would like to know where can I see the analytics from a website build with webstudio. Is there a nativ option? Or do I have to do an integration with an analytics platform?

2 comments

BBastien

Don't succeed to switch to light mode with John tutorial

Hi everyone, I'm trying to get to grips with Webstudio to make a landing page (I have a SaaS prototype to present). So it's not for making a complete site. I've simply duplicated a template from the https://marketplace-ascend.wstd.io/ marketplace and I'm just trying to change the colour scheme. I'm following this tutorial on John's Youtube channel: https://www.youtube.com/watch?v=EeLoBZvlygI I apply this code in the CSS variables to switch to light mode:

--foreground-primary: var (--gray-10);
--foreground-muted: var (--gray-7);
--background-primary: var(--gray-0);
--background-secondary: var(--gray-3) ;
--background-accent: var (--gray-10);

But it doesn't give the desired effect. I don't really understand how I'm supposed to do it.

13 comments

AAdam Muflihun

simple lottie control for webstudio

Hi Guys, is there a documentation for doing simple lottie control for webstudio? I can't really figure it out reading the documentation from lottie site
such as:

Click to play
click to play on specific segment
hover to play
play on scroll into view
play while scrolling

7 comments

PPushparaj

Multilingual

I want my project to be a multilingual, so I have successfully fetched and bind the data by creating two separate pages(same design) one for English and other one for Arabic, But I don't want it to be separate pages which means by selecting a languages in a dropdown the page contents should change accordingly with respective language when it select by a users, can you help me with this.

1 comment

PPushparaj

Solved

Project Maintenance and Reusing

Hi, I'm currently working on a project and I have following queries regarding project maintenance and reusing.

WebStudio Account and Project Maintenance

How long will my project be maintained in my account after purchasing the WebStudio Pro account?
Will my project remain accessible and maintained if I stop the subscription for my WebStudio Pro account?

Managing Projects with GitHub and WebStudio

I'm currently working on my projects in the cloud with WebStudio Pro. If I want to store my project on GitHub, what are the steps I need to follow?
Once I've stored my project on GitHub, what steps do I need to take to continue development on that project?
How can I import my existing projects from GitHub back into the WebStudio dashboard or editor?

I'm excepting your response, It will be helpful for me to complete a project,

Thanks in advance.

5 comments

bbiolion

Troubleshooting CNAME Records Error When Setting Up Your Own Domain

hey @Oleg Isonen, I keep on getting CNAME records error when I try to automatically or manual setup my own domain, any ideas?

8 comments

PPatrick

A Domain Issue

so I have the website www.scorvv.com, i bought the domain and linked it with webstudio and everything worked well but then one day I noticed that if I actually go to that website, the search bar will show this: https://scorvv-7fft5.wstd.io/ even though I have the domain linked and everything. I dont understand why it is happening. How can I solve that?

5 comments

NNelkins

Solved

Recommended CMS for WebStudio

Do folks have a recommended CMS that they like to work with when using WebStudio?

2 comments

ssportsdali.ai

How to add custom CSS code? I would like to add some hover over interaction in the navbar.

It seems there's no way to paste custom CSS code in Webstudio yet, but I may be wrong. I know there's a way to add advanced styling in the righthand side panel, but it seems I'm limited by the styles included in the list. In this case, I have have added custom classes to some elements, so obviously there's no correlation with the options listed there.

For context, these is the CSS code I would like to paste (I've already set up the classes):

.submenu-image-wto,
.submenu-image-usmca,
.submenu-image-dispute {
display: none;
}

.wto-link:hover ~ .submenu-image-wto {
display: block;
}

.usmca-link:hover ~ .submenu-image-usmca {
display: block;
}

.dispute-link:hover ~ .submenu-image-dispute {
display: block;
}

5 comments

BBonanza

Transferring animated assets from Webflow

Hey all,

On our webflow site, we have a few animated assets that we're wanting to reimplement in webstudio.

Our original animations were built in JSON, but we know that those are incompatible.

For a logo animation that loads upon first page load, for example, how should we implement that? As far as I can tell, an animated gif will just continuously loop. Could we do the animated asset as a webm that plays once?

1 comment

AAdam Muflihun

Improve token naming and command shortcuts

I wish we can add "div" on command K instead of "box"
I wish when adding a token it automatically rename the left panel naming as well. so we don't do double work. naming on the left panel after adding a token.

3 comments

MMrShrek

Unable to put a Webstudio site within an iFrame on Webstudio

I have set it up here for testing - https://iframe-lfs9b.wstd.io/

There is a very specific use case where it would have to be inside an iFrame. I am unable to add an iFrame with the source set to another Webstudio website.

10 comments

RRetromancer

Is there a way to start with Craft in a self-hosted environment?

There doesn't seem to be a way to copy all style variables from the global root. Or am I missing something?

2 comments

OOleg Isonen

Chat, please upvote this bug in chromium to get it prioritized

Chat, please upvote this bug in chromium to get it prioritized. It's affecting us with animations effort 🙏

https://issues.chromium.org/issues/40929569

AAleks Pausak

How can I embed custom HTML within my head tags?

I'm looking for a way to embed custom HTML within the head tags of my pages. I need to be able to set country specific alternatives to my canonical pages.

Example:

<link rel="canonical" href="https://www.website.com/">
<link rel="alternate" href="https://www.website.com/" hreflang="en-US">
<link rel="alternate" href="https://www.website.com/" hreflang="en-GB">
etc...

9 comments

ssylvio

Webflow to Webstudio (Custom Code)

I have a question. I am using a template from osmo.supply. I can copy this to Webflow without any problems. However, when I copy it from Webflow to Webstudio, the effect no longer works. I still have to integrate external scripts and custom Javascript. In Webflow, I copy the JavaScript under Site Settings in the Custom Code ‘Before </body> tag’ section. This is not possible in Webstudio. How can I integrate this here for the entire project and not just for one page?
In Webflow, I work with Slater, because I can structure and edit the code better there. What can you recommend for Webstudio?

4 comments

aashishdhngr

Solved

Webstudio incorrectly rendering lightgallery.js library

I've been using the lightgallery.js library to add a lightbox/gallery to my site. Using the HTML block, I embedded the lightgallery.js style sheet and script. The js and gallery initiates and works, however, the css is a bit wonky. Top toolbar and prev & next buttons are rendered out of place or incorrectly.

After troubleshooting with no luck, I copied the html/css of the webstudio page and paste it into a replit, added the lightgallery script and style sheet, and it worked there!

Webstudio builder view link -
https://p-c4b0aacc-ba6e-4cbb-998d-5dde2361f039.apps.webstudio.is/?authToken=71b4fac9-f738-4203-9f92-b37620395464&mode=preview

Replit code -
https://replit.com/@ashish102/GlumTerribleStructure

21 comments

ddankツ

Hippa compliance and data security in supabase.

HIPPA compliance only refers to healthcare facilities and their patients/ employees. If you’re referring to data security that’s handled in your database which the system uses Supabase by default which is fairly secure if configured correctly.

oo_be_one

Facebook group needs some love

Facebook group needs some love. Is it the official one?

Lot of WP plugins have their FB community active and looks like it helps to create leads and other.

Actually the FB group of WebStudio is really poor, with low quality content basically about « how’s life » and no interactivity at all. Is it what is expected?

7 comments

bbiolion

Unsolicited Bulk Communications

hey guys, what does it mean by unsolicited bulk communications?

6 comments

ppixelbendr

Photography portfolio

Hi, I'm trying to create portfolio website for my photograpy. All my photos are already organized in Google Drive, and I'd like to find a way to automatically generate Album pages based on what photos are in folders in Google Drive and display them as a Slider or slide show... Is this possible?

2 comments

TThe Panwadi Ji

Variable Mode like Webflow

I know this might be seem like praising the competition but check this out: https://webflow.com/updates/variable-modes
Do you think we can have something like this for Tokens or Root variables?

5 comments