Powerful CMS. Zero headache.

Drop our API-based CMS into your Ionic app in minutes.

ButterCMS provides a CMS and content API for Ionic apps. Use ButterCMS with Ionic to enable dynamic content in your apps for page content, blogs, and more.

Above is quick video of integrating Butter's Pages API into an application.

“Best CMS on the market”

Butter's API slides right into our apps and lets us avoid having yet another WordPress site. Daniel, Founder Of Collective Idea

Marketers love Butter

SEO Landing Pages
Customer Case Studies
Company News & Updates
Events + Webinar Pages
Education Center
Location Pages
and more...

Butter saves you development time

Save thousands of dollars worth of development time with our easy setup.

Integrating Butter into our application took less than an hour and most of that time was spent on design work. Luke Brean, Legally

Everything you need

Custom Page Types
Customer Case Studies
Custom Content Modeling
CDN for assets
Testing environment
Location Pages
Webhooks

Beautiful admin interface

Easy to use. Easy to customize.

Integrates with Ionic

Our CMS has a simple content API and drop-in Ionic SDK.

Butter requires zero maintenance

Never worry about security upgrades, hosting, or performance.

Setup in minutes

Integrating Butter into your Ionic app is dead simple. Here's a mini tutorial to get a feel for adding marketing pages to your app. You can also use our Collections to do advanced content modeling. For full a integration guide check out our Official Guide

Above is quick video of integrating Butter's Pages API into an application.

Integrate into your application

First you would set up a new Customer Case Study page type in Butter and create a page. With your page defined, the ButterCMS API will return it in JSON format like this:

{
    "data": {
        "slug": "acme-co",
        "fields": {
            "facebook_open_graph_title": "Acme Co loves ButterCMS",
            "seo_title": "Acme Co Customer Case Study",
            "headline": "Acme Co saved 200% on Anvil costs with ButterCMS",
            "testimonial": "<p>We've been able to make anvils faster than ever before! - <em>Chief Anvil Maker</em></p>\r\n<p><img src=\"https://cdn.buttercms.com/NiA3IIP3Ssurz5eNJ15a\" alt=\"\" caption=\"false\" width=\"249\" height=\"249\" /></p>",
            "customer_logo": "https://cdn.buttercms.com/c8oSTGcwQDC5I58km5WV",
        }
    }
}

To integrate this into your app, simply make a call to ButterCMS APIs using the ButterCMS service. Place this call in the ngOnInit hook in home/home.page.ts:

import { Component, OnInit } from '@angular/core';
import {butterService} from '../../services/buttercms.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
  page: any;
  constructor() { }

  ngOnInit() {
    butterService.page.retrieve('*', 'home-page')
      .then((res) => {
        console.log(res.data.data);
        this.page = res.data.data;
      }).catch((res) => {
      console.log(res);
    });
  }

}

To render the data, create the ionic page. Here's how the home/home.page.html might look like:

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
<ion-card *ngIf="page">
  <ion-card-header >
    <img src="{{page.fields.featured_image}}" height="200px"/>
    <ion-card-subtitle>{{page.fields.subtitle}}</ion-card-subtitle>
    <ion-card-title>{{page.fields.title}}</ion-card-title>
  </ion-card-header>

  <ion-card-content>
   <div [innerHTML]="page.fields.description"></div>
  </ion-card-content>
</ion-card>
<ion-button href="/posts">View Posts</ion-button> <ion-button href="/customers">View Customers</ion-button>
</ion-content>

Get all page content of specific type. For instance, customers for the case study in customers/customers.page.ts

import { Component, OnInit } from '@angular/core';
import {butterService} from '../../services/buttercms.service';
@Component({
  selector: 'app-customers',
  templateUrl: './customers.page.html',
  styleUrls: ['./customers.page.scss'],
})
export class CustomersPage implements OnInit {
  customers: any;
  constructor() { }

  ngOnInit() {
  butterService.page.list('customer_case_study')
      .then((res) => {
        console.log(res.data.data);
        this.customers = res.data.data;
      }).catch((res) => {
      console.log(res);
    });
  }

}

The Ionic page to render the customer list can be written as below in customers/customers.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>Customer Testimonials</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content *ngIf="customers">
<ion-card *ngFor="let customer of customers">
  <a href="/customers/{{customer.slug}}">
  <ion-card-header>
    <img src="{{customer.fields.customer_logo}}" height="100px"/>
    <ion-card-title>{{customer.fields.seo_title}}</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    <div [innerHTML]="customer.fields.headline"></div>
  </ion-card-content>
</a>
</ion-card>
<ion-button href="/home">Back</ion-button>
</ion-content>

Viewing specific page of a specific type could be done as shown below: customer component that displays the details of the customer in customers/customer/customer.component.ts.

import { Component, OnInit } from '@angular/core';
import {butterService} from '../../../services/buttercms.service';
import {ActivatedRoute} from '@angular/router';
import {map, take} from 'rxjs/operators';
import {Observable} from 'rxjs';
@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.scss'],
})
export class CustomerComponent implements OnInit {
  customer: any;
  slug$: Observable<any>;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
this.slug$ = this.route.paramMap
            .pipe(
                map(params => (params.get('id')))
            );

        this.slug$.pipe(
            take(1))
            .subscribe(slug => {
                butterService.page.retrieve('customer_case_study', slug)
            .then((res) => {
              console.log(res.data.data);
              this.customer = res.data.data;
            }).catch((res) => {
            console.log(res);
          });
        }
            );
      }
}

To render the customer details, create Ionic page in customers/customer/customer.component.html as shown below:

<ion-header>
  <ion-toolbar>
    <ion-title *ngIf="customer">{{customer.fields.seo_title}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content  *ngIf="customer">

    <ion-img [src]="customer.fields.customer_logo"></ion-img>
    <h1>{{customer.fields.seo_title}}</h1>
    <div [innerHTML]="customer.fields.testimonial"></div>
    
<ion-button href="/customers">Back</ion-button>
</ion-content>

That's it! If you browse to your homepage you'll see your homepage populated with the content you created in Butter.

About ButterCMS

ButterCMS is an API-based, or "headless", CMS. We're a hosted service and we maintain all of the infrastructure. For more information on how we compare to a traditional CMS check out API-based CMS vs Traditional CMS.

What kind of database can I use?

No database required! We're a SaaS CMS or CaaS. You simply call our Content API from your app. We host and maintain all of the CMS infrastructure.

Do you host my templates?

Unlike CMS's you might be used to, we don't control or host any of your templates. The design of your app (HTML + CSS) lives in your application along side the rest of your app. Your application calls our Content API and we return your content in JSON format. You can then render this content in any way you'd like.

Can I import my content?

Yep. To import existing content from another platform, simply send us an email.

How do you compare to Wordpress?

In short, we offer all the same easy-to-use editing capabilities of Wordpress but are significantly easier for developers to setup and maintain. This means you spend less time working on your CMS and more time focusing on things important to your business.

Can I self host Butter?

No, we're a SaaS CMS or CaaS. You simply call our Content API from your app. We host and maintain all of the CMS infrastructure.

Headless CMS for these technologies and more

Ruby, Rails, Node.js, Python, ASP.NET, Flask, Django, Go, PHP, Laravel, Angular, React, Elixir, Phoenix, Meteor, Vue.js, Heroku, Gatsby.js, Pelican, Next.js, Express.js, Flutter, Gridsome, Java, Spring, React Native, Ionic, Nuxt.js

Try Butter free for 30-days

Ionic CMS

Above is quick video of integrating Butter's Pages API into an application.

Butter's API slides right into our apps and lets us avoid having yet another WordPress site. Daniel, Founder Of Collective Idea

Integrating Butter into our application took less than an hour and most of that time was spent on design work. Luke Brean, Legally

Beautiful admin interface

Integrates with Ionic

Butter requires zero maintenance

Above is quick video of integrating Butter's Pages API into an application.

Integrate into your application

What kind of database can I use?

Do you host my templates?

Can I import my content?

How do you compare to Wordpress?

Can I self host Butter?

More questions? We're happy to help.

Try Butter free for 30-days