Jump to content

Firebase code block

Recommended Posts

Yes, this can be done. Please provide the community with more details, including a working link to the page on the site (and password if required to view it), the code you are using and the firebase details.

 

 

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment

https://www.finlabs.design/test2

password - firebase

Here's the code i have in the code block:

 

<h1 style="color: white" id="bigOne"></h1>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
    https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "AIzaSyDTF-oVteDQjlcA5Peao6kIDhITvrSx9LQ",
    authDomain: "finlabsenrollment.firebaseapp.com",
    databaseURL: "https://finlabsenrollment-default-rtdb.firebaseio.com",
    projectId: "finlabsenrollment",
    storageBucket: "finlabsenrollment.appspot.com",
    messagingSenderId: "923882092186",
    appId: "1:923882092186:web:4762b27686474c2146d123",
    measurementId: "G-JVHZ21E5YW"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
  
  var bigOne = document.getElementById('bigOne');
  var dbRef = firebase.database().ref().child('text');
  dbRef.on('value', snap => bigOne.innerText = snap.val());
</script>

Edited by Adamluk
Link to comment
On 1/5/2021 at 3:34 AM, Adamluk said:

https://www.finlabs.design/test2

password - firebase

Here's the code i have in the code block:

 

<h1 style="color: white" id="bigOne"></h1>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
    https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "AIzaSyDTF-oVteDQjlcA5Peao6kIDhITvrSx9LQ",
    authDomain: "finlabsenrollment.firebaseapp.com",
    databaseURL: "https://finlabsenrollment-default-rtdb.firebaseio.com",
    projectId: "finlabsenrollment",
    storageBucket: "finlabsenrollment.appspot.com",
    messagingSenderId: "923882092186",
    appId: "1:923882092186:web:4762b27686474c2146d123",
    measurementId: "G-JVHZ21E5YW"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
  
  var bigOne = document.getElementById('bigOne');
  var dbRef = firebase.database().ref().child('text');
  dbRef.on('value', snap => bigOne.innerText = snap.val());
</script>

Incorrect password. Can you check again?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

The first thing I noticed is an error in the console.

Quote

Uncaught TypeError: firebase.database is not a function at...

And yes indeed firebase.database is not defined. From some reading on the web the solution appears to be to add the following to your code.

<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-database.js"></script>

You want to add it under...

<!-- TODO: Add SDKs for Firebase products that you want to use
    https://firebase.google.com/docs/web/setup#available-libraries -->

After I loaded the database code and ran the startup code again I saw "hello" on the page. Apparently a sign of life.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.