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
The Shapes element
The Captcha Element
The Email Invitation 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 email invitation element, which allows you to send an email to a friend to invite them to play the game
The sharing element, which allows you to share the game on social media platforms such as Messenger, Instagram, WhatsApp, etc.
The Audio Player Element
Prize-related elements: Prize image (the image is visible only when the game is live and on the winning pages) & Code (codes must be imported when configuring prizes; this element displays the code as a barcode or QR code)
Shape elements: Square & Circle
Elements for different types of buttons: Pop-in, Copy/Paste, CAPTCHA (can only be used once during the entire campaign. Tip: Add this to the game’s first page or to the page containing the form) and OAuth (allows users to access a game through other apps, such as Google or Facebook, rather than filling out a registration form.)
Elements related to game: Timer, score...
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.
NEW FEATURES*
You now have access to the list of items saved as favorites. You can save items so you can easily reuse them in other operations. A favorite item can be added directly to an operation: it is then recreated on the current page with the previously saved configuration.
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 set the button’s redirect type to a page, an external URL, another action, or an “instant win” or “replay” redirect.
NEW FEATURES*
It is now possible to configure multiple temporary redirects for a single button based on one or more validity periods.
When a participant clicks the button, they are automatically redirected to the destination corresponding to the current validity period. Outside of these periods, the default redirect is applied.
To use this feature, a default redirect is required. You can then add as many temporary redirects as needed and set their validity periods. The periods cannot overlap.
This feature is available for simple buttons, form buttons, as well as quizzes and personality tests (page-based redirects only).
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
8) The Shapes Element
The Shapes elements let you easily add graphical elements to your operations to structure your pages and enhance their presentation, without having to use images directly from the editor.
Once you've selected a square or round shape, you can customize its appearance. You'll be able to set the background color and opacity. These settings apply to each instance of the element.You can also add a border, set rounded corners, apply a drop shadow, an inner shadow, or a blur effect to tailor the shape to your brand identity.
9) The Captcha Element
The Captcha element helps limit the presence of robots or bots in your game. It can only be added once per transaction. We recommend placing it on the game’s first page or on the page containing the form.
When configuring it, you can choose between two types of Captcha: reCAPTCHA, which is linked to Google services, or Altcha.
reCAPTCHA is available only if it is enabled on your account and included in your subscription. To comply with GDPR regulations, enabling the cookie banner is strongly recommended.
You can customize its appearance by choosing a theme (light or dark) and a format (invisible, compact, or normal). You can also modify the error message and customize the font, font size, text color, and background color.
With Altcha, you can customize various elements of the widget, including the labels and messages displayed during different stages: loading, verification, verification in progress, expiration, etc. You can also modify its appearance by customizing the color, width, and border radius, as well as the error message.
10) The Email Invitation Element
The Email Invitation element allows participants to invite their friends to join the game. To do this, you’ll need to configure and customize the email that will be sent to the invited people.
When you add the element, an input field and a send button appear on the page. You can add multiple fields to invite multiple friends, set the maximum number of emails per participant, and customize labels, placeholders, and error and success messages.
Just like with a form, you can also customize the appearance of the entire element: spacing, fields, labels, placeholders, and the button.
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.
