Widget | YouStak

Adding YouStak to your Website

Here are the technical details and options for putting your custom marketplace into your website.

The Minimal Set

At a minimum, only one statement is required to plug your marketplace into a web page.

("mymarket" is replaced with your marketplace short name which is generated when you create your marketplace)

That's it! Just place this line of HTML into your web page, and your marketplace will appear. The marketplace will use the layout you define in the YouStak marketplace manager. It will inherit styles from your current web site.

Positioning your Marketplace on the page

If you want to position your Marketplace in a seperate page location from the script line above, you just add this positioning <div>.

Just place this additional line of HTML into your web page where you want the marketplace to appear.

Using Positions for Greater Control.

Instead of using the YouStak bundle statement, you can position the YouStak menu and body areas directly onto your page. This gives you more control on exactly where they are placed on your webpage.

Positions are added to the page in a <div> statement that contains the data-YouStakPosition element

For the menu ; <div data-YouStakPosition="M" ></div>
For the body ; <div data-YouStakPosition="F" ></div>

It's just HTML

The YouStak statements are simply HTML tags that will be replaced at load time by the appropriate YouStak element. That means that you can use your usual web framework to section the web page ... e.g. bootstrap or foundation classes... and put the YouStak html statements where you want your views to appear.

Here is an example of a simple page layout using Bootstrap.

Showing items on other pages on your Website

You can show a set of items from your marketplace on other pages in your website, such as a home or landing page.

Using your website layout, create a <div> the size you want for each item. Add an id of ysRepeatItem to this div. e.g. in Bootstrap is might look like

("col-md-4" is the bootstrap class that says this element is 1/4 width, replace this with the appropriate class for your website)

Now add the YouStak script statement, to activate the ysRepeatItem

(Replace "mymarket" with your marketplace short name and "R8" with your desired items code. "R8" will return 8 most recent items. "T8" will return 8 random items.)

That's it! YouStak will return your selected number of items and repeat your ysRepeatItem div, filling out your items grid.

Customising the look as you embed

Most settings for your marketplace can be set in the YouStak Configuration Utility. To allow you to customise your look for different sites, some settings can be adjusted as you embed. Here are some of the codes you can add to your script statement;

data-textsize="160" - the percentage font size (160% of standard).
data-noloadgoogle="1" - don't load google maps, it's already loaded.
data-css="http://mysite/my.css" - the full path to a custom CSS file.
date-fbappid="530000000" - the facebook appid for this site.
data-googleId="123456789" - the google analytics cde for this site.
data-mapheight="40" - the height of your map as a percentage.

For example, <div data-YouStakBundle="youstak" data-textsize="160"></div> will enlarge the text size by 60%.

Advanced Integration into other pages on your Website

You can enhance the integration between your website and your marketplace with codes that embed YouStak into your other pages, telling YouStak how you want the marketplace to connect to your page.

To enable these advanced features each additional page needs the YouStak script statement:

(Replace "mymarket" with your marketplace short name and "marketplace" with the link for your marketplace page on your website.)

You can now use the advanced integration features like:

Menu Items and Links can appear and disappear based on the visitors membership status.
- #youstakloggedin - Adding #youstakloggedin to your link, will make YouStak only show this link if the visitor is logged in to the marketplace.
- #youstakloggedout - Adding #youstakloggedout to your link, will make YouStak only show this link if the visitor is logged out from the marketplace.
If the vistor is a logged in member, a menu item can be replaced with the Member's picture and name.
- #youstakuser - Adding #youstakuser to your link, will make YouStak replace the text on the link with the users image and name.
Links on your pages can send vistors to your Marketplace page to perform an action.
- ?action=register Calling your markeplace page with the added parameter of "action=register" tells YouStak to immediately ask this user to Register with the marketplace
- ?action=login Calling your markeplace page with the added parameter of "action=login" tells YouStak to immediately ask this user to login with the marketplace
- ?stakplan=P2 Calling your markeplace page with the added parameter of "stakplan=P2" tells YouStak to immediately ask this user to register with the Member plan "P2"

Here are some link examples:

www.mysite.com/mymarket?action=register#youstakloggedout
This link will appear only when the visitor is logged out. It will take them to the marketplace and ask them to Register. This is a great link for a "Join" button or menu item.

www.mysite.com/mymarket?stakplan=P2
This link will take them to the marketplace and ask them to Register using the membership plan code "P2". This is a great link for a "Join Now" button on your own plans page.

Using Web Site Builders

In Wordpress we suggest using our Widget. Download youstak.zip here.

In SquareSpace we suggest using a "Code block". Check their video here.

In Weebly we suggest using the "Embed Code" widget. Check their article here.

In Wix we suggest using the "HTML Code" widget. Check their article here.

Some builders will leave a border around your YouStak site. For best results, match your site background to your YouStak background color!