Organizing your app
      Back to home
      1. Tutorials
      2. Create apps
      3. Organizing your app

      Creating links and navigations

      Let’s learn how to create advanced links and navigations with Choicely!

      You can add navigation to any element you like: text, pictures or buttons.

      In this guide, we'll show you three examples of links and navigations:

      1. Adding voting buttons to contestant profiles
      2. Adding a feed to your bottom navigation
      3. Using images as links

       

      1. Adding voting buttons to contestant profiles

      Let's go to the first example where we add a voting button to a contestant's profile.

      You can create profiles for your contestants or team members, and add buttons to contests where you can vote for them, for example. Note that you need to create the voting first, before you can link to it – click here to learn more about creating votes.

      Create each profile as their own article. Go to “Articles” (1A) and choose “Create Article” (1B) or pick an article from the list (1C).

      You can find some ready-made contestant profiles in app templates like Sports Team, Beauty Pageant and TV show app templates. You can also make your own article templates that you can use to make similar-looking contestant profiles.

      Articles may look different in the app, so test your app by scanning your QR code with the Choicely mobile app. Watch our “Preview app with QR code” tutorial to learn more.

      Now add a button to the profile (1D) and add a text to it (1E).

      To make it look more like a button, change the margin and corner radius in the “styles” section in the right menu (1F).

      Style the button as you like (1G).

      In the “main” section (1H) change the link to “custom” (1I) and click “set navigation”.

      Choose “contest” as the link’s type (1J).

      Choose your vote from the list (1K).

      2. Using images as links

      And now a second example: how to use images as links.

      You can also add navigation to an image. For example, let’s say you have an image that advertises your web shop. You can add navigation to it the same way you added it for the button.

      Go to an Article of your choice from “Articles” and pick one from the list.

      Drag an image element to the article (2A) and pick the image on the right side (2B). Below “Navigation settings”, click “custom” (2C) and “Set navigation” (2D).

      Choose where the navigation leads. For example, if you want to show a web view, or lead the app user to your website, choose “web” (2E).

      Finally, define the specifics of the navigation – in this case the web address, how the link is opened, and what kind of buttons you’d like the view to have (2F).

      3. Add a top right button to the main screen

      You can feature a button on the top right part of the main screen. This spot is most commonly saved for ecommerce stores, merchandise or ticketing, but you can use the button for anything.

      Go to the App Builder view by clicking “Apps” on the left hand side menu (3A), and select the app you’d like to edit (3B).

      Go to the “main screen” section on the left (3C), and navigate to “Toolbar” on the right (3D). Activate “Top right button” from the toggle (3E).

      Edit the button style settings (3F):

      • icon color
      • text color
      • icon
      • icon when it’s activated
      • text.

      Finally, add the link from “Set navigation” (3G).

      Choose the navigation type (3H).

      And finally, select content (3I & 3J).

       

      And that’s how it’s done!

      Now you know how to create links and navigations with Choicely!