[{"data":1,"prerenderedAt":462},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"tv-mastering-agencyos":121,"tv-mastering-agencyos-seasons":131,"tv-mastering-agencyos-episodes":141,"sales-reps":210},{"items":4},[5,29,49,69],{"id":6,"title":7,"url":8,"page":8,"children":9},"522e608a-77b0-4333-820d-d4f44be2ade1","Solutions",null,[10,15,20,25],{"id":11,"title":12,"url":8,"page":13},"fcafe85a-a798-4710-9e7a-776fe413aae5","Headless CMS",{"permalink":14},"/solutions/headless-cms",{"id":16,"title":17,"url":8,"page":18},"79972923-93cf-4777-9e32-5c9b0315fc10","Backend-as-a-Service",{"permalink":19},"/solutions/backend-as-a-service",{"id":21,"title":22,"url":8,"page":23},"0fa8d0c1-7b64-4f6f-939d-d7fdb99fc407","Product Information",{"permalink":24},"/solutions/product-information-management",{"id":26,"title":27,"url":28,"page":8},"63946d54-6052-4780-8ff4-91f5a9931dcc","100+ Things to Build","https://directus.io/blog/100-tools-apps-and-platforms-you-can-build-with-directus",{"id":30,"title":31,"url":8,"page":8,"children":32},"8ab4f9b1-f3e2-44d6-919b-011d91fe072f","Resources",[33,37,41,45],{"id":34,"title":35,"url":36,"page":8},"f951fb84-8777-4b84-9e91-996fe9d25483","Documentation","https://docs.directus.io",{"id":38,"title":39,"url":40,"page":8},"366febc7-a538-4c08-a326-e6204957f1e3","Guides","https://docs.directus.io/guides/",{"id":42,"title":43,"url":44,"page":8},"aeb9128e-1c5f-417f-863c-2449416433cd","Community","https://directus.chat",{"id":46,"title":47,"url":48,"page":8},"da1c2ed8-0a77-49b0-a903-49c56cb07de5","Release Notes","https://github.com/directus/directus/releases",{"id":50,"title":51,"url":8,"page":8,"children":52},"d61fae8c-7502-494a-822f-19ecff3d0256","Support",[53,57,61,65],{"id":54,"title":55,"url":56,"page":8},"8c43c781-7ebd-475f-a931-747e293c0a88","Issue Tracker","https://github.com/directus/directus/issues",{"id":58,"title":59,"url":60,"page":8},"d77bb78e-cf7b-4e01-932a-514414ba49d3","Feature Requests","https://github.com/directus/directus/discussions?discussions_q=is:open+sort:top",{"id":62,"title":63,"url":64,"page":8},"4346be2b-2c53-476e-b53b-becacec626a6","Community Chat","https://discord.com/channels/725371605378924594/741317677397704757",{"id":66,"title":67,"url":68,"page":8},"26c115d2-49f7-4edc-935e-d37d427fb89d","Cloud Dashboard","https://directus.cloud",{"id":70,"title":71,"url":8,"page":8,"children":72},"49141403-4f20-44ac-8453-25ace1265812","Organization",[73,78,84,88],{"id":74,"title":75,"url":76,"page":77},"1f36ea92-8a5e-47c8-914c-9822a8b9538a","About","/about",{"permalink":76},{"id":79,"title":80,"url":81,"page":82},"b84bf525-5471-4b14-a93c-225f6c386005","Careers","#",{"permalink":83},"/careers",{"id":85,"title":86,"url":87,"page":8},"86aabc3a-433d-434b-9efa-ad1d34be0a34","Brand Assets","https://drive.google.com/drive/folders/1lBOTba4RaA5ikqOn8Ewo4RYzD0XcymG9?usp=sharing",{"id":89,"title":90,"url":8,"page":91},"8d2fa1e3-198e-4405-81e1-2ceb858bc237","Contact",{"permalink":92},"/contact",{"items":94},[95,101,107,113],{"id":96,"title":97,"url":8,"page":98,"children":100},"8a1b7bfa-429d-4ffc-a650-2a5fdcf356da","Cloud Policies",{"permalink":99},"/cloud-policies",[],{"id":102,"title":103,"url":81,"page":104,"children":106},"bea848ef-828f-4306-8017-6b00ec5d4a0c","License",{"permalink":105},"/bsl",[],{"id":108,"title":109,"url":81,"page":110,"children":112},"4e914f47-4bee-42b7-b445-3119ee4196ef","Terms",{"permalink":111},"/terms",[],{"id":114,"title":115,"url":81,"page":116,"children":118},"ea69eda6-d317-4981-8421-fcabb1826bfd","Privacy",{"permalink":117},"/privacy",[],{"description":120},"\u003Cp>A composable backend to build your Headless CMS, BaaS, and more. \u003C/p>",{"id":122,"title":123,"logo":124,"cover":125,"tile":126,"announcement_text":8,"description":127,"slug":128,"one_liner":129,"card_text":8,"status":130,"sort":8},"3e7a0899-2219-4b9d-98fd-ee1a1b73a8be","Mastering AgencyOS","3d4eb724-53c1-4b1f-acd6-edb2216d37dd","c805ee1a-ce13-447e-95ed-d093c3a97d0e","e8f99ff6-f500-4a05-9238-b44f2b607932","Be expertly guided through setting up and maximizing the benefits of AgencyOS, Directus' comprehensive toolkit for fast-moving teams. Get step-by-step instructions to transform your digital agency's operations with a custom-built operating system, including CRM tools, client portals, and a customizable agency website.\n","mastering-agencyos","A guided set up of AgencyOS - our comprehensive toolkit for fast-moving teams.","published",[132],{"id":133,"number":134,"show":122,"year":135,"episodes":136},"237e17bc-6e41-460f-8fe7-1d21fd865801",1,"2023",[137,138,139,140],"6ed0cf93-0868-497e-a21a-97df216f9fa7","1155c102-42e1-4cb8-8f35-3b2d2dbb0376","cf8b1be3-2bed-45e0-b158-8dacd5afa1f7","4298bc72-ad12-4c76-b57d-506e3d9a0c45",[142,161,178,194],{"id":137,"slug":143,"vimeo_id":144,"description":145,"tile":146,"length":147,"resources":8,"people":148,"episode_number":134,"published":152,"title":153,"video_transcript_html":154,"video_transcript_text":155,"content":8,"seo":8,"status":130,"episode_people":156,"recommendations":158,"season":159},"getting-started-with-agencyos","894493339","In this video, we'll cover how to quickly spin up and deploy an instance of AgencyOS.","ef2db2f0-903e-49cb-ad7a-2d6b9a52b6e3",7,[149],{"name":150,"url":151},"Bryant Gillespie","https://directus.io/team/bryant-gillespie","2023-10-24","Getting Started with AgencyOS","\u003Cp>Speaker 0: Hi there. Bryant here for Directus. Welcome to Agency OS. I'll be your guide along the way. Let's dive right in and get you spun up on the platform.\u003C/p>\u003Cp>Directus Cloud dashboard using GitHub or your email address and then we'll create a new project. So I just give this a project name, my agency operating system, URL, which is gonna be where we access the project, and then we will spin this up. Any new accounts get a 14 day free trial, so you can give it a test run. Why Directus Cloud? Well, for starters, you do not have to mess with any DevOps.\u003C/p>\u003Cp>You don't have to worry about deploying your platform. You spin up the cloud instance and it is ready to go, ready to scale right out of the box. Your instance should spin up in under 2 minutes and then you'll receive login credentials via your email. So just pull up that email, hit the URL, and log in to your Project. So, when you log in your project will be blank.\u003C/p>\u003Cp>But don't fear, we're gonna fix that. The first thing that we're gonna do is go to your admin user and scroll down until you see the token field. So we're gonna generate a static token to use with our template CLI command. Please don't forget to save the user after you generate the token because it will not automatically save the token. The next thing we're gonna do is pull up the terminal and we're gonna run a command together.\u003C/p>\u003Cp>Npxdirectus template cli Apply. This will ask you to install a package. You just need to confirm to install this, and then you will receive a prompt. So you can choose to apply our official templates, which is what we're gonna do here. We're gonna choose the agency OS template, and then we get asked for our directus URL.\u003C/p>\u003Cp>So this is your cloud instance that you just spun up. In my case it's bryants agency.directus dot app. And then the next thing will be that token. And you copied it and pasted it somewhere so you've got it. You just knock that in there and then the template CLI will start doing its thing.\u003C/p>\u003Cp>Now, this process does take several minutes because we are populating everything into your instance. All the collections, all the tables, all of the individual sample data and assets. Now once the template is done, you can just do a refresh on your Directus instance and boom. Now you will have access to the Agency OS backend. So if we just browse through here, you can see all the different collections of content.\u003C/p>\u003Cp>On the left, we've got, your website. You've got different projects. You've got all of your organizations and contacts. We'll dive into that into other videos. But for now, let's show you how to spin up the front end of Agency OS, the website and the portal.\u003C/p>\u003Cp>So we're going to go back to the GitHub repository. And you can see the installation instructions if you want to spin this up locally first. But for the purpose of this video, we want to deploy something now. We are going to use the one click button for deploying to Vercel. So you will link your GitHub account and create a new repository.\u003C/p>\u003Cp>We'll just call it bryant's agency OS. And then it will prompt you for the environment variables. So these are the secret values that are used to communicate with Directus. The Directus URL is just going to be your cloud instance that we spun up. The server token can be that admin token that you just spun up, or you can create another user to use as the server token.\u003C/p>\u003Cp>And then we have things like public site URL, Stripe's secret key, and publishable key if you want to use billing. We'll just leave those blank for now or enter NA so we can spin this project up. Vercel will go through and build the project and within, several minutes we will have a live front end that works perfectly with the back end setup by Directus. So we check the deployment summary. Everything looks good.\u003C/p>\u003Cp>Let's go to the dashboard. So we'll click Continue to Dashboard. And I'm gonna log in to my own personal account, which is where this particular project was spun up. And then we'll just visit the front end. So, let's take a look.\u003C/p>\u003Cp>Boom. There it is. There is our website. Looks great. Now, how do we get started developing on this?\u003C/p>\u003Cp>So we'll go back to GitHub, we'll look for our repositories. And you can see we've got Bryant's Agency OS here. This is that repository that, Vercel created during that process. I'll just go to the code section and you can use the GitHub CLI or the regular terminal commands to fire this up. We're just gonna copy and paste that command inside our local directory.\u003C/p>\u003Cp>So GitHub is gonna clone that. We will navigate to that directory. So, OCD Bryant's Agency OS. And then I'm going to do npm I or pnpmi to install all the dependencies for the project. So I'm gonna get an error here because I haven't set up our environment variables.\u003C/p>\u003Cp>So let's just open this up in Versus Code and start developing. I'm gonna go and the first thing you should do is duplicate your env file, the example file, and make sure that you set the Directus URL, the Directus server token, and your Stripe keys if you want to test the Stripe Billing. Make sure you do not commit any of these keys to the repo, and the git ignore file should already take care of that for you. But once you have this set up, we will just p npm dev inside the terminal and Nuxt will spin up for us on the front end. Now while that initial dev server build is happening, I am just gonna do some rearranging on my Windows so I can look at our code and the website side by side.\u003C/p>\u003Cp>Alright, so there you have it. You've got the back end of Agency OS setup on Direct cloud. You've got your front end served up on Vercel and ready to develop locally. Stay tuned for the next videos in this series where we dive deeper into some of the advanced functionality available within AgentC OS.\u003C/p>","Hi there. Bryant here for Directus. Welcome to Agency OS. I'll be your guide along the way. Let's dive right in and get you spun up on the platform. Directus Cloud dashboard using GitHub or your email address and then we'll create a new project. So I just give this a project name, my agency operating system, URL, which is gonna be where we access the project, and then we will spin this up. Any new accounts get a 14 day free trial, so you can give it a test run. Why Directus Cloud? Well, for starters, you do not have to mess with any DevOps. You don't have to worry about deploying your platform. You spin up the cloud instance and it is ready to go, ready to scale right out of the box. Your instance should spin up in under 2 minutes and then you'll receive login credentials via your email. So just pull up that email, hit the URL, and log in to your Project. So, when you log in your project will be blank. But don't fear, we're gonna fix that. The first thing that we're gonna do is go to your admin user and scroll down until you see the token field. So we're gonna generate a static token to use with our template CLI command. Please don't forget to save the user after you generate the token because it will not automatically save the token. The next thing we're gonna do is pull up the terminal and we're gonna run a command together. Npxdirectus template cli Apply. This will ask you to install a package. You just need to confirm to install this, and then you will receive a prompt. So you can choose to apply our official templates, which is what we're gonna do here. We're gonna choose the agency OS template, and then we get asked for our directus URL. So this is your cloud instance that you just spun up. In my case it's bryants agency.directus dot app. And then the next thing will be that token. And you copied it and pasted it somewhere so you've got it. You just knock that in there and then the template CLI will start doing its thing. Now, this process does take several minutes because we are populating everything into your instance. All the collections, all the tables, all of the individual sample data and assets. Now once the template is done, you can just do a refresh on your Directus instance and boom. Now you will have access to the Agency OS backend. So if we just browse through here, you can see all the different collections of content. On the left, we've got, your website. You've got different projects. You've got all of your organizations and contacts. We'll dive into that into other videos. But for now, let's show you how to spin up the front end of Agency OS, the website and the portal. So we're going to go back to the GitHub repository. And you can see the installation instructions if you want to spin this up locally first. But for the purpose of this video, we want to deploy something now. We are going to use the one click button for deploying to Vercel. So you will link your GitHub account and create a new repository. We'll just call it bryant's agency OS. And then it will prompt you for the environment variables. So these are the secret values that are used to communicate with Directus. The Directus URL is just going to be your cloud instance that we spun up. The server token can be that admin token that you just spun up, or you can create another user to use as the server token. And then we have things like public site URL, Stripe's secret key, and publishable key if you want to use billing. We'll just leave those blank for now or enter NA so we can spin this project up. Vercel will go through and build the project and within, several minutes we will have a live front end that works perfectly with the back end setup by Directus. So we check the deployment summary. Everything looks good. Let's go to the dashboard. So we'll click Continue to Dashboard. And I'm gonna log in to my own personal account, which is where this particular project was spun up. And then we'll just visit the front end. So, let's take a look. Boom. There it is. There is our website. Looks great. Now, how do we get started developing on this? So we'll go back to GitHub, we'll look for our repositories. And you can see we've got Bryant's Agency OS here. This is that repository that, Vercel created during that process. I'll just go to the code section and you can use the GitHub CLI or the regular terminal commands to fire this up. We're just gonna copy and paste that command inside our local directory. So GitHub is gonna clone that. We will navigate to that directory. So, OCD Bryant's Agency OS. And then I'm going to do npm I or pnpmi to install all the dependencies for the project. So I'm gonna get an error here because I haven't set up our environment variables. So let's just open this up in Versus Code and start developing. I'm gonna go and the first thing you should do is duplicate your env file, the example file, and make sure that you set the Directus URL, the Directus server token, and your Stripe keys if you want to test the Stripe Billing. Make sure you do not commit any of these keys to the repo, and the git ignore file should already take care of that for you. But once you have this set up, we will just p npm dev inside the terminal and Nuxt will spin up for us on the front end. Now while that initial dev server build is happening, I am just gonna do some rearranging on my Windows so I can look at our code and the website side by side. Alright, so there you have it. You've got the back end of Agency OS setup on Direct cloud. You've got your front end served up on Vercel and ready to develop locally. Stay tuned for the next videos in this series where we dive deeper into some of the advanced functionality available within AgentC OS.",[157],"61cf3fd6-a6e1-45ad-a501-9cd4e27eab4d",[],{"id":133,"number":134,"show":122,"year":135,"episodes":160},[137,138,139,140],{"id":138,"slug":162,"vimeo_id":163,"description":164,"tile":165,"length":166,"resources":8,"people":167,"episode_number":169,"published":152,"title":170,"video_transcript_html":171,"video_transcript_text":172,"content":8,"seo":8,"status":130,"episode_people":173,"recommendations":175,"season":176},"project-templates-agencyos","894494638","In this video, you'll learn more about project templates and how they work within AgencyOS.","2eec4c80-4a3e-4135-a3dc-8ffef12051ba",4,[168],{"name":150,"url":151},2,"Project Templates In AgencyOS","\u003Cp>Speaker 0: Hi guys. Brian here for Directus. Welcome back to the Agency OS series. In this video, we're going to be talking about project templates. So, imagine that you've been working this deal for this cool organization called Directus and they are ready to move into an actual project.\u003C/p>\u003Cp>This is where things get a little bit fuzzy before Agency OS. You may have been quoting inside your CRM or just via email and now you're gonna action this project inside Asana or Basecamp or some other tool. But now, with AgentC OS, it's combined into a single platform. Project Templates are gonna help you operationalize your actual Projects. So, we'll click on Create a Project on the right information sidebar.\u003C/p>\u003Cp>We'll give this project a quick name, New Website Project, select an organization, Directus in this case, select our primary contact, and then we're gonna pick the project template. So these are already preset in Agency OS for you. We'll show you how to customize them in just a few. Then we'll pick a start date for the project. We'll choose a completion date or a target completion date because projects, especially web projects, don't always go according to plan.\u003C/p>\u003Cp>But that's what we're trying to fix. So now that the project is created, let's just pop in and take a look. One of the nice things about AJC OS and Directus is how flexible it is. So, we'll open up this new website project and I can see I've got all my information prefilled. But the beauty of this, as I scroll down, I've got all of my tasks, my entire project already planned out.\u003C/p>\u003Cp>That's huge. So we can actually operationalize this. And one of the core features here is the ability to collaborate with clients on Tasks. So you can see this task is marked visible to the client. And if I were to open up the AgencyOS client portal, that task will show up.\u003C/p>\u003Cp>So we'll just log in to the portal and I could see in the client's task list is that kickoff call, where we would have that detailed information on what that looks like. So that's how project templates work. How do we actually configure these? If you go to the settings tab within the left hand sidebar, you will find your project templates. Now we've gone through and spec'd out several of these project templates for you already.\u003C/p>\u003Cp>But if we inspect the website design and development one, let's just take a look. You can see the preset task where you can determine the type of task. You can add names, descriptions. You can assign team members. You can make this visible to the client.\u003C/p>\u003Cp>You can even set dates relevant to the start of the project or when the project is due to start and end this specific task. So you can really systemize each one of your projects and hopefully gain more efficiency than creating this project plan one off every single time. So we've covered how to actually create these project templates. But let's take a peek behind the scenes into the actual flows that create this project. So there is a Create Project Flow inside your settings and it is triggered manually whenever you click the button.\u003C/p>\u003Cp>It will read the task template or the project template that you set up. It will run some JavaScript, nothing fancy, to format all the tasks within that project. And then create a new project and all the individual tasks for everyone on your team automatically for you just with a couple of clicks. That's it for project templates. Make sure you stay tuned for the other videos in this series for more information on Agent COS.\u003C/p>\u003Cp>See you.\u003C/p>","Hi guys. Brian here for Directus. Welcome back to the Agency OS series. In this video, we're going to be talking about project templates. So, imagine that you've been working this deal for this cool organization called Directus and they are ready to move into an actual project. This is where things get a little bit fuzzy before Agency OS. You may have been quoting inside your CRM or just via email and now you're gonna action this project inside Asana or Basecamp or some other tool. But now, with AgentC OS, it's combined into a single platform. Project Templates are gonna help you operationalize your actual Projects. So, we'll click on Create a Project on the right information sidebar. We'll give this project a quick name, New Website Project, select an organization, Directus in this case, select our primary contact, and then we're gonna pick the project template. So these are already preset in Agency OS for you. We'll show you how to customize them in just a few. Then we'll pick a start date for the project. We'll choose a completion date or a target completion date because projects, especially web projects, don't always go according to plan. But that's what we're trying to fix. So now that the project is created, let's just pop in and take a look. One of the nice things about AJC OS and Directus is how flexible it is. So, we'll open up this new website project and I can see I've got all my information prefilled. But the beauty of this, as I scroll down, I've got all of my tasks, my entire project already planned out. That's huge. So we can actually operationalize this. And one of the core features here is the ability to collaborate with clients on Tasks. So you can see this task is marked visible to the client. And if I were to open up the AgencyOS client portal, that task will show up. So we'll just log in to the portal and I could see in the client's task list is that kickoff call, where we would have that detailed information on what that looks like. So that's how project templates work. How do we actually configure these? If you go to the settings tab within the left hand sidebar, you will find your project templates. Now we've gone through and spec'd out several of these project templates for you already. But if we inspect the website design and development one, let's just take a look. You can see the preset task where you can determine the type of task. You can add names, descriptions. You can assign team members. You can make this visible to the client. You can even set dates relevant to the start of the project or when the project is due to start and end this specific task. So you can really systemize each one of your projects and hopefully gain more efficiency than creating this project plan one off every single time. So we've covered how to actually create these project templates. But let's take a peek behind the scenes into the actual flows that create this project. So there is a Create Project Flow inside your settings and it is triggered manually whenever you click the button. It will read the task template or the project template that you set up. It will run some JavaScript, nothing fancy, to format all the tasks within that project. And then create a new project and all the individual tasks for everyone on your team automatically for you just with a couple of clicks. That's it for project templates. Make sure you stay tuned for the other videos in this series for more information on Agent COS. See you.",[174],"2b4b2ca4-08f4-4b12-bd3c-0d1331f3bea9",[],{"id":133,"number":134,"show":122,"year":135,"episodes":177},[137,138,139,140],{"id":139,"slug":179,"vimeo_id":180,"description":181,"tile":182,"length":147,"resources":8,"people":183,"episode_number":185,"published":152,"title":186,"video_transcript_html":187,"video_transcript_text":188,"content":8,"seo":8,"status":130,"episode_people":189,"recommendations":191,"season":192},"page-builder-agencyos","894493860","In this video, you'll learn how to create dynamic pages that are on brand and look great with the page builder inside AgencyOS.","a882540d-611e-428a-9379-20cbc1d1a986",[184],{"name":150,"url":151},3,"Page Builder In AgencyOS","\u003Cp>Speaker 0: Hi there. Bryant here for Directus. Welcome back to the next video in our Agency OS series where we're talking about the Page Builder. When you make the move to Headless, one of the things that your team may miss most is the Page Builder functionality from WordPress or other visual CMS's where you can move things around the screen and control margins and paddings and all of that. While I would argue that's a great thing because I want my content team focused on building the best content possible, not worrying about design or how things look on the page, That can be a blocker.\u003C/p>\u003Cp>But fear not, Agency OS and Directus make this easy to build dynamic pages and still maintain a consistent design system. Let's take a look at how it works and how to build new pages. So, on the left hand you can see we've got our front end And then on the right hand side, we'll just pull up the home page. You'll notice that the home page is made up of different content blocks. I can move these blocks around on the page and save and refresh our front end to see those changes being made.\u003C/p>\u003Cp>Great. I can move stuff around on the screen. But how about adding new blocks? Very simple. I'll just go down to the create new option and you've got all the blocks that are available that you've added to your Page Builder collection inside Agent c OS.\u003C/p>\u003Cp>So we will add a title for this Rich Text block, give it a headline, add some content and save it and we can see the changes happening on the front end. One of the other great features is that you can even reuse existing blocks from other pages so that you don't have to recreate the same stuff on each individual page over and over again. So I just select a logo cloud, refresh, and boom, there it is. Sometimes you may want to hide a block without removing it from the page. It's very easy to do within Aegis CoS.\u003C/p>\u003Cp>I just pull up the block that I wanna hide, check the box, refresh on the front end, and now that block is hidden from view ready to be activated whenever I need it. With that out of the way, let's take a look at how we add blocks. We're gonna navigate to the data model within our settings. And if we just search for block, we could see that all of these blocks are just different collections within the Directus project. Now adding new ones is simple.\u003C/p>\u003Cp>We can go into our Page Builder under the Blocks section. And this is where we control all of the blocks that are available for our content editors to add and reuse on different pages. Now for adding a new block, what we're gonna do is go back and add a new collection for this block. We'll call it block new. So we'll save this block, and then we'll add some fields to control our content.\u003C/p>\u003Cp>So let's add a WYSIWYG editor. We'll just give it a key of content. That's how we're going to access it on the front end. And let's add an image as well. All right, so we've created our collection for our block data.\u003C/p>\u003Cp>Let's go back into our pages to the Blocks field and add that block to the related collections so that we can add it when we're building a Page. So I'll just check the box for it, save this, and go back to our front end, to the Home page. And now I will be able to use that block within our page content. So we just add that, we will enter some content, select an image, and add it to the page. Now that we've added it to the page, we should be able to see this on the front end.\u003C/p>\u003Cp>So we'll just drag and drop this up to the top so that it displays in the first position on the page. But when I refresh, lo and behold, I don't see that. That's because our front end isn't aware of this block. So let's open up Versus Code and actually create this block so we can render that content on the front end. I'll just, do some window management here and we'll dive into the project.\u003C/p>\u003Cp>So we're looking for the components blocks directory. And the quickest way to do this is just cloning one of the existing blocks within the project. We've got a WYSIWYG component here, so I'm just gonna duplicate rich text dot view. Now, I'm just going to do some simple clean up on our types once we've created the file because this is no longer a RichText component, it is our Block New component. Alright, so now we'll just swap out the definition for our props with the new interface and we'll remove the default props because we don't have any properties like alignment that we want to control for this block.\u003C/p>\u003Cp>Alright, so now we'll just adjust the template for this. We've got our typography pros for our content. This will render any HTML content in a nice format. And then we are also going to just use the Nuxt Image component, because it has some built in helpers for handling images from Directus. So now we've got our template.\u003C/p>\u003Cp>When I refresh the page, I don't see this block being displayed. And that is because we need to make our Page Builder component aware of this particular block. So the page builder component loops through all of the different types of blocks and renders them on the page. We'll just add a new component within the component map using the Resolve component but we don't have any images or content displaying. This is a permissions problem because we created that new collection within Directus but we forgot to set public permissions for it.\u003C/p>\u003Cp>So any collections by default have 0 permissions because we want to keep your data secure. So we'll go into the roles and permissions for the public role and we'll look for that block new collection and give read access so anyone in the general public can see our content. Great. We refresh and we're still not there yet. So we have to actually fetch that data from the API, which is happening inside the permalink page within Nuxt.\u003C/p>\u003Cp>So we'll go into our fields collection, We'll make sure that we are fetching block new. And much like GraphQL, we want to fetch only the content that we needed so our site stays fast. So we'll do id, content, and image as the keys and then we reload to see that content being rendered on our front end. Now, and that's it. So you are now an expert in all things Page Builder.\u003C/p>\u003Cp>Go forth and build your own pages, add your blocks, customize this as you see fit. Stay tuned for more videos in this series where we'll deep dive into other features of Agency OS.\u003C/p>","Hi there. Bryant here for Directus. Welcome back to the next video in our Agency OS series where we're talking about the Page Builder. When you make the move to Headless, one of the things that your team may miss most is the Page Builder functionality from WordPress or other visual CMS's where you can move things around the screen and control margins and paddings and all of that. While I would argue that's a great thing because I want my content team focused on building the best content possible, not worrying about design or how things look on the page, That can be a blocker. But fear not, Agency OS and Directus make this easy to build dynamic pages and still maintain a consistent design system. Let's take a look at how it works and how to build new pages. So, on the left hand you can see we've got our front end And then on the right hand side, we'll just pull up the home page. You'll notice that the home page is made up of different content blocks. I can move these blocks around on the page and save and refresh our front end to see those changes being made. Great. I can move stuff around on the screen. But how about adding new blocks? Very simple. I'll just go down to the create new option and you've got all the blocks that are available that you've added to your Page Builder collection inside Agent c OS. So we will add a title for this Rich Text block, give it a headline, add some content and save it and we can see the changes happening on the front end. One of the other great features is that you can even reuse existing blocks from other pages so that you don't have to recreate the same stuff on each individual page over and over again. So I just select a logo cloud, refresh, and boom, there it is. Sometimes you may want to hide a block without removing it from the page. It's very easy to do within Aegis CoS. I just pull up the block that I wanna hide, check the box, refresh on the front end, and now that block is hidden from view ready to be activated whenever I need it. With that out of the way, let's take a look at how we add blocks. We're gonna navigate to the data model within our settings. And if we just search for block, we could see that all of these blocks are just different collections within the Directus project. Now adding new ones is simple. We can go into our Page Builder under the Blocks section. And this is where we control all of the blocks that are available for our content editors to add and reuse on different pages. Now for adding a new block, what we're gonna do is go back and add a new collection for this block. We'll call it block new. So we'll save this block, and then we'll add some fields to control our content. So let's add a WYSIWYG editor. We'll just give it a key of content. That's how we're going to access it on the front end. And let's add an image as well. All right, so we've created our collection for our block data. Let's go back into our pages to the Blocks field and add that block to the related collections so that we can add it when we're building a Page. So I'll just check the box for it, save this, and go back to our front end, to the Home page. And now I will be able to use that block within our page content. So we just add that, we will enter some content, select an image, and add it to the page. Now that we've added it to the page, we should be able to see this on the front end. So we'll just drag and drop this up to the top so that it displays in the first position on the page. But when I refresh, lo and behold, I don't see that. That's because our front end isn't aware of this block. So let's open up Versus Code and actually create this block so we can render that content on the front end. I'll just, do some window management here and we'll dive into the project. So we're looking for the components blocks directory. And the quickest way to do this is just cloning one of the existing blocks within the project. We've got a WYSIWYG component here, so I'm just gonna duplicate rich text dot view. Now, I'm just going to do some simple clean up on our types once we've created the file because this is no longer a RichText component, it is our Block New component. Alright, so now we'll just swap out the definition for our props with the new interface and we'll remove the default props because we don't have any properties like alignment that we want to control for this block. Alright, so now we'll just adjust the template for this. We've got our typography pros for our content. This will render any HTML content in a nice format. And then we are also going to just use the Nuxt Image component, because it has some built in helpers for handling images from Directus. So now we've got our template. When I refresh the page, I don't see this block being displayed. And that is because we need to make our Page Builder component aware of this particular block. So the page builder component loops through all of the different types of blocks and renders them on the page. We'll just add a new component within the component map using the Resolve component but we don't have any images or content displaying. This is a permissions problem because we created that new collection within Directus but we forgot to set public permissions for it. So any collections by default have 0 permissions because we want to keep your data secure. So we'll go into the roles and permissions for the public role and we'll look for that block new collection and give read access so anyone in the general public can see our content. Great. We refresh and we're still not there yet. So we have to actually fetch that data from the API, which is happening inside the permalink page within Nuxt. So we'll go into our fields collection, We'll make sure that we are fetching block new. And much like GraphQL, we want to fetch only the content that we needed so our site stays fast. So we'll do id, content, and image as the keys and then we reload to see that content being rendered on our front end. Now, and that's it. So you are now an expert in all things Page Builder. Go forth and build your own pages, add your blocks, customize this as you see fit. Stay tuned for more videos in this series where we'll deep dive into other features of Agency OS.",[190],"89e36749-ee99-4ca7-baef-d3b7500a5e13",[],{"id":133,"number":134,"show":122,"year":135,"episodes":193},[137,138,139,140],{"id":140,"slug":195,"vimeo_id":196,"description":197,"tile":198,"length":199,"resources":8,"people":200,"episode_number":166,"published":152,"title":202,"video_transcript_html":203,"video_transcript_text":204,"content":8,"seo":8,"status":130,"episode_people":205,"recommendations":207,"season":208},"stripe-agencyos","894494318","In this video you'll learn how your clients can quickly and easily pay within their portal. ","a28d2560-5990-4cfb-8441-b9942b828594",6,[201],{"name":150,"url":151},"Client Payments with Stripe and AgencyOS","\u003Cp>Speaker 0: Hi. Brian here for Directus. Welcome back to the next video in our Agency OS series where we're talking about the Stripe checkout or the ability to accept payments from your clients within the portal. This is a very important piece of functionality. You've got to be able to get paid on time to run a successful agency.\u003C/p>\u003Cp>So let's dive in. Alright. So we're logged into the client portal and we'll just bring up one of the invoices and you can see there's a link to pay this invoice. When we click it, nothing happens because we have the wrong Stripe API keys or we haven't set those up yet. So what we're gonna do is go into our Stripe account and go to the Developers tab and look for API Keys.\u003C/p>\u003Cp>There are several different keys that you're gonna copy here. The publishable key, which is safe to be used on the front end, and then the secret key, which is only exposed on the server. So we are going to go into our env file and paste these keys. And I'm certainly going to have to roll these keys after this video so don't try to steal my keys. The last piece of the puzzle here is our Stripe webhook secret.\u003C/p>\u003Cp>Whenever a checkout event occurs, we need to be able to catch or receive those webhooks that Stripe sends out so we can update Directus with those. So I will just follow the instructions here to test in a local environment. We'll make sure that I am logged into the Stripe CLI and then we will forward all Stripe webhook events to localhost3000/api/stripe slash webhooks. So this is the API route within the Nuxt project where we are listening for those webhooks. And once I log in, I listen to that event, it will give me my webhook secret, which we use to verify that Stripe is sending those webhooks.\u003C/p>\u003Cp>Now, once we test that out, we should be able to pay invoices. But, oops, we need to restart the dev server so those changes can take effect. Alright, so let's wait for our dev server to restart. And once it's back, then we can test out this functionality. So we just hit Pay Invoice.\u003C/p>\u003Cp>It will throw a Stripe checkout session where the user can pay and complete via card or whatever payments you've got set up in your Stripe account. So I'm just going to enter some test card information and try this payment out to verify this will work. Alright. So once the checkout is complete, Stripe should send us back to the page from whence we came and we can see that this invoice is now marked as paid because a payment was applied. So if I open up our AgencyOS back end inside Directus, we should be able to find that payment within the Billing section.\u003C/p>\u003Cp>And just like the song, whoomp, there it is. Now, one of the other pieces of functionality that's built into the platform is the Stripe customer portal. They have a great UI, this is set up on the billing page where your customer or your client can go in and update their payment methods within the Stripe customer portal. So that's it for the client functionality within the portal. Let's take a look inside our codebase to see how this operates behind the scenes.\u003C/p>\u003Cp>Behind the curtain, if you will. So we're going to open up Versus Code and look for our layers section. Within layers we will look for our portal and then you can see under the server API routes we have a Stripe folder where we have a create checkout session. Post. Ts.\u003C/p>\u003Cp>So, this will accept an invoice ID as a, inside the body of this and then this will create a checkout session and return it to the Stripe JavaScript client to, redirect us to checkout. Then we have a composable which uses the Stripe JavaScript client to actually redirect to checkout. So we've got use Stripe which just basically loads Stripe and then we have a handle checkout function and a get portal link function to send the clients to that portal link. You can also see the API route for creating that portal link. And last but not least, we have our webhooks route that receives those webhooks from Stripe whenever these checkout events occur.\u003C/p>\u003Cp>This will verify that data coming from Stripe and create those payments within our Agency OS instance. So when you get ready to go to production with this, make sure that you go in and actually create the Stripe endpoints for those webhooks. So whatever your final deployment URL is, you'll go in and set that up inside Stripe using, the API Stripe Webhooks and then you will pick the checkout events just to make sure that all those events get sent to that URL. And make sure that you toggle off Test mode and grab the live API keys on your Production Server. So that's it for this video on how to connect Stripe with AgentC OS.\u003C/p>\u003Cp>Stay tuned for other videos in the series.\u003C/p>","Hi. Brian here for Directus. Welcome back to the next video in our Agency OS series where we're talking about the Stripe checkout or the ability to accept payments from your clients within the portal. This is a very important piece of functionality. You've got to be able to get paid on time to run a successful agency. So let's dive in. Alright. So we're logged into the client portal and we'll just bring up one of the invoices and you can see there's a link to pay this invoice. When we click it, nothing happens because we have the wrong Stripe API keys or we haven't set those up yet. So what we're gonna do is go into our Stripe account and go to the Developers tab and look for API Keys. There are several different keys that you're gonna copy here. The publishable key, which is safe to be used on the front end, and then the secret key, which is only exposed on the server. So we are going to go into our env file and paste these keys. And I'm certainly going to have to roll these keys after this video so don't try to steal my keys. The last piece of the puzzle here is our Stripe webhook secret. Whenever a checkout event occurs, we need to be able to catch or receive those webhooks that Stripe sends out so we can update Directus with those. So I will just follow the instructions here to test in a local environment. We'll make sure that I am logged into the Stripe CLI and then we will forward all Stripe webhook events to localhost3000/api/stripe slash webhooks. So this is the API route within the Nuxt project where we are listening for those webhooks. And once I log in, I listen to that event, it will give me my webhook secret, which we use to verify that Stripe is sending those webhooks. Now, once we test that out, we should be able to pay invoices. But, oops, we need to restart the dev server so those changes can take effect. Alright, so let's wait for our dev server to restart. And once it's back, then we can test out this functionality. So we just hit Pay Invoice. It will throw a Stripe checkout session where the user can pay and complete via card or whatever payments you've got set up in your Stripe account. So I'm just going to enter some test card information and try this payment out to verify this will work. Alright. So once the checkout is complete, Stripe should send us back to the page from whence we came and we can see that this invoice is now marked as paid because a payment was applied. So if I open up our AgencyOS back end inside Directus, we should be able to find that payment within the Billing section. And just like the song, whoomp, there it is. Now, one of the other pieces of functionality that's built into the platform is the Stripe customer portal. They have a great UI, this is set up on the billing page where your customer or your client can go in and update their payment methods within the Stripe customer portal. So that's it for the client functionality within the portal. Let's take a look inside our codebase to see how this operates behind the scenes. Behind the curtain, if you will. So we're going to open up Versus Code and look for our layers section. Within layers we will look for our portal and then you can see under the server API routes we have a Stripe folder where we have a create checkout session. Post. Ts. So, this will accept an invoice ID as a, inside the body of this and then this will create a checkout session and return it to the Stripe JavaScript client to, redirect us to checkout. Then we have a composable which uses the Stripe JavaScript client to actually redirect to checkout. So we've got use Stripe which just basically loads Stripe and then we have a handle checkout function and a get portal link function to send the clients to that portal link. You can also see the API route for creating that portal link. And last but not least, we have our webhooks route that receives those webhooks from Stripe whenever these checkout events occur. This will verify that data coming from Stripe and create those payments within our Agency OS instance. So when you get ready to go to production with this, make sure that you go in and actually create the Stripe endpoints for those webhooks. So whatever your final deployment URL is, you'll go in and set that up inside Stripe using, the API Stripe Webhooks and then you will pick the checkout events just to make sure that all those events get sent to that URL. And make sure that you toggle off Test mode and grab the live API keys on your Production Server. So that's it for this video on how to connect Stripe with AgentC OS. Stay tuned for other videos in the series.",[206],"50893908-338e-41c7-bc9b-c2bf01bdd378",[],{"id":133,"number":134,"show":122,"year":135,"episodes":209},[137,138,139,140],{"reps":211},[212,268],{"name":213,"sdr":8,"link":214,"countries":215,"states":217},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[216],"United States",[218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267],"Michigan","Indiana","Ohio","West Virginia","Kentucky","Virginia","Tennessee","North Carolina","South Carolina","Georgia","Florida","Alabama","Mississippi","New York","MI","IN","OH","WV","KY","VA","TN","NC","SC","GA","FL","AL","MS","NY","Connecticut","CT","Delaware","DE","Maine","ME","Maryland","MD","Massachusetts","MA","New Hampshire","NH","New Jersey","NJ","Pennsylvania","PA","Rhode Island","RI","Vermont","VT","Washington DC","DC",{"name":269,"link":270,"countries":271},"Michelle Riber","https://meetings.hubspot.com/mriber",[272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457,458,459,249,460,461],"Albania","ALB","Algeria","DZA","Andorra","AND","Angola","AGO","Austria","AUT","Belgium","BEL","Benin","BEN","Bosnia and Herzegovina","BIH","Botswana","BWA","Bulgaria","BGR","Burkina Faso","BFA","Burundi","BDI","Cameroon","CMR","Cape Verde","CPV","Central African Republic","CAF","Chad","TCD","Comoros","COM","Côte d'Ivoire","CIV","Croatia","HRV","Czech Republic","CZE","Democratic Republic of Congo","COD","Denmark","DNK","Djibouti","DJI","Egypt","EGY","Equatorial Guinea","GNQ","Eritrea","ERI","Estonia","EST","Eswatini","SWZ","Ethiopia","ETH","Finland","FIN","France","FRA","Gabon","GAB","Gambia","GMB","Ghana","GHA","Greece","GRC","Guinea","GIN","Guinea-Bissau","GNB","Hungary","HUN","Iceland","ISL","Ireland","IRL","Italy","ITA","Kenya","KEN","Latvia","LVA","Lesotho","LSO","Liberia","LBR","Libya","LBY","Liechtenstein","LIE","Lithuania","LTU","Luxembourg","LUX","Madagascar","MDG","Malawi","MWI","Mali","MLI","Malta","MLT","Mauritania","MRT","Mauritius","MUS","Moldova","MDA","Monaco","MCO","Montenegro","MNE","Morocco","MAR","Mozambique","MOZ","Namibia","NAM","Niger","NER","Nigeria","NGA","North Macedonia","MKD","Norway","NOR","Poland","POL","Portugal","PRT","Republic of Congo","COG","Romania","ROU","Rwanda","RWA","San Marino","SMR","São Tomé and Príncipe","STP","Senegal","SEN","Serbia","SRB","Seychelles","SYC","Sierra Leone","SLE","Slovakia","SVK","Slovenia","SVN","Somalia","SOM","South Africa","ZAF","South Sudan","SSD","Spain","ESP","Sudan","SDN","Sweden","SWE","Tanzania","TZA","Togo","TGO","Tunisia","TUN","Uganda","UGA","United Kingdom","GBR","Vatican City","VAT","Zambia","ZMB","Zimbabwe","ZWE","UK","Germany","Netherlands","Switzerland","CH","NL",1773850414204]