Advice and answers from the Port Team

Select the product(s) you would like to be included in your button and click the Embed To Sell button. The order in which you select your products will be the order they appear in the checkout experience. 

Under the Port button section you can customize the button's appearance any way you'd like. Then copy the HTML code and paste it on your website.

The button also works on websites that were built on a website builder or CMS. Click on the link below for the website builder you used to build your website to find out exactly how to get your button on your site.

WordPress
Squarespace
Wix
Weebly
Tumblr
Strikingly
Webflow
Joomla!
SiteBuilder
Instapage
MailChimp
Facebook

WordPress

To paste the HTML code that contains your button click the HTML tab on the text editor. 

The code will be displayed. Find the place you would like to put your button and paste the code.

Go back to the Visual tab and your button should appear. To change the alignment of the button (left, center, right) use the text editor’s alignment feature to get the button where you want it.

Check out your website to make sure everything is in place

Paid Wordpress Site: If you are paying for Wordpress, you can download the Port plugin. The plugin ensures the Port checkout flow will work as expected across browsers. Without the plugin, Port still works, however it might open the checkout flow in a new window.

Squarespace

To paste the HTML code that contains your button click either the code or the embed button under the Content Blocks section. 

Paste the HTML code into the edit box and click Set.

Move the button around until it’s where you want it. If you want to center the button with the page or the container, go back into the code and put <P ALIGN=CENTER> at the beginning of the code snippet. 

Since your site may be in Safe Mode, sign out of Squarespace and check out your website to make sure everything is in place.

Wix

You have two options to use Port on your WIX website. First, you can copy and paste the code to display the Buy Tickets button on your page, when people click the button, a new, little window will pop-up and they will go through the Port purchase flow. Alternately, you can embed the Port purchase flow on your page and avoid any windows popping up.

1. Embed the Buy Tickets Button

To paste the HTML code that contains your button, click the Add button, then more, then click the HTML code button.

Click the Enter Code button and paste the code in the HTML container.

Size your container to be close to the same size as the Buy Tickets button, then position it where you want it on your Wix page.

Important: Remember that when people click the button, the Port purchase flow will pop open in a new window. This will ensure that everything looks and works as it should across devices, including mobile.

2. Embed the Port Purchase Flow

To embed the purchase experience in WIX, click the Add button, then more, then click Embed a Site. 

Instead of adding the full snippet, you'll want to copy only the Port purchase URL, this starts with https://... It is after href=, ends before target= and does not include the " marks.

You will need to resize your Wix container to be large enough that the Port checkout flow can fit inside. This means the full list of products and packs for sale will show within the container you’ve created.

Weebly

To paste your HTML code click the Embed Code button and drag the block where you want the button.

Paste the code in the box and select the alignment (left, center, right) you want for your button using the Position tool.

Play around with the box that contains your button. It may take some adjusting to get the button where you want it.

Tumblr

To paste the HTML code that contains your button click the Settings button (the wheel). 

Then change the Text editor from Rich text to HTML.

Your code will be displayed. Find the place you would like to put your button and paste the code.

Switch back to the Rich text tab and your button should appear. Tumblr formats their buttons differently than other websites so your button will appear as a link.

Then hit save to publish your post and check out your page.

Strikingly

You must be a paid user of Strikingly to embed your own HTML code onto your site. If you are a paid user first add an App Store section to your page.

Then select the HTML option

Paste your code in the box. DO NOT click the “Show in iframe” button. If you need to center your button put <P ALIGN=CENTER> at the beginning of the code snippet.

Then check out your website and make sure the button is where you want it.

Webflow

First, click the Add Element button (the plus sign) and select the Embed option.

Then paste your code into the box.

You may receive a message that says, "this <script> embed will only appear on the published/exported site." That's normal, you'll be able to see the button once you publish your site.

Joomla!

To paste the HTML code that contains your button click the Toggle editor button in the text editor. This will show your code. 

Paste the code wherever you want your button.

Align the button (left, cent, right) by using the text editor’s options.


Then check out your website to make sure everything is where you want it.

SiteBuilder

You have two options to use Port on your SiteBuilder website. First, you can copy and paste the code to display the Buy Tickets button on your page, when people click the button, a new, little window will pop-up and they will go through the Port purchase flow. Alternately, you can embed the Port purchase flow on your page and avoid any windows popping up.

1. Embed the Buy Tickets Button

To paste the HTML code that contains your button, click the Elements button, then under the HTML/Page Embed section click the Embed HTML button.

Add your HTML code from Port in the Body HTML section.

Size your container to be close to the same size as the Buy Tickets button, then position it where you want it on your SideBuilder page.

Important: Remember that when people click the button, the Port purchase flow will pop open in a new window. This will ensure that everything looks and works as it should across devices, including mobile.

2. Embed the Port Purchase Flow

To embed the purchase experience onto your SiteBuilder site, click the Elements button, then under the HTML/Page Embed select Embed Webpage

Instead of adding the full snippet, you'll want to copy only the Port purchase URL, this starts with https://... It is after href=, ends before target= and does not include the " marks.

You will need to resize the container to be large enough that the Port checkout flow can fit inside. This means the full list of products and packs for sale will show within the container you’ve created.

Instapage

To embed your Port checkout experience, first click the Add New button at the top of the page editor.

Select the HTML option on the far right.

Paste your code from Port into the HTML box and then click Done. Resize the container and position it to be where you want it on your page. 

Click preview to view your page and the button. Once your page is published you will be able to click the button and view the checkout experience. 

MailChimp

To put your button into a MailChimp email first click the Content tab, scroll down and select Code.

Then paste your code in the editing box.

To center the button put <P ALIGN=CENTER> at the beginning of the code snippet.

Then check out your email in preview mode to make sure everything is in the right place

Here’s how your button will look in an email. When your recipient clicks on the button the checkout experience will open a new tab.

Did this answer your question?