Tutorial: Building without an environment

Getting started

Go to the dashboard, choose the 'Flows' tab then choose a flow:

Dashboard showing flows list

Sticky flows have two types of logic, client and routing. There's a box for each on the 'Logic' tab:

Dashboard showing app client and routing logic

Client logic

Use client logic if you want to host your app code on our infrastructure. This works well for beginners making smaller flows. You can write your code online and you don't need a local environment or a code editor. We even take care of loading the SDK for you.

Routing logic

At some point you will want to write bigger flows which have multiple files. You may want to use a framework like React with a build process. Or you may just prefer to use your own environment and code editor. In this case, use routing logic to get Sticky to redirect to your own external app. This has a few more moving parts, and if you want other people to use your app, you will need some web hosting too. See (2) Building with an environment.

Code in the 'Routing logic' box must be synchronous JavaScript that returns a fully-qualified URL. Sticky will redirect users to this URL. You can use parameters available during the redirect to form the URL. They are available under an object called input. A full list of input keys is shown under the heading 'input object keys'. Sticky calls stickies 'things' internally, so thingId refers to the sticky ID.

To redirect a page on your website about a product, you would write logic that joins input.productId to the end of your website address:

return 'https://my-website.com/products/' + input.productId;

It's possible that input.productId could be undefined if no product is assigned to the sticky that runs your app. In this case, try checking the type of input.productId using typeof:

if (typeof input.productId === 'string') { return 'https://my-website.com/products/' + input.productId; } else { return 'https://my-website.com/about'; }

In general, be defensive. Assume input object keys to be missing.

Which logic will Sticky use?

Sticky will always prefer routing logic. To use client logic instead, don't write any routing logic. You will see the warning "There is some 'Routing logic' so 'Client logic' will not run." if you write both.

Building your first application

Writing some client logic

Paste this into the 'Client logic' box and choose 'Save':

<p style='color: red;'>Hello there</p>

Connecting your app to a sticky

Go to the dashboard homepage. You can do this by 'going back' in your browser or clicking the home icon at the top left. Choose the 'Stickies' tab, then choose a sticky:

Dashboard showing stickies list

Now choose your application in the 'Application' box on the left (you may need to scroll down). It will already be chosen if you have just signed up. Choose 'Save' at the top left:

Editing a sticky in the dashboard

Choose 'Copy tap link' and copy the URL in the popup box. It should start with https://sticky.to/. Paste this into a new tab. You should see 'Hello there' in red.

We'll call this URL the hot URL. You can refresh it every time you make changes to your application and choose 'Save'.

A simple 'tap counter'

In this simple application, every time someone taps a sticky, a visible counter increases. This is a 'personalised' counter: each different person has their own. You can prove it by tapping the sticky with a different phone or loading the hot URL in an Incognito window.

Go back to your application. It's time to write some code.

Delete everything in the 'Client logic' box.

After every code change, choose 'Save' and refresh the hot URL.

Displaying the 'tap counter'

We will need to display the number of taps. Let's do this with a <p> (paragraph) element. We give it an id attribute so we can find it in JavaScript using document.getElementById. Add this. You should see 'Hello there 2':

<p id='tap-counter'></p> <script> document.getElementById('tap-counter').innerHTML = 'Hello there 2' </script>

Getting the tap count

We are going to work with the <script> part of the code now. Underneath the document.getElementById call, use the SDK to get all events. These events are specific to this application and this session (who has tapped the sticky):

<p id='tap-counter'></p> <script> document.getElementById('tap-counter').innerHTML = 'Hello there 2' sticky.session.events.getAll().then(events => { console.log('events', events) }) </script>

To see the console.log call, you will need to use the Inspector. In Chrome, right-click anywhere and choose 'Inspect', then choose the 'Console' tab.

Whilst there are only sticky tap events now, there can easily be more events with different types. Don't worry what they are now; you'll learn more about them later. This means we need to filter by the SESSION_READ event type, the type of event that's created when someone taps the sticky. We care about how many of these events there are, so use the length property of the array:

<p id='tap-counter'></p> <script> document.getElementById('tap-counter').innerHTML = 'Hello there 2' sticky.session.events.getAll().then(events => { const tapEvents = events.filter(event => event.type === 'SESSION_READ') const howManyTaps = tapEvents.length console.log('howManyTaps', howManyTaps) }) </script>

You should see howManyTaps followed by a number in your Inspector. Every time you refresh the page, the number should increase.

Let's display that number using the <p> element:

<p id='tap-counter'></p> <script> sticky.session.events.getAll().then(events => { const tapEvents = events.filter(event => event.type === 'SESSION_READ') const howManyTaps = tapEvents.length document.getElementById('tap-counter').innerHTML = 'Taps: ' + howManyTaps }) </script>

You should now see 'Taps: ' followed by an increasing number on the page. Great work!