In this guide:
About This Plugin
This plugin enables the user to:
• Type into an input field and have that value shown somewhere else in the experience
• Populate text boxes using URL parameters
Click to import Demo Experience
How To Implement
Step 1: Add and Adjust the Custom HTML
Copy the SDK Script below and paste it into the Custom HTML field within the Settings panel in the Ceros Studio. Press OK to finish and close the panel.
<script
id="ceros-sdk-personalisation-plugin"
data-default-name="add-your-default-value"
src="https://labs.ceros.com/sdk-plugins/personalization/main.js?v=2"
></script>
<style>
.custom-form {
width: 100%;
height: 100%;
}
#custom-user-name {
font-size: 50px;
font-family: adelle-sans, sans-serif;
font-style: normal;
font-weight: 700;
color: #000000
padding: 5px 50px;
text-align: center;
background-color: #FFFFFF;
border-radius: 100px;
outline: none;
width: 100%;
height: 100%;
}
textarea:focus, input:focus{
outline: none;
}
</style>
This SDK script has a configurable parameter:
• data-default-name - allows you to add a text value for the greeting textbox in case a user leaves the name input field empty. If no default value is provided, the plugin will print “There” as the default.
Form Styling for Input Field:
1. Width and height
• Width and height will be equal to the size of the embedded object in Studio
• For example, if you want the input field to have an increased width, then you would just increase the width of the embedded object in the studio.
2. Form Style Section
a. Font-size = the size you want the text to be in the input field
b. Font-family = the font family of the text in the input field
c. Font-style = property specifies the font style for a text. (Example = normal, italic)
d. Font-weight = property sets how thick or thin characters in text should be displayed. (Example: normal, bold, bolder, lighter)
e. Color = property specifies the text color.
f. Padding =creates extra space within an element
(Example padding: 10px 5px - top and bottom padding are 10px, and right and left padding is 5px)
g. Text-align = specifies the horizontal alignment of text in an element. (Example = left, right, center)
h. Background-color = property sets the background color of an element.
i. Border-radius = defines the radius of the element's corners. This will change the "roundness" of the input field box.
j. Outline = line drawn around elements, outside the borders, to make the element stand out
• none = there will be no line drawn around the input field box
• outline = 5px solid green (example)
- 5px - the width of the line
- solid - the style of the line (solid, dotted, dashed)
- green - the color of the line
Method 1: Populate a Text Box from an Input Field
1. Select the Embed Object tool in your toolbar.
2. Draw an embed object on your canvas to serve as your input field, then copy the code below and paste it into the Enter Embed Code field in the Design tab.
<form class="custom-form" onsubmit="return userNameFormSubmit()">
<input
id="custom-user-name"
name="custom-user-name"
type="text"
autocomplete="off"
value=""
/>
</form>
3. Create a submit button.
4. Create a hotspot over the button.
5. With this hotspot selected, open the SDK Panel.
6. In the second Enter Tag field beneath the SDK ID, type in the tag set-name then press Enter/Return to submit the tag.
7. Add blank text boxes throughout the experience where you want to display the input content. On each of these text boxes, open the SDK Panel and add the tag display-name.
Method 2: Populate a Text Box from URL Parameters
With this method, Each URL parameter used is a key-value pair. You can use URL parameters to display text in your Ceros experience.
For example: https://example.com?key=value&anotherkey=anothervalue
1. Create blank text boxes throughout the experience where you want the URL parameters to populate the text.
2. With your text box(es) selected, open the SDK Panel.
3. In the second Enter Tag field beneath the SDK ID, type in what your URL parameter will be (Example: firstname) then press Enter/Return to finish adding the tag.
See below how we've set up the URL parameter text boxes in our demo experience: (firstname, lastname)
Note: You can have multiple words and punctuation in the URL parameter value. However, there are a few reserved (forbidden) characters that you should not use ( &, %, and = ).
If you need to have multiple words in the URL parameter value, use %20 between each word in the URL.
Example URL: https://view.ceros.com/ceros-educate/personalization-plugin-demo/p/3?firstname=Test%20String&lastname=Smith
• For the text box tagged firstname, the text box value will populate as Test String
• For the text box tagged lastname, the text box value will populate as Smith
4 (Optional). You can add as many parameters to the URL to populate textboxes as you'd like. Just be sure to follow the above Method 2 substeps 1-3 for each text box you want to populate with a URL parameter.