Add a CMS to Salesforce® in 5 minutes

Contents
    Try Storyblok

    Storyblok is the first headless CMS that works for developers & marketers alike.

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