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
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.
Looking for more?
We’re working together with implementation partners, so if you’re looking for such service: