Add a CMS to Salesforce® in 5 minutes

In this tutorial I will show you how to install and use the headless CMS Storyblok in Salesforce® for managing content and creating awesome layouts.

1. Install the managed package

First you will need a Salesforce developer account and install the CMS as a managed package. The package will install a two visual force pages for the admin interface, a custom object for the content storage and

Install managed package

2. Create a visualforce page

Visualforce CMS Page

Create a Visualforce page with the name SbPage.page and insert following content:

<apex:page showHeader="false" standardStylesheets="false" docType="html-5.0">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />

  <div class="content-container"></div>

  <script type="text/template" data-storyblok-template="page">
    <div class="container mt-5">
      {{#each body}}
        {{component this}}
      {{/each}}
    </div>
  </script>

  <script type="text/template" data-storyblok-template="teaser">
    <div class="jumbotron">
      <h1>{{ headline }}</h1>
    </div>
  </script>

  <script type="text/template" data-storyblok-template="grid">
    <div>
      <div class="row">
        {{#each columns}}
          {{component this}}
        {{/each}}
      </div>
    </div>
  </script>

  <script type="text/template" data-storyblok-template="feature">
    <div class="col-md-4">
      <h2>{{name}}</h2>
    </div>
  </script>  

  <apex:remoteObjects jsNamespace="StoryBlok">
    <apex:remoteObjectModel name="Storyblok__Content__c" fields="Id,Storyblok__body__c,Storyblok__slug__c"/>
  </apex:remoteObjects>

  <script type="text/javascript" src="//app.storyblok.com/f/storyblok-latest.js"></script>
  <script type="text/javascript" src="{!$Resource.Storyblok__StoryblokRenderer}"/>

  <script type="text/javascript">
    StoryblokRenderer.init({
      accessToken: 'YOUR_TOKEN',
      customParent: 'https://storyblok.eu9.visual.force.com'
    });

    var StoryblokPage = StoryblokRenderer.bridge.getParam('page') || 'en/home';
    StoryblokRenderer.render('.content-container', StoryblokPage, function() {
      // Callback after rendered
    });
  </script>
</apex:page>

3. Create a space in Storyblok

Click “Login with exsiting Storyblok account” on the Storyblok tab of the managed package. This will bring you to the login and signup form. Login with your existing account or create a new one signing up.

Salesforce CMS

Insert your token

After you have created your space replace YOUR_TOKEN with your token (you can see where you can find the token here) on the Visualforce page:

Salesforce CMS Token

Insert the Visualforce page url

After you have created your space insert the url of the Visualforce page created in step two.

Salesforce Storyblok Setup

4. Build the you templates you need

Now that everything has been setup you can start build your custom components. Start by creating schema definitions for your blocks like in the following video and then add the template code to your Visualforce page.

Looking for more?

We’re working together with implementation partners, so if you’re looking for such service:

Get in touch


More to read...

About the author

Alexander Feiglstorfer

Alexander Feiglstorfer

Passionate developer and always in search of the most effective way to resolve a problem. After working 13 years for agencies and SaaS companies using almost every CMS out there he founded Storyblok to solve the problem of being forced to a technology, proprietary template languages and the plugin hell of monolithic systems.