Games
      Back to home
      1. The Komo Knowledge Base
      2. Engagement Hub
      3. Games

      Picker Card

      Select and assign items to a position on an image.

      Contents: 

      What is it?

      The Picker allows users to select and create their dream sports team, burger of the month, new cocktail and many more!

       

      See it in action

      Watch it come to life

      Coming soon!

       


      How do I build one?

       


      Step 1: Add a Picker card to your Hub

      • Navigate to your Engagement Hub. 
      • Once there, click Add content, from here select Games, and then Picker. 
      • Provide an internal name for the card.
      • You will then see your new card has been added to your Hub.

      Step 2: Add a Cover image 

      • Clicking on the Picker will open the editing module. 
      • (1) You have the option to give your Picker a title or (6) disable the title bar. 
      • (2) Here you add your Cover image.
      • (3) Alter the colour and copy on the call-to-action bar or (7) you can disable the bar here.

      Note: if you disable the CTA, we recommend adding a call-to-action on the cover image to inform users they need to click on the image to enter.

      • (4) You can add an author tag by displaying the brand or person who's responsible for the card content.
      • (5) Add a description to the card.

      Step 3: Formation and picker settings

      • (1) Click here to edit the positions and formations. 

      • (A) Give the formation a name.  
      • (B) Add Pickers to the image according to your formation.

        • (a) Select the picker to move the position. When you move the picker, (b) the X and Y axis will update according to its position on the image.
        • (c) You can adjust the size of the picker. 
          Note: we have kept the aspect ratio lock to ensure the image is symmetrical.
        • (d) Here you can name the picker position e.g. defender. 
        • (e) Here you can choose if you want a certain position to be a required pick or optional.
        • (f) Edit the placeholder picker image here.
        • (g) You can add and assign tags e.g. midfielder and goalkeeper under various pickers to filter through the total pickers. 
        • (h) You can delete or clone the picker here.  
      • (C) Here you can upload a background image for this formation to replace the default soccer field.
      • (D) Here is where you can edit the picker label settings.

        • (a) Here you can change the picker label placement.
        • (b) Alter the text colour and background colour of the picker label.
        • (c) + (d) Alter the width and height of the picker label.
        • (e) Change the label text alignment here.
        • (f) Here you can change the font size of the picker label.
        • (g) Here you have the opportunity to shorten the label of the picker e.g. L. Messi or Lionel M.
      • (E) Here you can delete or clone the formation. 
      • (F) Click here to add additional formations.

      Step 4: Edit the Modal setting

      • The modal settings refers to everything your user will see whilst engaging in the game. 
      • (1) You can edit the modal header settings and upload your logo/imagery here.
      • (2) You can add the title here.
      • (3) Here you can alter the colour and copy of the call-to-action bar.
      • (4) Here you can manage the settings of your Picker.

      • (A) Here, you can manage your items and tags. 

        • Click on Manage items, select Manage tags and click on Add tag.
        • (A) Add all your tags e.g. midfielder and attacker to allow items to be filtered by tags.

      Note: we highly recommend doing a bulk upload as it will save you a lot of time from manually uploading!

        • After you have clicked on Bulk upload...
        • (A) Here is where you'll upload the file in CSV, XLSX or ZIP format.
        • (B) Enter the title of the column header in your CSV to extract the picker's names from.
        • (C) Enter the title of the column header in your CSV to extract the tags from.
        • (D) Enter the title of the column header in your CSV to extract the bio from.
        • (E) Enter the title of the column header in your CSV to extract the video from.
          Note: You will need to copy and paste the video URL under this column in the excel file.
        • (F) Enter the title of the column header in your CSV to extract the statistics from.
        • (G) Enter the title of the column header in your CSV to extract the images from.
          Note: The name of the images need to be entered in the excel file next to the corresponding picker. The file with the excel file and images need to be uploaded as a ZIP file.
        • (H) Here you can download a template of what the ZIP file should look like/contain.
        • (I) Download a template of what the CSV/XLSX file should look like.

       

        • After you have clicked on Add item,
        • (A) Upload an image for the picker item.
        • (B) Name the picker item e.g. Lionel Messi.
        • (C) Select the tags relevant to the picker item.
        • (D) Add a item cover image.
          Note:           This image appears above the picker's information and content.
        • (E) Add a background colour to the picker's information and content.
        • (F) Click on item view options to add additional content to the picker. E.g. Stats, a video and a description/bio. 

      • (B) You can disable this button to hide the progress bar above the call-to-action. 
      • (C) You can disable the item labels under the picker here.
      • (D) Here you can upload the default picker background image that will be added to each new formation.
      • (E) Upload a default picker image.
      • (F) Upload an item default image here for items that you may not have an image for.
      • (G) Here you can add a placeholder text that will appear in the search bar. 
      • (H) Here you can choose to preference the details image. This means that when searching for an item, a user will see the details image instead of the items image. 

      • (5) Edit the styling settings for the modal.

      • (A) Edit the colour of the Picker background and text. 
      • (B) Here you upload a background image that sits behind the formations.


      Step 5: Set up your Result screen

      • (1) Here you can alter the colour and copy of the Share call-to-action or (4) toggle this off.
      • (2) Here you can alter the colour and copy of the Download call-to-action
      • or (5) toggle this off.
      • (3) Here you can alter the colour and copy of the Play again call-to-action
      • or (6) toggle this off.
      • (7) Toggle this on to show users which items are most popular! Make sure you update the styling of this if you decide to switch it on! 

       

      Step 6: Set up your data capture (Optional) 

      Whilst adding competition to your Picker is recommended to collect data, it is not always required and can be used purely as an engagement piece. 

      Group 1660

       

      Step 7: Publish your card

      Once you've completed all of these steps, played around with your card, and are happy with all the aspects of your card, it's time to get your card live!

      • (1) Publish your card manually and instantly for the world to see. 
      • (2) Schedule your card to be published and unpublished at set dates and times. 
      • (3) Click on ... to Preview and interact with the card on the front end from a user's perspective before publishing it. See how to test your card here.

      Note: All competition entries will be recorded and will impact the card analytics.

       

      "Go live" checklist

      Ready to go live with your Picker? We recommend reviewing the following list before launching and double-checking if you have:

      • All images uploaded are the correct dimensions. Export image files in 2x to ensure none of the images appear pixelated.
      • Ensure you have uploaded all your picking items with the correct name, relevant tags and imagery.
      • You have named all pickers with the relevant positions or labels so users are aware of the positions they are filling.
      • If you have different formations, ensure each formation is labelled.
      • You have altered the modal settings to your branding by adding a background, changing the text colour and the picker default image.
      • Make sure you have the correct pickers marked as required. This is so users will pick an item for that position and not leave it blank.
      • Each picker is the same size - width and height.
      • You have edited the result screen with the call-to-action bars in line with your brand colours.
      • If you have a competition and a data capture attached:
        • All your communications (Registration, Winner/s, Everybody Else) are fully set up and ready to send.
        • You have hyperlinked your T&C's to the opt-in-field, which is created in the data capture section of the settings tab.
        • Ensure your Prizes and the awarding rules are set up correctly. If you have Live prize awarding as your award, make sure you enable this feature, you can see how to do so here.
        • If you are using coupons, make sure the coupons created are set up correctly. Check the coupon limits are set, the copy for each screen is right and you have linked the appropriate coupons to your communications.


      Then you're ready to go live!

       

      Promotion

      Group 1635

      FAQ

      Can I create different formations for different sports in one Picker?
      Yes, you can. If you add a new formation, you have the option to change the formation background image to your desired sport and then add pickers to the position of your choice.

      We recommend naming each of your formations to the appropriate sport to distinguish between them all.

       

      Is it possible to have a bench/sub but they don't have to be selected by a user?
      You can make some pickers optional by selecting the picker and then toggle off the Required option as seen here in Step 3(1e).

       

      Can you use the Picker for other than sports?
      Definitely! The Picker is a card that allows users select and assign items on an image. You can use the Picker and allow users to create their ultimate burger by giving them the opportunity to select the fillings within 2 buns. Get users to create their own cocktail by selecting their preferred mixes. There are no limitations to this card!

       

      How do I bulk upload with images?
      You will need to create a .CSV file with the names of the picking items, relevant tags associated to each picking item and then you will need to copy the image file name and paste it into a separate column next to the name and tags e.g. Lionel Messi, Striker, lionel_messi.png. You can download a template as seen here.

       

      Top tips

        COMING SOON


         

        One last note: 

        At Komo, we pride ourselves on not only the results our clients achieve with us but the service they receive whilst bringing their Hub's to life. 

        If you ever have any questions about an upcoming activation, how you can best utilise Komo to get the best possible outcome, or just a general query, please don't hesitate to reach out to your Customer Success Specialist or email us at support@komo.tech

         

        We also love your feedback, so please let us know if this article helped you by selecting from the options below. 

         

        Louis Docherty 

        Head of Customer Success