SUMMARY
Step 1: Course mode
Define the style of your operation
Step 2: Customizing your pages
Customizing the Image element
The Button element
The Text element
The HTML element
The Timer element
The Share element
The Pop-in element
Step 3: Previewing the game
Step 1: Course mode
In this step, you will need to define the pages that will make up your game course.
To do this, use the menu on the left to drag the page(s) into the course.
The arrows help you identify the path. They are visible when button redirects are configured.
Certain types of pages are available for you to add to your path:
Simple page
Winning page (page to use during a winning moment)
Lost page (page to use during a winning moment; you can only add one lost page to your game path)
Teaser page (this is an independent page*. This announcement page is displayed if the game is online before the official launch date)
End of operation page (this is an independent page*. This page is displayed when the game is over)
Maintenance page (this is an independent page*. This page is displayed when the game is temporarily unavailable to participants)
Double opt-in page (this is a separate page*. This page is displayed when you set up double opt-in confirmation).
*def: A separate page is a page that is not part of the game path when it goes live. It is a page that is displayed outside of the game periods.
📢 The first page of your journey will be tagged as the “Start of the journey” page. This is the first page that participants will see. It cannot be deleted or duplicated. It can contain any elements you want, such as text, buttons, forms, etc.
Actions can be performed on the page: you can edit, duplicate, and delete the page, and access the page settings.
When you click on the button with the cogwheel icon, a tab opens on the right.
On this tab, you can rename the page title and modify the page dimensions, i.e., the height and width in desktop and mobile versions.
You can add background images for both platform formats.
Define the style of your operation
When building your game's course, you can determine the style of your operation.
This option allows you to define the appearance of your elements in advance and will apply to every element installed in your game.
You can define the color of your buttons, text, and error messages, define the typography of your text, the size of your pages on desktop and mobile, as well as the background images for the computer and mobile formats, or add a color that will be applied to all your pages for both formats.
You can access the style at any time when customizing pages
Once you have defined the user path for your operation, you can design the customization of your pages.
Step 2: Customizing your pages
By clicking on the edit button, you will access the customization step for the selected page.
From the menu on the left, you will find the elements that you can add to your page:
The Text element
The Image element
The Form element
The Button element
The HTML element
The Timer element
The Prize Image element (the image is only visible when the game is online and on the winning pages)
The Prize code element (codes must be imported when configuring prizes; this element allows the code to be displayed in barcode or QR code format)
The Share element, which allows the game to be shared on social networks such as Messenger, Instagram, WhatsApp, etc.
The pop-in element
The Captcha element can only be used once during the entire operation. Tip: Add it to the first page of the game or to the page containing the form.
Tip💡The Google Captcha element can only be used once during the entire operation. We recommend adding it to the first page of the game or to the page containing the form.
In addition, you can select all the elements on the page in order to define the space between them.
You will have quick access to the list of items on your page, allowing you to manage them quickly. In other words, you can edit, delete, and also manage the “level” of the item (control the order in which items are superimposed, foreground or background).
As well as in the clipboard where all copied items are stored, when you paste an item onto a page, it retains all of its formatting and position on the page.
↓ Action of copying an item
↓ The copied item is located on the clipboard.
From the menu bar at the top of your screen, you can easily return to the course mode and change the style of your operation. You will also have access to footer customization. You will find a drop-down list that allows you to easily switch to another page in your course. In addition, you can quickly switch between desktop and mobile versions. Access to page settings will be available from the page customization menu.
📢 You can customize the footer that appears on all pages of your campaign. It must be configured on desktop and mobile devices. Changes will apply to all pages. You can insert links, but certain links such as cookies, terms and conditions, legal notices, and privacy policy can only be added once in the footer. Links to files imported into the legal section will be automatically included when configuring the footer.
Tip 💡 When customizing desktop and mobile formats, you can easily apply the appearance of one version to the other with a single click. This will save you from having to customize the elements again.
It is now possible to apply the properties of all elements from one format to another format.
For example, when you are in desktop format, click the button to apply the mobile style to the desktop format elements.
1) Customizing the Image element
When adding the element, you can customize it by importing an image from the Kimple library or from an external URL. You can change its position on the page and its size.
💡Tip: If you do not want the element to be visible on the format, you can disable its display.
💡Tip If you lock the image ratio, the image will be locked so that its width and height proportions are maintained. For example, an image measuring 200x200 will remain in this format even if it is resized. This prevents distortion.
If you unlock the ratio, it will be released and you can change the width and height of the image independently. For example, you can stretch the image widthwise without changing the height. This can be useful for adapting to specific formats, but the image may appear distorted.
2) The button element
You can define the type of redirection for the button: to a page, to an external URL, to another operation, or to an instant win redirection.
Don't forget to configure a redirection for your buttons!
📢 In an instant win game, it is essential to activate the instant win feature, which will redirect the participant to the win or lose page.
The instant win redirect must be configured on the button on the page before the win and loss pages, or on the instant win game if there is no intermediate page between the game page and the win/loss pages.
There are two options available for the appearance of your button:
Classic
You can customize different states of the button:
Normal
On hover (mouse)
On click
In terms of customization, you can change the background color of the button, define an outline, add a rounded corner, and add a drop shadow.
💡Tip: You can copy the style of the “normal” state to the ‘hover’ and “click” states with a single click. If necessary, you can reset its appearance.
Image
You can define a visual for the button in its normal state and when hovering over it.
Of course, you have access to display features and can add animations common to some of the elements.
3) Text element
To edit the text, click on the area. The editing bar will appear, allowing you to customize the text. You can change the font, size, color, and alignment (right, center, left), apply typographical rules and icons to your text, manage line spacing, and add hyperlinks. In addition, you can add variables from a text element to customize the page, for example to display the participant's first name. Custom variables can only be added to pages that follow the main form.
💡Tip: You can apply custom fonts to text. To do this, you need to add the fonts to your library in the “Fonts” section.
4) The HTML element
To insert HTML code, simply click on the icon represented by the tags.
A code editor will open where you can copy your entire HTML code.
If you want the code to activate only when statistical cookies are accepted, you can enable the associated option.
5) The timer element
You can set the timer duration in minutes or seconds. If you set the timer in minutes, you can enable its display in seconds and define a redirect page for when the time has elapsed.
To customize the timer, you can choose between a counter or circular display.
For circular displays, you can configure the color of the circle and its background.
6) The Share element
Allows you to create a button that redirects to different social networks:
Messenger - add the URL
Instagram - add the URL and you can configure a sharing description
WhatsApp - add the URL and you can configure a sharing description
Facebook - add the URL and you can configure a share description, title, and image.
X - add the URL and you can configure a sharing description
Regarding the appearance of the button, you can configure it in classic form by defining its customization or in image form.
📢 Share buttons such as Instagram, Messenger, and WhatsApp can only be used on mobile devices. We therefore recommend hiding these buttons on the desktop version.
💡Tip Track your shared URLs to identify the media used by your participants to access the games. Simply insert a tracking UTM at the end of each link.
7) The Pop-in element
The pop-in button allows you to display text content within your page in the form of a pop-in.
When editing, you can add a title and text content. Just like in a text editor, you are free to adjust the font, size, and color of the text, as well as the color of the pop-in background.
↓ Pop-in editor
↓ Final result after editing via game preview
Step 3: Previewing the game
At any point during setup, you can preview your game.
From the preview, you have quick access to the code editor where you can add CSS and JS code to further customize your design if needed.
