Did you know that Slack can be programmed to unfurl your website links and add rich information to them? Not only will it add rich information, but it will also drive more conversions. This Thought will show you exactly how to do it and how to replicate it. Let's take a dive.

I know you know how to use Open Graph tags to create rich previews. That's awesome. You can use og:title, og:description and og:image to create a preview like the one below.

Let's throw in some custom label meta tags in our page's <head> and see what happens.

That's nice. Not only does the reader have a good look of your preview, but they also get some insights in the unfurl about the reading time and category of the article. This makes the link more tappable and yields great conversions.

The Code Cakery

A recipe on making richer link unfurls on Slack.

Instagram has over 400 million active users, which is more than that of Twitter. This presents a huge opportunity for brands to market themselves through the visual platform. If you haven't been taking advantage of it, you should!

Those who know me know that I am obsessed with crafting delightful user experiences. As much as value this feature holds for marketers, it also vouches for a pleasing UX. This blog is a rundown of how developers can let users share content on Instagram using deep links. I am assuming you have a new SwiftUI project set up. Let's get coding.

Ollivanders is a wand shop founded in 382 B.C, located in Diagon Alley South Side in London, England. It is owned by the Ollivander family, widely acknowledged to be the best wandmakers in Great Britain. As bizarre as it may sound, this Harry Potter Wand Shop wants the wizards to easily share amazing stickers of their wands across Instagram – in the hope to gain massive virality.

To start with, let's create a model that fits this demo. I'd call it Wand. Each wand will have a name and stickerAsset.

struct Wand {
  let name: String
  let stickerAsset: String
}

While we are at it, we shall also create some mock data on wands. Here are some assets that we will be using in this demo – best to drag them into your Assets.xcassets right away.

fileprivate let wands: [Wand] = [
  Wand(name: "Dumbledore's Wand", stickerAsset: "dumbledore"),
  Wand(name: "Potter's Wand", stickerAsset: "potter"),
  Wand(name: "Granger's Wand", stickerAsset: "granger")
]

I'll also create a NavigationView and embed a List in it to have some barebones of UI. Nothing fancy.

struct ContentView: View {
  var body: some View {
	NavigationView {
		List(wands, id: \.name){ wand in
		  Text(wand.name)
	    }
		.navigationBarTitle(Text("Ollivanders"), displayMode: .inline)
	}
  }
}

Not bad, SwiftUI. Now that we have all this done, let's get to the real thing. We shall write some functions to implement deep linking to Instagram Stories.

struct ContentView: View {
    
    func shareToInstagramStories(
        stickerImage: String,
        backgroundTopColor: String = "#7F0909",
        backgroundBottomColor: String = "#303030"
    ) {
        // 1. Get a data object of our UIImage...
        let stickerImageData = UIImage(named: stickerImage)?.pngData()
        
        // 2. Verify if we are able to open instagram-stories URL schema.
        // If we are able to, let's add our Sticker image to UIPasteboard.

        let urlScheme = URL(string: "instagram-stories://share?source_application=\(Bundle.main.bundleIdentifier ?? "")")
        
        if let urlScheme = urlScheme {
            if UIApplication.shared.canOpenURL(urlScheme) {
                
                var pasteboardItems: [[String : Any]]? = nil
                if let stickerImageData = stickerImageData {
                    pasteboardItems = [
                        [
                            "com.instagram.sharedSticker.stickerImage": stickerImageData,
                            "com.instagram.sharedSticker.backgroundTopColor": backgroundTopColor,
                            "com.instagram.sharedSticker.backgroundBottomColor": backgroundBottomColor
                        ]
                    ]
                }
                
                // We'll expire these pasteboard items in 5 minutes...
                let pasteboardOptions = [
                    UIPasteboard.OptionsKey.expirationDate: Date().addingTimeInterval(60 * 5)
                ]
                
                if let pasteboardItems = pasteboardItems {
                    UIPasteboard.general.setItems(pasteboardItems, options: pasteboardOptions)
                }
                
                // 3. Try opening the URL...
                UIApplication.shared.open(urlScheme, options: [:], completionHandler: nil)
            } else {
                // App may not be installed. Handle those errors here...
                print("Something went wrong. Maybe Instagram is not installed on this device?")
            }
        }
    }
    
    var body: some View {
        NavigationView {
            List(wands, id: \.name){ wand in
                Text(wand.name).onTapGesture {
                    shareToInstagramStories(stickerImage: wand.stickerAsset)
                }
            }
            .navigationBarTitle(Text("Ollivanders"), displayMode: .inline)
        }
    }
}

We check if we can open the instagram-stories URL scheme with our application

If we can, we move on to create items for UIPasteboard

Once we have those items on UIPasteboard, we go further and open the URL

If all goes well, Instagram will take things from here and make a sticker out of the asset image.

We will also add things in Info.plist to let iOS know it is okay for us to open the instagram-stories URL scheme.

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>instagram-stories</string>
</array>

Phew. That's it. Let's see this badass in action.

That's pretty much there is to sharing to Instagram Stories. In production, you can get the image with an API call. This image can be generated at the back using Puppeteer or Jimp or any other tool at your disposal. You can also generate the image on-device using CGContext. I'll leave those details to you.

A rundown on posting your app's content to Instagram Stories.

Sharing to Instagram Stories – a definitive guide

Walk into a room full of Web developers (which is rare – web devs don’t get along, mainly because they are MEAN. *pun intended*) and you will likely be bombarded with mentions of Node.js, Angular or React.

All these modern Web technologies are built upon the basic structure of MVC architectural pattern. Lettuce taco about it *huehuehue*.

Model: Structures your data in a reliable form and prepares it based on controller’s instructions

View: Displays data to user in easy-to-understand format, based on the user’s actions

Controller: Takes in user commands, sends commands to the model for data updates, sends instructions to view to update interface.

Let me draw MVC like one of my French girls.

It is finally Taco Tuesday, and you walk to the waitress. You finally catch a breathe and blurt out, “One Double Decker Chicken Supreme Taco with extra cheese, please!”

You are the user, and your taco order is the request. To you, the Double Decker Chicken Supreme Taco is your favourite taco, and you pretty reliably know that this will be an ultra spicy, will-regret-in-the-morning but worth-the-money taco.

To the waitress, the Double Decker Chicken Supreme Taco is merely a series of steps:

The waitress’s brain is the controller. As soon as you say the word “Double Decker Chicken Supreme Taco” in a language that they understand, the work begins. This work is similar in nature to making a Soft Taco or Fiery Taco, but uses distinct ingredients that will never be confused. This limited tool set is the model, and includes the following:

Finally, the finished taco that you gorge upon is the view. The view is built out of the limited options from the model, and arranged via the controller (that is, the waitress’s brain).

Here is how the same process plays out in a modern web app:

The user makes a request along a route, `let’s say /about.`

The controller receives this request and gives a specific set of orders that are related to that route. These instructions could be for the model to perform specific logic.

The model carries out the logic, pulls from a database and sends back a response based on the controller’s instructions.

The controller then passes this data to the view to update the user interface.

If you have been to a taco shop, then MVC ain’t that hard.

Ishan heads the Web team at Incredible and enjoys building things that live on the internet. He develops exceptional websites and web apps that provide intuitive, pixel-perfect user interfaces with efficient and modern backends.

Talking in the third person about himself makes him uncomfortable.

He graduated from SRMIST, Chennai in Jul, 2021 (He feels so old now). Ishan passed the torch on to his juniors at SRMKZILLA – the official Mozilla Campus Club of SRMIST where he used to break builds (especially on Fridays) with some really cool people. He also volunteered and lead everything software at Aaruush. He used to lead the Technical team at DSC SRM – powered by Google Developers where he worked on a wide variety of interesting and meaningful projects on a daily basis.

TL;DR: He ardours software and toils to craft beautiful, beautiful products that don't come with manuals.

Ishan wants a doggo but is unlikely to get one (cc: Paapa).

Delhi Public School, Indore

Incredible

Head the engineering team of nine that hack highly complex problems sandboxed in your browser

Thanks to the lovely engineering team, my job is the easiest in the world :)

Built and managed internal design systems with scalability at the centre stage

SRMKZILLA

Oversaw the development of amazing Open Source products at the heart of SRMKZILLA

Communicated with and managed multi-disciplinary teams of developers, designers, and clients on a daily basis

Wrote modern, performant, maintainable code for a diverse array of client and internal projects

Instructed multiple workshops to 140+ students on various technologies such as Gatsby, Open Source, and React

Work with a variety of different languages, platforms and frameworks such as JavaScript, TypeScript, Angular, Node.js, Swift, and Heroku

Developed and shipped highly interactive web applications for clients (or as we like to call them – friends)

Architected and implemented websites for various campus clubs in and around the campus of SRMIST, Chennai

Manually tested sites in various browsers and mobile devices to ensure cross-browser compatibility and responsiveness

Developed and maintained code for in-house and client websites primarily using HTML, CSS, Sass, JavaScript, and jQuery

Devfolio

Migrated the entire component system written with Storybook for React to TypeScript

Helped build a system to issue sharable Open Graph friendly e-tickets to the hackers at InOut 7.0

Built and shipped the updated user interface of the platform

Bajaj Finserv Health Limited

Scratched a scalable React Native + Redux mobile application for the doctor-end of the system

Implemented WebRTC protocols to introduce telemedicine as a feature that facilitates connecting sick people with healthcare workers in the crucial times of pandemic

Helped integrate Quro into the platform to provide the doctors with intelligent suggestions

DSC SRM

Help solidify a brand direction for DSC SRM

Instruct multiple workshops to 200+ students on various technologies, including but not limited to web, and Flutter

Explore my passion of crafting beautiful interfaces as my pet projects

Built and shipped various state-of-the-art web applications as internal projects, primarily on the MEAN stack

Contributed extensively to restructure and build the club from the ground up

Apollo TeleHealth Services

Implemented ADT-A04, MDM-T02 and MDM-T04 messages of HL7 standards that aid the seamless transfer of clinical and administrative data between software applications used by various healthcare providers across the world

Deployed a telemedicine module on the platform by harnessing the power of WebRTC

Designed the user interface and scratched the codebase of Medeintegra Platform for paramedics

Helped plough a system to capture fundus  images and eye test results in real-time over the RS-232 interface from sophisticated machinery like Fundus Camera and Autorefractor

Aaruush

Overlook and work along with a team of developers and designers to build scalable software that power Aaruush

Engineer and maintain Aaruush's iOS mobile app suite, making it even more delightful with every Git commit

Interfaced with user experience designers and other developers to ensure thoughtful and coherent user experiences across Aaruush's iOS and Android mobile apps

Contributed to the development of Aaruush website as a side project

Apple WWDC21

One of 350 students across the globe to be selected as a WWDC21 Swift Student Challenge award recipient

I never submitted my work earlier because I was always afraid to. Now I am not sure why I was

MOZOHACK Edition 2.0

Help solidify a brand direction for MOZOHACK

Managed everything from the first draft to the event wrap

InOut 6.0

Doodled a new system to standardise the communications of hospitals with ambulances

Cherry-picked to the top 10 teams, amongst 76 teams, which were in turn shortlisted from 5,397 applications from across the world

TEKMUX 3.0

Architected an entirely new system for intelligently displaying digital billboards in urban areas

Seamlessly integrated our handcrafted services with IoT modules to build a beautiful product

Ctrl Alt CODE

Core organizer of a very, very successful national level Internet of Things hackathon at SRMIST, Chennai

SIH 2019

Collaborated with a small team of student developers and stood first in the Complicated problem category put forward by India Health Link and came up with an innovative way to health-ify India by harnessing the power of social networks

Developed a social network based on health parameters which seamlessly integrates with wearables like Apple Watch and Mi Fit to accurately track vitals. It also suggests tips to improve health for the user by using the magic of Machine Learning

Received praises for the India First approach and feasibility of the suggested business model. The entire team was offered internships and extended opportunities by multiple companies after having hands-on experience with the product

Research Day 2019

An innovative Examination Scheduling algorithm using Genetic Algorithms and Graph Colouring Techniques

Proposed solution to Examination Cell, SRMIST, Chennai, to leverage this research and simplify conducting examinations across a multitude of campuses of SRMIST in India

JavaScript (ES6+)

React.js

Node.js

TypeScript

Swift

SwiftUI

Angular

Svelte

User Interface Design

GitHub

LinkedIn

Twitter

Behance

HashNode

SoundCloud

Probably the only journalist who is loyal to his profession.

My grandmother lost to cancer. She was a lovely person - a rare one who believed in service before self. She devoted her life to feeding the poor at Radha Soami Satsang. This one's for her.

Software Developer

spacewalk.webm

Spacewalk – Swift Student Challenge – WWDC21

Spacewalk is the story of Edward Baldwin and his exhilarating space endeavour. While growing up, Edward aspired to be an astronaut and he fantasized and dreamt of walking in space and dancing amidst the stars.

It was a fairy tale start to Edward's career, as his talent and skills dazzled NASA to recruit him as their youngest ever astronaut. Edward was all set to be a legend, but fate has its course. He was struck by a disaster during his first spacewalk.

A gaping snag in the mechanical assembly cut him loose into space, floating further and further away from the spaceship deep into the vicious galaxy.

The game is not over for Edward, the ray of hope is still alive. If you are gamed to bring back Edward, help him aim and shoot the laser light towards his crew to bring him back to safety. But don't take it easy, space is full of surprises!

Ishan Chhabra

A space game which tests your understanding of concepts of reflection of light to bring Edward back to safety.

scribe_hero.webm

Effortlessly craft data-driven graphics in Figma

In the archaic world, scribes were people who served as professional copyists, handcrafting hundreds of copies of legal manuscripts.

Scribe is a Figma plugin that helps you do just that in a modern way. At its heart, Scribe batch exports personalized frames with your data.

Introducing Scribe – Effortlessly craft data-driven graphics in Figma

Importing data shouldn't be messy. With support for CSV and Google Sheets, Scribe parses your data with ease from a service of your choice.

Small adjustments achieve great user experience.

With export options, you can decide on how your export should look like. Eliminating all middleware between export and ready-to-ship.

There's a whole lot of documentation that I'd love for you to check out! You can find the docs here.

329b5c9768e24dea8a71bb5cd4166aab.webm

To all the crazy developers and designers, welcome home.

Aakash Sharma

Harsh Goel

Shrey Sachdeva

Sriram Kailasam

We created Recruitments to wow people! A state-of-the-art platform where students can apply for a seat in SRMKZILLA.

Grab a copy of my resume

Pick a variant.

Classic

Sheer

Enfold