Twitter Integration

We installed the Velo package on our site, and followed the steps described in the Setup section of the package’s readme file.  

Page Elements

In our site we added the following elements:

• Loader GIF: runs when getting or sending a tweet. 

Generate a Tweet

• 2 buttons: one for generating the current timestamp and tweeting it, and one hidden button that is shown after tweeting and links to Twitter.

• Text element: to display a success message.
   

Get Latest Tweet

• Text input: for entering a Twitter account name to get the latest tweet.

• Text box: (read-only mode) for displaying the content of the tweet.

• Button: to get the latest tweet. 

Backend code

We used a web module named twitter-wrapper.jsw to wrap the package functions and use them in our page code. In the web module, we imported the tweet() and getLatestTweet() functions from the package. The web module contains 2 functions: 

• tweetWrapper(): Gets the content of the tweet (the timestamp, in our example) and calls the package’s tweet() function with the content.

• getLatestTweetWrapper(accountNameInput): Calls the package’s getLatestTweet() function with the provided account name or if no account is specified, with our default Twitter account: @VeloExamples.

Page Code

We imported the wrapper functions from the web module. Then we added onClick event handlers to the 2 buttons. When a site visitor clicks a button, the corresponding backend function is called, either generating or getting a tweet.