Landing Page

The Landing Page is one of the services included as part of ISoc.link, provided by Halaltruism. It is a home page that users can quickly visit to see upcoming events, prayer times, donation links, social media links and more. It works as a "mini website" and can have multiple pages, but it is recommended to keep content short and concise on the Landing Page if your ISoc already has a website, and have it as a gateway to external sources, where more in-depth content is hosted. If your ISoc does not have a website, then the Landing Page can be used as one, and although it is more limited than a traditional website, it is easier to edit and use. The Landing Page can have text, buttons, images, videos, countdown timers, and even a form to receive payment. Feel free to use the Landing Page for what best suits your ISoc's needs.

• Accessing the Landing Page
• Accessing the Landing Page Editor
• Editing the Landing Page
• Adding a Live Prayer Timetable to the Landing Page
• Adding the Landing Page as an App

Accessing the Landing Page

Your ISoc's Landing Page can be accessed at isn.isoc.link where isn is your ISoc Short Name. This is a short and easy to remember link that can be shared with your membership to direct them to your Landing Page, where you can post about upcoming events, prayer times, donation links, and more.

Please put your Landing Page link as your primary Instagram bio link. You will notice that the URL when you are on the Landing Page is in the form isn.page.isoc.link but you only need to share the shorter and easier to remember link isn.isoc.link which redirects to this page.

Accessing the Landing Page Editor

To access the editor for your ISoc's landing page, go to isn.landing.isoc.link where isn is your ISoc Short Name, and log into Taplink with your ISoc's provided credentials. The Landing Page editor link is an internal link, and should only be shared with authorised committee members.

Editing the Landing Page

The editor uses Taplink to build the Landing Page, and a comprehensive tutorial on how to create your page can be found here. It explains how to make the page as either a link in bio page or a landing page, and you are free to edit your page as you wish; we only recommend that you keep it updated and have the link in your Instagram bio so your membership can have a quick and easy way to stay up to date with your ISoc.

Basically, the editor uses a blocks system, where different types of blocks can be added, edited, and moved around. Feel free to play around with it and explore all the different blocks. Some of the most useful blocks include:

• Avatar: A profile picture that can be your ISoc's logo. We recommend keeping this at the top so visitors can easily identify your Landing Page.
• Link: A button that can link to a specified URL, such as a fundraiser page or prayer times website.
• Text: A way to have text on your landing page.
• Image Carousel: Insert an image or set of images; for example, posters for events.
• Social Networks: Social media buttons to have links to all your ISoc's social medias and website in one place. We recommend keeping this near the top or at the bottom of the page.
• Delimiter: To help divide your page into organised sections.
• Timer: A real-time timer that counts down to a specified date and time; for example, for an upcoming event.
• Map: If you want to mark important locations on a map, such as a prayer room.
• FAQ: Insert some frequently asked questions and their answers.
• Page: Insert a whole other page if you ran out of space or want to make things more organised; for example, having a page just about charity or Ramadan.

You can also change the design of your Landing Page by clicking the Design tab at the top. Here you can check out a range of templates with different colours, fonts, button shapes, and backgrounds, with some that are animated. You can even create your own design from scratch, if you want to make it look even better or keep it consistent with your ISoc's theme.

The possibilities are endless with the design and editing of the Landing Page, so use it to your ISoc's advantage and give your membership the quickest way to access all they need. Please don't hesitate to contact Halaltruism if you have any questions or need further support.

Adding a Live Prayer Timetable to the Landing Page

Taplink has the functionality to add widgets using custom HTML code. This allows you to embed externally made widgets or pages into your landing page. Using this method, live prayer timetables can be added to the landing page. For the instructions on this page, we used the widgets provided by Islamic Finder, however you can use any other provider that has HTML embeddable code.

Instructions

1. On the Taplink Landing Page Editor, click Add block.
2. Click HTML code.
3. Paste the following code:

   <div style="text-align:center;display:flex;height:320px;">
   <iframe id="myFrame" title="prayerWidget" class="widget-m-top" style="height:100%; width:100%; border-radius:25px; font-size:20px;" scrolling="no" src="https://www.islamicfinder.org/prayer-widget/#######/1/1/0"> </iframe>
   </div>

4. In a new tab, open Islamic Finder Widgets.
5. In the search bar at the top, search your city and click on it.
6. Scroll down to the fourth widget called City prayer times.
7. Click Code.
8. You can make any additional adjustments here, such as calculation method.
9. Copy just the URL in the code after the src="" attribute in the quotation marks. It should have a form similar to https://www.islamicfinder.org/prayer-widget/#######/1/1/0
10. Replace the Islamic Finder URL in src="" in the HTML code with your new URL to set it to your city and chosen settings.
11. Click Save changes.

You can make further adjustments to the code to make the widget fit in more with your landing page's design. For example, you can change the size of the border-radius to match with the button rounding you set in the design section of your landing page.

Adding the Landing Page as an App

Users can add your ISoc.link landing page as an app on the home screen of phone or tablet devices, allowing it to be easily accessible and function as an app rather than a website.

Changing the App Icon

The app icon is generated from the image used for the avatar block. Click on your avatar block, or add one, and then upload a suitable image. We recommend a high quality square logo without any transparency. The square shape is to accommodate different app shapes across devices, and transparent backgrounds can get affected by the light/dark mode settings of devices, causing the icon to display improperly.

Changing the App Name

On iPhone, the app name is chosen by the user when they add it. This has been reflected in the instructions below.

On Android, the name of the app is whatever the page title is. You can edit this in your editor by going to the Settings tab, scrolling down to the SEO Settings section and editing the Page title, then clicking Save changes.

Adding a Back Button & Navigation

Depending on your device's browser, there might not be a back button when users navigate the landing page app. We recommend adding the avatar block to the top of every page, as clicking it takes the user back to the home page. You can also add a navigation menu by clicking on the down arrow next to Publish and then clicking the Navigation Menu tab.

Instructions to add the Landing Page as an App

You can share the following instructions with your members so they can add your landing page as an app on the phone devices. Please copy these instructions somewhere else, ideally as a page in your landing page. Do not share this page with your members.

iPhone (Safari or Chrome)

1. Go to the home page of your landing page
2. Click the share button (usually located in the centre of the bottom of the screen or top right)
3. Scroll down and click Add to Home Screen
4. Change the name to something suitable, such as the ISoc's name
5. Click Add

Android (Chrome or Samsung Internet)

1. Go to the home page of your landing page
2. Click the menu button (three dots or hamburger icon)
3. Scroll down and click Add to Home Screen
4. Click Install on the Install App popup