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

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') || '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.

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:

Insert the Visualforce page url

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

4. Build the 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.

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

Get in touch