BildrBot Template | Messages Page
In this video series we go over the entire BildrBot template. From setup in the studio, to live demos of each action, and exploring the flow of data in the network tab of your console.
Want to understand the entire template start-to-finish?
Explore the entire template walkthrough videos here.
• BildrBot | Custom Bildr ChatBot in 5-minutes
• BildrBot Template | App Home Page & Auth S...
• BildrBot Template | Conversations Pages
• BildrBot Walkthrough AI Actions & Flows
• BildrBot Template | Messages Page
• BildrBot Template | Custom User Prompts
• BildrBot Template | Progressive Web App (P...
What is Bildr?
Bildr is a no-code studio for creating full-stack webapps that scale. Create anything from Airbnb, to Facebook, to internal tools like Marketing Funnels and CRMs. You're limited only by what you can think up.
We replace every part of the full-code development stack with a no-code interface. Full custom HTML, CSS, and JavaScript is just a click away inside the studio at any moment.
Start Building your first app here: https://www.bildr.com/signup
Learn more here: https://www.bildr.com/
Follow us on Twitter: / bildrhq
No Code Speed. Full Code Flexibility.
Timeline of this Video
Introduction to Messages Row Page
00:00 Introduction
Page Load Actions & Setting Data into Each Page
01:01 Message Row Page Load Actions
02:03 Repeating List Messages Element Creates Row Pages
03:40 Collection Relationship Field Type
04:44 Binding Data from Current Record Field Value
Check for Type / Role of Message
04:56 Display Message For User or AI
07:04 Set State -User Message
07:24 Set State - Assistant Message
08:27 Page Level Styles & Inheritance
Google Prettify Library for Code Displays in Messages
11:14 Custom Javascript - Google Prettify Library triggerPrettify()
13:23 Adding Custom Libraries or JavaScript in Page Headers
14:23 Summary of the Custom Code
17:29 Integrate Bildr Functions into Custom JavaScript
20:33 Referencing Bildr Variables & Actions in Code
23:17 Why this works with OpenAI & the Markdown Element
Scroll to the Most Recent Message On Page Load
25:54 Check & Scroll to the Most Recent Message
26:23 _arrayIndex Variable
27:44 Get All Variables & Console Log them
28:25 Console Log a Page's Variables - Live Demo w
30:06 Using Math in Actions with a Variable
31:51 Using the Length() Path to Find the Number of Message Records
32:43 Scroll to our Current Message Page