Customizing your App Directory – Integry

6 min read.

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.meta.description}}: The description of the Directory deployment.
{{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.

4. cards

The “card” property contains detailed information about the cards you add to your directory. This is the information that you provide while adding a missing card, it appears as a single card in your directory.

{{card.product_info}}: Contains card’s product information.
{{card.product.icon_url}}: The URL of the card’s icon.
{{card.product.name}}: The name of the card.
{{card.product.category}}: The category of the card.
{{card.product.description}}: The description of the card.
{{card.product.action_url}}: The URL to be redirected to upon clicking the Edit or Setup button.
{{card.product.images}: An array of images to display on the carousel.
{{card.product.image_url}}: The URL of each image in the array.
{{card.product.website_link}}: The URL of the app’s website.
{{card.product.app_documentation_link}}: The URL to app’s documentation.
{{card.product.privacy_policy_url}}: The URL to app’s privacy policy.
{{card.product.terms_and_conditions_url}}: The URL to app’s terms and conditions.
{{card.product.long_description}}: The long description shown below the carousel.
{{card.product.tags}}: The tags displayed below the description of the card.

5. templates

The “template” property contains detailed information about the templates you add to your directory. This is the information that you provide while adding a template.

{{template.product_info}}: Contains template’s product information.
{{template.product.icon_url}: The URL of the template’s icon.
{{template.product.name}}: The name of the template.
{{template.product.category}}: The category of the template.
{{template.product.description}}: The description of the template.
{{template.product.action_url}}: The URL to be redirected upon clicking the Edit or Setup button.
{{template.product.images}}: An array of images to display on the carousel.
{{template.product.images_url}}: The URL of each image in the array.
{{template.product.website_link}}: The URL of the app’s website.
{{template.product.app_documentation_link}}: The URL to the app’s documentation.
{{template.product.privacy_policy_url}}: The URL to the app’s privacy policy.
{{template.product.terms_and_conditions_url}}: The URL to app’s terms and conditions.
{{template.product.long_description}}: The long description shown below the carousel.
{{template.product.tags}}: The tags displayed below the description of the template.
{{template.product.button_url}}: URL of the Setup or Edit button.

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.