Using the Ceros SDK, you can create more complex digital content in the Ceros platform. Think quizzes, countdown timers, calculators, and more. In this article, we’ll break down the basics of the SDK and how you can get started if you’d like to use it.
What is the Ceros SDK?
Simply put, the Ceros Software Development Kit (SDK) is a set of tools that enables you to unlock studio functionality that can’t typically be achieved with standard interactions or animations.
To leverage the Ceros SDK, you’ll need to either use a prewritten plug-in or have a javascript developer write a custom plug-in for you.
What is a Plug-in?
A plug-in is a documented, ready-to-use package of code written by developers so that anyone can add additional functionality to a Ceros experience without coding knowledge.
There are plug-ins that allow you to add a countdown timer, add sound to your experience, create quizzes, and more. You can also check out the webinar on how to create quizzes using our plug-ins here!
Check out available plug-ins on our Developer portal: https://www.ceros.com/extensions-library/
Using the SDK in the Studio
When working in the studio, there are two common areas where you’ll leverage the SDK— the SDK Panel and the Custom HTML tab.
The SDK Panel can be accessed by the ‘SDK’ icon in your toolbar.
In this panel, you are able to assign what are called “Tags” and “Payloads” to pages or objects in your experience.
- SDK “Tags” are values assigned to a page or object in the studio to identify the page or object. When applying Tags, it’s important to remember:
- You must click ENTER after typing in a tag to save it
- You can hover over a tag and click ‘x’ to delete it
- You can apply more than one tag to an element
- SDK “Payloads” are values that you can enter in the SDK Panel that generally contain unique information. A Component or page can only have one payload.
- No need to click ENTER when adding a Payload
- Payloads are case sensitive
The Custom HTML tab you can find in your Settings Panel. Here, you’re able to add HTML, CSS or JavaScript code to the entire experience. This is where you can copy and paste the script provided in the plug-in documentation. It’s important to remember to click OK after pasting your script in the Custom HTML.
To better understand all the components that make up a proper Plug-in application, let’s relate these to a real-life example.
Think about the process of recording a TV show.
- The directions on how to record a TV show are the equivalent of SDK documentation. You need to follow precise steps to record a TV show, just like you need to follow instructions in plug-in documentation to get the correct functionality to occur.
- You can think of the TV itself as the Custom HTML. To record a TV show, you need to have a TV. To have a plug-in function, you need to have a Custom HTML script. You don’t need to understand how the TV or the Custom HTML script works behind the scenes, as long as it is there.
- The remote and buttons represent the Tags and Payloads. You need to press the right buttons on a remote to record a TV show, just like you need to add tags in certain places to have a specific functionality occur. If you hit the wrong buttons on the remote, your show will not record, just like if you put the incorrect tags in the wrong places, the correct functionality won’t occur.
In order to record a TV show, you need directions, a tv, and a remote. For the SDK to work, you need Plugin documentation, a Custom HTML script, and the correct tags and payloads.
Now that you have an understanding of the SDK basics and terminology, it’s time to start creating! Check out our Developer portal for a list of prebuilt extensions, or reach out to our support team via the chat widget in the studio to learn more.