<p>Our digital world is being built on top of API services. And Webhooks are the operators that enable these API services to communicate with each other. Using Cosmic Webhooks to customize your service-to-service communications, you can create some powerful
automated workflows, helping you better communicate with your team and the world.</p><p>Below are a few practical use-cases for Cosmic Webhooks:<br><br><strong>Add Webhooks to your Bucket by going to&nbsp;</strong><a href="https://cosmicjs.com/buckets" rel="noopener noreferrer" target="_blank">Your Bucket &gt; Settings &gt; Billing &gt; Add-ons</a><br><br></p><h3>1. Slack: Send notifications to your team</h3><p><br></p><p style="text-align: center;"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/274fddc0-c0d6-11e8-9b44-5583ac3a75ef-slack.svg" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"></p><p><br></p><p>Slack is a preferred chat tool to help teams stay in constant communication. Cosmic integrates easily with your Slack workspaces, allowing you to send chat notifications whenever content is added, edited, or deleted in your Cosmic Bucket. &nbsp;This
is great for when you would like to maintain a channel to log all content edits in between mocking co-workers with gifs.</p><p><a href="https://slack.com/oauth/authorize?&client_id=11020550018.203122635188&scope=incoming-webhook" rel="noopener noreferrer" target="_blank">Add Slack to your Cosmic Bucket &raquo;</a></p><p><br></p><h3>2. Netlify: Build your website automatically</h3><p><br></p><p style="text-align: center;"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/4a604e80-c0d6-11e8-9b44-5583ac3a75ef-netlify.png" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"></p><p><br></p><p><a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> is a web hosting provider for your modern web projects that allows for some amazing automation capabilities. One of these nice automated capabilities is the ability to trigger automatic builds. Connecting your Cosmic Bucket to Netlify is a cinch, allowing you to rebuild your Netlify-hosted web project automagically whenever content is edited in your Cosmic Bucket. Follow the link below to learn exactly how to do this:</p><p><a href="https://cosmicjs.com/articles/netlify-gatsby-cosmic-js-automatic-builds-with-webhooks-ji3fhda9" rel="noopener noreferrer" target="_blank">Add the Netlify build hook to your Cosmic Bucket &raquo;</a></p><p><br></p><h3>3. SendGrid: Send email notifications to your team</h3><p><br></p><p style="text-align: center;"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/549f4ae0-c0d6-11e8-9b44-5583ac3a75ef-sendgrid.png" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"></p><p><br></p><p>We recently released <a href="https://cosmicjs.com/docs/functions" rel="noopener noreferrer" target="_blank">Cosmic Functions</a> to help developers deploy code quickly and easily. A clear use-case for quickly deployed endpoints via Cosmic Functions is to use them for Webhook endpoints. Check out the <a href="https://github.com/cosmicjs/webhook-email-function" rel="noopener noreferrer" target="_blank">Webhook SendGrid Email Function</a> that enables you to send an email whenever content is added, edited, or deleted in your Cosmic Bucket. This is great for when your micro-managing content editor absolutely <strong>must</strong> read every draft from the comfort of their email inbox.</p><p><a href="https://cosmicjs.com/buckets" rel="noopener noreferrer" target="_blank">Go to Your Bucket &gt; Settings &gt; Functions to add the Send Email Webhook &raquo;</a></p><p><br></p><h3>BONUS: Zapier Integrations</h3><p><br></p><p style="text-align: center;"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/67005710-c0d6-11e8-9b44-5583ac3a75ef-zapier-logo.png" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"></p><p><br></p><p><a href="https://zapier.com/" rel="noopener noreferrer" target="_blank">Zapier</a> may be the undisputed king of webhooks. Their ecosystem of thousands of apps that communicate with each other allow you to create some powerful integrations. Use the <a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Cosmic Zapier App</a> (currently invite only 😉) to connect your Cosmic Bucket to any number of services including Google&#39;s Product Suite, Salesforce, Facebook, Twitter, and more.</p><p><a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Connect thousands of services to your Cosmic Bucket &raquo;</a></p><h3><br></h3><h3>Conclusion</h3><p>Our digital world is powered by API services. &nbsp;Cosmic Webhooks connects your Bucket to the world of API services allowing your team to automate communications to help you build better products together.&nbsp;</p><p>Let me know if you have any questions or comments about Cosmic Webhooks. <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">Reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join our Slack community</a>.</p>

3 Simple, but Powerful, Automation Webhooks

<p>We&#39;ve all seen it: You&#39;re on the last column of a time-consuming spreadsheet, the last thought in a blog article or putting the last touch on a new press release. You either hit the wrong key and all of your hard work evaporates into thin air or a co-editor is simultaneously editing and overwrites your content changes. You frantically scramble to &quot;Edit Undo&quot; and finally resort to refreshing the page to see if your changes have been saved. Alas, another workflow stretched longer by tools that don&#39;t keep up with you and your team in real-time.&nbsp;</p><h4><br></h4><h3>What is Revision History?</h3><p>Revision History: Or, as I like to call it, the global &quot;CYA&quot; (cover your ass) for all marketers everywhere 😀 Revision history becomes especially important in a cross-functional team environment. When developers and editors are collaborating in a Bucket to manage content, data and files, it helps to have a system that is memorizing every version of your content, in the event that you want to revert back, save drafted content to a published object, retrieve a revision history API endpoint or simply view prior changes.&nbsp;</p><p>With revision history, you no longer have to worry about editing mistakes. You now have the power to go back in time and revert to to prior versions. You can even have multiple editors working on the same piece of content at once and rest assured that you will never write over each other. Hey, even if you did, you have Revision History! (Refer to viewing prior versions below) <span class="fr-emoticon fr-deletable">😉</span>&nbsp;</p><p><br></p><h3>How to Add Revision History to Your Bucket</h3><p>To add Cosmic Revision History to your Bucket, simply navigate to your Bucket &gt; Bucket Settings &gt; Billing:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/7ec8c980-c01e-11e8-b9f3-29af768e6e25-ice_screenshot_20180924-122219.png" style="width: 651px;" class="fr-fic fr-dib"></p><p><br></p><h3>How To View Prior Versions</h3><p>Navigate to the Object whose revision history you&#39;re querying and click on &quot;Revision History&quot;. You can click any of the linked timestamps to access that version of content, revert back to it, or simply make changes to the published content in draft state.&nbsp;</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/50029280-c02c-11e8-b9f3-29af768e6e25-ice_screenshot_20180924-140139.png" style="width: 530px;" class="fr-fic fr-dib"></p><p>Once you click into a timestamped version, you&#39;ll have the ability to modify content and preview your content just as you would in the live version. Notice the banner at the top alerting you that this is a prior version:</p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/396e1c30-c034-11e8-b9f3-29af768e6e25-ice_screenshot_20180924-145725.png" style="width: 677px;" class="fr-fic fr-dib"></p><h3><br></h3><h3>How to Access Your Revision API Endpoint</h3><p>Navigate to the Object whose revision history endpoint you&#39;re querying and click on &quot;Revision Endpoint&quot;. Your API endpoint opens in a new tab. Note: only developers and admins have access to the Revision Endpoint. You can toggle to the Editor view to see how only Revision History is an option for that particular role type.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1e8f9df0-c02d-11e8-b9f3-29af768e6e25-ezgif-4-717f7ac3eb.gif" style="width: 608px;" class="fr-fic fr-dib"></p><p><br></p><h3>When is Revision History Used?</h3><p>There are many examples, but here&#39;s a few we&#39;ve seen since releasing the feature:</p><ul><li>Colleague edits and publishes existing piece of content that needs to be reverted back to original version</li><li>Team needs multiple versions of the content available via API endpoint for testing</li><li>Team needs access to change log to see who has been active in content management</li><li>Editor accidentally erases existing content</li></ul><p><br></p><p>Need more peace of mind when managing your team&#39;s content? Check out our next powerful feature for editors and developers alike: <a href="https://cosmicjs.com/articles/how-to-schedule-automatic-backups-in-cosmic-js-jgqjsa87?ref=search" rel="noopener noreferrer" target="_blank">Automatic Backups</a>.&nbsp;</p><p><br></p><h3>Conclusion</h3><p>I hope you have found this tutorial on Revision History helpful. If you have any other questions or comments about managing content in Cosmic, feel free to <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">Reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join our Slack community</a>.</p>

Cosmic Revision History

<p>Cosmic provides a best-in-class headless CMS designed for your modern digital projects. By providing an intuitive admin dashboard, powerful APIs and flexible user roles, Cosmic enables content creators and developers to work better together. Applications are built faster, more light-weight, and your whole team saves time in the process. You can get started out-of-the-box with pre-built websites and apps available for easy install. I&#39;ll highlight 5 popular website boilerplates built specifically for zippy API-first dynamic content management using the Cosmic headless CMS API.&nbsp;</p><p><br></p><h3>TL;DR:</h3><p><a href="https://cosmicjs.com/apps" rel="noopener noreferrer" target="_blank">Cosmic Apps Marketplace</a><br><a href="https://github.com/cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic Open-Source</a><br><a href="https://cosmicjs.com/docs" rel="noopener noreferrer" target="_blank">Cosmic Documentation</a></p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e2417130-bb44-11e8-ac9f-67e4f371d8e5-ezgif-4-fe526e7f0a.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3>5 Website Boilerplates Built for API-first Content Management</h3><p>All of the website templates presented in this blog satisfy some common website requirements including:</p><p>- dynamic pages<br>- blog articles<br>- author management<br>- SEO ability<br>- contact form<br>- global website search</p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/30adba70-bb5b-11e8-b1b9-535ca6d890a2-DallasStandup.com-21.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><a href="https://github.com/cosmicjs/nextjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Next.js Website Boilerplate</a></h3><p><a href="https://github.com/cosmicjs/nextjs-website-boilerplate" rel="noopener noreferrer" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/34c89f10-bb49-11e8-b1b9-535ca6d890a2-289eec20-47fa-11e8-9edf-034361a9eeb5-next.png" style="width: 300px;" class="fr-fic fr-dib"></a></p><p><a href="https://cosmicjs.com/apps/nextjs-website-boilerplate" rel="nofollow">Click here to view the demo</a><br><a href="https://cosmicjs.com/articles/nextjs-website-boilerplate-jeoea8au" rel="nofollow">Read how this app was built</a></p><p><br></p><p>Next.js is a minimalistic framework for server-rendered React applications. See more <a href="https://cosmicjs.com/apps?q=next.js" rel="noopener noreferrer" target="_blank">Next.js Apps</a> available for easy install.</p><h3><a href="https://github.com/cosmicjs/nuxtjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Nuxt.js Website Boilerplate</a></h3><p><a href="https://github.com/cosmicjs/nuxtjs-website-boilerplate" rel="noopener noreferrer" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/30f3f060-bb49-11e8-b1b9-535ca6d890a2-8a9bd6e0-471e-11e8-9273-6f3edf3e559e-nuxt.png" style="width: 300px;" class="fr-fic fr-dib"></a></p><p><br></p><p><a href="https://cosmicjs.com/apps/nuxtjs-website-boilerplate" rel="nofollow">Click here to view the demo</a><br><a href="https://cosmicjs.com/articles/nuxtjs-website-boilerplate-jezdxaxb" rel="nofollow">Read how this app was built</a></p><p>Nuxt.js is a minimal framework for creating Vue.js applications with server side rendering, code-splitting, hot-reloading, static generation and more! See more <a href="https://cosmicjs.com/apps?languages=Nuxt.js" rel="noopener noreferrer" target="_blank">Nuxt.js Apps</a> available for easy install.</p><p><br></p><h3><a href="https://github.com/cosmicjs/react-website-boilerplate" rel="noopener noreferrer" target="_blank">React Website Boilerplate</a></h3><p><a href="https://github.com/cosmicjs/react-website-boilerplate" rel="noopener noreferrer" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/10c283b0-bb49-11e8-ac9f-67e4f371d8e5-a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg" style="width: 300px;" class="fr-fic fr-dib"></a></p><p><a href="https://cosmicjs.com/apps/nextjs-website-boilerplate" rel="nofollow">Click here to view the demo</a><br><a href="https://cosmicjs.com/articles/nextjs-website-boilerplate-jeoea8au" rel="nofollow">Read how this app was built</a></p><p><br></p><p>React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. See more <a href="https://cosmicjs.com/apps?languages=React" rel="noopener noreferrer" target="_blank">React Apps</a> available for easy install.</p><p><br></p><h3><a href="https://github.com/cosmicjs/vue-website-boilerplate" rel="noopener noreferrer" target="_blank">Vue Website Boilerplate</a></h3><p><a href="https://github.com/cosmicjs/vue-website-boilerplate" rel="noopener noreferrer" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/268e3220-bb49-11e8-ac9f-67e4f371d8e5-858dda70-6288-11e7-ab3d-9ddd8313526f-96da6390-e18a-11e6-a19e-716cc90a0c51-Vue.js_Logo.svg" style="width: 300px;" class="fr-fic fr-dib"></a></p><p><a href="https://cosmicjs.com/apps/nuxtjs-website-boilerplate" rel="nofollow">Click here to view the demo</a><br><a href="https://cosmicjs.com/articles/nuxtjs-website-boilerplate-jezdxaxb" rel="nofollow">Read how this app was built</a></p><p><br></p><p>Vue is a <strong>progressive framework</strong> for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. See more <a href="https://cosmicjs.com/apps?languages=Vue.js" rel="noopener noreferrer" target="_blank">Vue.js Apps</a> available for easy install</p><p><br></p><h3><a href="https://github.com/cosmicjs/nodejs-website-boilerplate" rel="noopener noreferrer" target="_blank">Node.js Website Boilerplate</a>&nbsp;</h3><p><a href="https://github.com/cosmicjs/nodejs-website-boilerplate" rel="noopener noreferrer" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/2b8826f0-bb49-11e8-b1b9-535ca6d890a2-759e85a0-27b0-11e7-b6ae-8108cf4caa96-nodejs.svg" style="width: 300px;" class="fr-fic fr-dib"></a></p><p><a href="https://cosmicjs.com/apps/medical-professional" rel="nofollow">Click here to view a demo website</a></p><p>Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. See more <a href="https://cosmicjs.com/apps?languages=Node.js" rel="noopener noreferrer" target="_blank">Node.js Apps</a> available for easy install.</p><p data-empty="true"><br></p><h3>Conclusion</h3><p>When ditching the installed content management system and going API-first isn&#39;t quick enough, check out the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Starter Apps</a> from Cosmic &nbsp;to get a project up and running in seconds. 🔥</p><p>If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</p>

5 Website Boilerplates Built for API-first Content Management

Create a Progressive Web App using Vue, Cosmic, and GraphQL

How to use the Spotify API to Build a Song Shuffle Blog

<p>We recently released <a href="https://cosmicjs.com/docs/functions" rel="noopener noreferrer" target="_blank">Cosmic Functions</a> (public beta). We&#39;re excited to help teams build amazing modern products together with new serverless solutions.</p><p>In this short tutorial, I&#39;m going to show you how to get up and running with the <a href="https://github.com/cosmicjs/send-email-function" rel="noopener noreferrer" target="_blank">SendGrid Email Function</a> to send emails via SendGrid (to view more example functions login and go to <em>Your Bucket &gt; Settings &gt; Functions</em>).</p><h3><strong>Deploying the Function</strong></h3><p><strong>1. Install the function</strong><br>To install the SendGrid function, go to <em>Your Bucket &gt; Settings &gt; Functions</em>, find the SendGrid function, and click &quot;Install Function&quot;.</p><p><strong>2. Add keys, and deploy</strong><br>After you install the function, you will be redirected to a page to add your AWS credentials and environment variables. Follow the steps to add your AWS creds (if you don&#39;t have them handy).</p><p>Go to your SendGrid account and find your API Secret Key located in <a href="https://app.sendgrid.com/settings/api_keys" rel="noopener noreferrer" target="_blank">Settings &gt; API Keys</a> (you may need to create a new one) and add this as the value to SENDGRID_API_KEY.</p><p>Once you have your keys added, click &quot;Deploy Function&quot; and in a minute your function will be deployed and ready for requests.</p><h3><strong>Code a Web Contact Form</strong></h3><p>Next, let&#39;s create a contact form to access the newly deployed endpoint. Follow these steps to install the <a href="https://cosmicjs.com/getting-started#quickstart" rel="noopener noreferrer" target="_blank">React Starter</a>:</p><pre>npm i -g cosmic-cli
cosmic init react-starter
cosmic develop</pre><p>Now go to your app codebase and go to the default page component located in <code>pages/default.js</code> and edit it to look like this:</p><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/9d3947dd3db31885914d12e894a3bff1#file-default-js' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/9d3947dd3db31885914d12e894a3bff1#file-default-js" class="embedly-card"></a></div><p><strong>Notice a couple things here:</strong></p><p>1. We&#39;ve added a <code>form</code> element to take the input for email, first name, and last name.<br>2. We&#39;ve added the <code>handleSubmit</code> method to handle the form submission which takes the values of the form and sends the data to our Cosmic Function endpoint.</p><p><strong>And that&#39;s it!</strong> We&#39;ve now got an endpoint that receives the data from our form and sends it to the SendGrid API for processing.</p><h3><strong>Benefits</strong></h3><p><strong>Less Code</strong><br>We didn&#39;t have to worry about building an API endpoint in our app to send the data to SendGrid.</p><p><strong>Less Config Hassles</strong><br>We don&#39;t have to worry about config hassles like possibly leaking secret keys client-side. We don&#39;t have to share API keys with anyone else, just the endpoint. Config is handled in the Cosmic Function as an Environment Variable.</p><p><strong>Reusable</strong><br>We can use this endpoint in any other app that needs to send an email.</p><p>I hope you enjoyed this quick tour of the SendGrid Function, now ready for installation and deployment (go to <em>Your Bucket &gt; Settings &gt; Functions</em>). Let me know if you have any questions or comments. <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">Reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join our Slack community</a>.</p>

Sending Emails with the SendGrid Function

<p>A primary benefit of managing content API-first is that your content is transformed into portable and scalable content objects, available via API endpoint to create workflows with the third-party applications that your team uses. We recently released the <a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Cosmic Zapier Integration</a>, which allows users to add Zapier to their Bucket to choose triggers that prompt an action in a third-party system. To demonstrate, I&#39;ve put together a couple of workflows connecting my Cosmic Content to Gmail, Google Sheets and Google Calendar.&nbsp;</p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/bf084660-b5ec-11e8-8f62-f9335c363962-1*TRRW9Wp_ZqD8MJ5gS_7c5w.gif" style="width: 100%;" class="fr-fic fr-dib"></p><h4><br></h4><h4>Make a Cosmic Zap</h4><p><strong>I want to create three example workflows:&nbsp;</strong></p><table style="width: 100%;"><tbody><tr><td style="width: 50.0000%;">New Media Published</td><td style="width: 50.0000%;">Receive an email via Gmail</td></tr><tr><td style="width: 50.0000%;">New Author Published</td><td style="width: 50.0000%;">Add author info to Google Sheets</td></tr><tr><td style="width: 50.0000%;">New Appointment Drafted</td><td style="width: 50.0000%;">Add appointment to Google Calendar<br></td></tr></tbody></table><p><br></p><p>I want to automate these processes using the Cosmic Zapier Integration. To do so, go to the Cosmic <a href="https://cosmicjs.com/integrations" rel="noopener noreferrer" target="_blank">Integrations Page</a> and <a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">add Zapier</a> to your Bucket.&nbsp;</p><p><br></p><p><strong>Choose a Trigger App: Search &quot;Cosmic&quot;&nbsp;</strong></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e81cd9f0-b531-11e8-ab6d-bd28d4a01875-Screen Shot 2018-09-10 at 2.43.28 PM.png" style="width: 100%;" class="fr-fic fr-dib"></p><h4><br></h4><p><strong>Select your Cosmic Trigger</strong></p><h4><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/148ac0b0-b532-11e8-abe6-6dcac9f4e8c5-Screen Shot 2018-09-10 at 2.44.49 PM.png" style="width: 640px;" class="fr-fic fr-dib">&nbsp;</h4><h4><br></h4><p><strong>Media Updates</strong>: I chose &quot;<strong>New Media</strong>&quot; for my zap, and select the Bucket I want to received my updates to Gmail from. I connected my Gmail account and clarify who I want to receive the message, in what format and what pieces of content to include from the new Cosmic Media Objects being uploaded to my Bucket. Now when I add new Media to my Bucket, I get an automated email that includes the media file for my review.&nbsp;</p><p><br></p><p><strong>New Media Object Published</strong></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f3811610-b529-11e8-ab6d-bd28d4a01875-Screen Shot 2018-09-10 at 1.46.59 PM.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p><strong>New Media Object Email Notification</strong></p><p><strong><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ed7207c0-b529-11e8-a457-7fb018832f7b-Screen Shot 2018-09-10 at 1.46.45 PM.png" style="width: 100%;" class="fr-fic fr-dib"></strong></p><p><br></p><p><strong>New Author Updates</strong>: I chose &quot;<strong>New Object</strong>&quot; for my zap, and select the Bucket I want to receive my updates to Google Sheets from. I clarify within Zapier that I am looking to pull <strong>Published Object</strong> Types to update Google Sheets. I connect my Google Sheets account and clarify which spreadsheet and section I want to see updated when new Authors are published in the Cosmic system.&nbsp;</p><p><br></p><p><strong>New Author Published&nbsp;</strong></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/53076b50-b5ea-11e8-8f62-f9335c363962-Screen Shot 2018-09-11 at 12.44.10 PM.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p><strong>New Author Added to Google Sheets&nbsp;</strong></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/70331210-b5ea-11e8-8454-bd9b5d794116-Screen Shot 2018-09-10 at 4.41.43 PM.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p><strong>New Appointment Updates:</strong> I chose &quot;<strong>New Object</strong>&quot; for my zap, and select the Bucket I want to receive my updates to Google Calendar from. I clarify within Zapier that I am looking to pull <strong>Draft Object</strong> Types to update Google Calendar, since my workflow calls for contributors drafting content for appointments that still need to be confirmed. Now when my Appointments Object Type is set to draft, it adds a Google Calendar appointment.&nbsp;</p><p><br></p><p><strong>New Appointment Drafted</strong></p><h4><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/82a89b30-b5eb-11e8-906a-53ab98ffc135-Screen Shot 2018-09-11 at 12.52.29 PM.png" style="width: 100%;" class="fr-fic fr-dib"></h4><p><br></p><p><strong>New Appointment Added to Google Calendar</strong></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/949d02e0-b5eb-11e8-bb35-e53dd8bea0af-Screen Shot 2018-09-11 at 12.52.36 PM.png" style="width: 378px;" class="fr-fic fr-dib"></p><h3><br></h3><h3><img src="https://cosmic-s3.imgix.net/e1a004b0-b5ec-11e8-8f62-f9335c363962-ice_screenshot_20180911-130228.png" style="width: 698px;" class="fr-fic fr-dib"></h3><h3><br></h3><h3>Conclusion</h3><p>It&#39;s easy to automate hundreds of simple tasks using the <a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Cosmic Zapier Integration</a>. Once you&#39;ve connected your Cosmic Buckets to Zapier, you&#39;re able to create a variety of zaps that can speed up your team&#39;s time to market and ability to manage its various workflows seamlessly.&nbsp;</p><p>If you have any comments or questions about integrating your Cosmic Objects into workflows with other apps using Zapier, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</p>

Automating Content Workflows with Gmail, Google Sheets and Google Calendar

<p>Cosmic makes it easy to manage content for your Vue.js applications. In this blog we&#39;ll quickstart a <a href="https://cosmicjs.com/apps/vue-rpg-game" rel="noopener noreferrer" target="_blank">Vue.js RPG Adventure Game</a><a href="https://cosmicjs.com/apps/landing-page" rel="noopener noreferrer" target="_blank">&nbsp;</a>using the <a href="https://github.com/cosmicjs/cosmic-cli">Cosmic CLI</a>. Our game, &quot;Enter The Cosmos&quot;, is a turn-based, RPG style game built using Vue.js, Node.js and Cosmic. The game follows you as you fight off a fleet of space pirates to avenge your family. Install, deploy and edit every part of this video game app from your Cosmic Bucket Dashboard. 🔥&nbsp;</p><p><br></p><h3 name="508e">TL;DR:</h3><p><a href="https://cosmicjs.com/apps/vue-rpg-game" rel="noopener noreferrer" target="_blank">Vue.js RPG Game Page</a><br><a href="https://cosmicjs.com/apps/vue-rpg-game/demo" rel="noopener noreferrer" target="_blank">Vue.js RPG Game Demo</a><br><a href="https://github.com/cosmicjs/vue-rpg-game" rel="noopener noreferrer" target="_blank">Vue.js RPG Game Codebase</a><br><a href="https://cosmicjs.com/articles/how-to-create-an-rpg-adventure-game-using-vuejs-and-cosmic-js-jlftg080" rel="noopener noreferrer" target="_blank">How to Create an RPG Adventure Game using Vue.js and Cosmic</a></p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/449b5ea0-b1da-11e8-b061-fb695ed9ca14-ezgif-4-ad44e8b966.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p>Cosmic is an API-first content management platform that makes it easy to add content to any existing or new application. Cosmic enables content managers and developers to work better together. By providing an intuitive Admin Dashboard, powerful APIs, and flexible user roles, applications are built faster, more light-weight, and your whole team saves time in the process.&nbsp;</p><p><br></p><h3 name="9b20">QuickStart a Vue.js RPG Game in 3 Steps&nbsp;</h3><p name="4c02"><a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> is an example of a robust headless CMS and API that&#39;s promoting collaboration on cross-functional teams to build apps faster. Get started building Cosmic-powered apps in seconds 🚀 We have <a data-href="https://github.com/cosmicjs/node-starter" href="https://github.com/cosmicjs/node-starter" rel="noopener" target="_blank">Node.js</a>, <a data-href="https://github.com/cosmicjs/react-starter" href="https://github.com/cosmicjs/react-starter" rel="noopener" target="_blank">React</a>, <a data-href="https://github.com/cosmicjs/vue-starter" href="https://github.com/cosmicjs/vue-starter" rel="noopener" target="_blank">Vue</a>, <a data-href="https://github.com/cosmicjs/gatsby-starter" href="https://github.com/cosmicjs/gatsby-starter" rel="noopener" target="_blank">Gatsby</a> and <a data-href="https://github.com/cosmicjs/serverless-starter" href="https://github.com/cosmicjs/serverless-starter" rel="noopener" target="_blank">Serverless</a> Starters to help you get your project started quickly. There are over 70 app examples available in the <a href="https://cosmicjs.com/apps" rel="noopener noreferrer" target="_blank">Cosmic Apps Marketplace</a> to speed up your project as well. Today we&#39;ll be using the <a href="https://github.com/cosmicjs/cosmic-cli" rel="noopener noreferrer" target="_blank">Cosmic CLI</a> to quickstart a <a href="https://cosmicjs.com/apps/vue-rpg-game" rel="noopener noreferrer" target="_blank">Vue.js RPG Adventure Game</a>.</p><p name="4c02"><br></p><h3>Step 1: Create an Account</h3><p><a href="https://cosmicjs.com/signup" rel="noopener noreferrer" target="_blank"><strong>Sign up</strong></a><strong>&nbsp;for Cosmic + Install the <strong><a href="https://github.com/cosmicjs/cosmic-cli">Cosmic CLI</a></strong> + Create a New Bucket</strong></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/79ef30b0-b1f6-11e8-a189-1b656bde317a-ice_screenshot_20180906-120102.png" style="width: 480px;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Step 2 🛠️ Installation</h3><p data-empty="true"><strong>Install via the <a href="https://github.com/cosmicjs/cosmic-cli">Cosmic CLI</a>:</strong></p><p data-empty="true"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/60c1ca60-b1da-11e8-90ff-4de0ce9f20ab-ice_screenshot_20180905-110632.png" style="width: 497px;" class="fr-fic fr-dib"></p><p data-empty="true"><br></p><p data-empty="true">I set up an example Bucket for this blog:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/689f7e30-b1da-11e8-90ff-4de0ce9f20ab-ezgif-4-40cfcf2bf7.gif" style="width: 489px;" class="fr-fic fr-dib"></p><p><br></p><p>Run <code>cosmic -h</code> for a list of all commands. Run <code>cosmic [command] -h</code> for details on options for a specific command. You&#39;re now up and running with a <a href="https://cosmicjs.com/apps/vue-rpg-game" rel="noopener noreferrer" target="_blank">Vue.js RPG Adventure Game</a> that can be managed entirely from your Cosmic Bucket Dashboard and Command Line Terminal tool of choice.&nbsp;</p><p><br></p><h3>Step 3: Content Management&nbsp;</h3><p>Manage content for your RPG game in three separate object types: Pages, Screen Assets and Sprites. Refer to the <a href="https://cosmicjs.com/articles/how-to-create-an-rpg-adventure-game-using-vuejs-and-cosmic-js-jlftg080" rel="noopener noreferrer" target="_blank">original tutorial</a> to see how the game&#39;s content models are chosen and implemented.&nbsp;</p><h3><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/adf2c5c0-b1f6-11e8-b1b7-bb5940048b74-ice_screenshot_20180906-120236.png" style="width: 100%;" class="fr-fic fr-dib"></h3><h3><br></h3><h3>Conclusion</h3><p>I was able to easily install a <a href="https://cosmicjs.com/apps/vue-rpg-game" rel="noopener noreferrer" target="_blank">Vue.js RPG Adventure Game</a> using a headless CMS API that I can now use to manage dynamic content changes. When ditching the installed content management system and going API-first isn&#39;t quick enough, check out the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Starter Apps</a> from Cosmic &nbsp;to get a project up and running in seconds. 🔥</p><p>If you have any comments or questions about building Vue.js apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</p>

QuickStart a Vue.js RPG Game in 3 Steps

<p>Cosmic Community Member <a href="https://cosmicjs.com/reaganmcf" rel="noopener noreferrer" target="_blank">Reagan McFarland</a> just debuted the new Alexa Skill to add Objects to your Cosmic Bucket via voice. In this video, Cosmic co-founder <a href="https://cosmicjs.com/tony" rel="noopener noreferrer" target="_blank">Tony Spiro</a> takes you on a quick tour of how to demo the <a href="https://github.com/cosmicjs/alexa-to-do" rel="noopener noreferrer" target="_blank">Alexa To Do app</a> from the Alexa developer console.</p><h3>TL;DR:</h3><p><a href="https://github.com/cosmicjs/alexa-to-do" rel="noopener noreferrer" target="_blank">Alexa To Do App Source Code</a><br><a href="https://www.amazon.com/ap/signin?clientContext=135-7726449-9221419&openid.return_to=https%3A%2F%2Fdeveloper.amazon.com%2Falexa%2Fconsole%2Fask&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.assoc_handle=amzn_dante_us&openid.mode=checkid_setup&marketPlaceId=ATVPDKIKX0DER&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&pageId=alexa_blueprints&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0&openid.pape.max_auth_age=7200&siteState=clientContext%3D132-3064528-7336868%2CsourceUrl%3Dhttps%253A%252F%252Fdeveloper.amazon.com%252Falexa%252Fconsole%252Fask%2Csignature%3Dnull" rel="noopener noreferrer" target="_blank">Amazon Alexa Developer Console</a><br><a href="https://cosmicjs.com/articles/how-to-build-an-alexa-skill-to-add-objects-to-your-bucket-via-voice-jlbar04u" rel="noopener noreferrer" target="_blank">How to Build an Alexa Skill to add Objects to your Bucket via Voice</a><br><br></p><h3>Video: Alexa To Do App Demo</h3><p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe width="640" height="360" src="https://www.youtube.com/embed/eef3N8V01bo?wmode=opaque" frameborder="0" allowfullscreen=""></iframe></span></p><h3><br></h3><h3><br></h3><h3>Conclusion</h3><p>We welcome suggestions and submissions for new open-source projects. If you&#39;d like to contribute and join our Community, or have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</p>

Start building today