Skip to main content

Customizing your App Directory

Shayan
  • Updated

The App Directory is a public listing of all apps that your users can create integrations with. Integry hosts your App Directory on a subdomain of your choosing. All the details about this can be found here.

Depending upon your pricing plan, you can customize the look and feel of your App Directory. The branding, colors, images, links, etc., all are part of your App Directory’s appearance that you can modify. Here is the default look of the App Directory with Integry branding:

You can set up the appearance of your App Directory when you are configuring it as shown below.

At the bottom of this appearance section, you can see an Advanced Options button as shown below.

Clicking on it will reveal additional customization options:

As shown in the above image, you can customize the entire HTML of your App Directory by downloading and modifying the default code, and then uploading it back as your own HTML. This essentially makes you in charge of the complete design and look of your App Directory that your users will see.

Here is a sample of the default HTML code that you can download for the App Directory:

{% extends 'layout.html.twig' %}

{% block body %}


    <header class="apps-marketplace-section-1">

         <div class="main-section yellow" style="background: radial-gradient(circle,#f8fbff 0,#edf6ff 36.8%,#ecf5ff 100%);">

            <!--desktop menu-->

            <div id="destop-menu">

               <nav class="navbar navbar-expand-lg nav-integry navbar-light" style="margin-bottom: 2rem;">

                  <a class="navbar-brand" href="{{directory.meta.url}}">

                     <img alt="Logo" class="integry-logo" src="{{directory.meta.icon_url}}" style="width: 50px; height: auto;">

                  </a>

                  <div class="collapse navbar-collapse" id="navbartoggle">

                        <div class="mx-auto order-0">

                        </div>

                        <div class="button-wrap my-2 my-lg-0">

                           <a href="/" class="btn btn-outline-light mr-4">Browse Integrations</a>

                           {{directory.links.logout_link | raw}}

                        </div>

                  </div>

               </nav>

            </div> 

The HTML code uses Twig variables to fetch the values of the appearance properties. Each layout attribute that you provide a value for while configuring your Directory deployment has its own Twig variable. You can use these variables to easily edit and customize the layout of your App Directory.

 

Twig variables for the App Directory’s layout

Here are all the available Twig variables that translate into the UI elements of your App Directory. You can use these anywhere in the HTML code to modify the look.

Directory

The main parent variable used in the HTML is `Directory`. All the other variables start with this one. ‘Directory’ variable further consists of the following sub-variables.

  1. user

    The ‘user’ property contains user-specific data. This is the user who is creating the integration. The following variables can be used to access different user properties.

    {{directory.user.user_id}}: The ID of the user in your application.
    {{directory.user.user_name}}: The username of the user in your application (this be null if it is not provided by your app to our SDK).
    {{directory.user.user_profile_pic}}: The user’s profile picture in your application (this will also be null if it was not provided by your app to the SDK).

  2. meta

    The ‘meta’ property contains the overall deployment information. This is the information that you provide in the configuration of your App Directory, most of which appears in your Directory’s homepage.

    • {{directory.meta.name}}: The name of Directory deployment
    • {{directory.meta.description}}: The description of the Directory deployment
    • {{directory.meta.icon_url}}: The URL of the deployment’s favicon.
    • {{directory.meta.url}}: The subdomain URL of your directory, like mysaas.integry.io.
    • {{directory.meta.color}}: The background color of the header section in your Directory.
    • {{directory.meta.title}}: The title to be used in the header of your Directory.
    • {{directory.meta.homepage_url}}: The home page URL of your app. This will be linked with the Home button appearing in the header of your directory.
    • {{directory.meta.login_url}}: The URL of your app’s login page. The users will be redirected to this URL if they are not already logged in.
    • {{directory.meta.background_color}}: The background color of the body section of your Directory.
    • {{directory.meta.text_color}}: The overall text color in your Directory.
    • {{directory.meta.facebook_url}}: The Facebook URL that you provide in the social media links section.
    • {{directory.meta.twitter_url}}: The Twitter URL that you provide in the social media links section.
    • {{directory.meta.linkedin_url}}: The LinkedIn URL that you provide in the social media links section.
    • {{directory.meta.header_img_url}}: The header image that can be used in any of your Directory web pages.
    • {{directory.meta.logo_url}}: The custom logo URL that you provide for your app.
    • {{directory.meta.terms_url}}: The link to your app's Terms and Conditions page.
    • {{directory.meta.privacy_url}}: The link to your app's Privacy Policy page.

  3. links

    These contain some external links that are generated by Integry through cookies. Currently, there is only one property here.

    • {{directory.links.logout_link}}: The logout link if the user is already logged in. 

Additional text

To customize the actual look and feel of the integrations, please consult the SDK documentation. The App Directory internally uses the SDK to display Integration Templates.