Skip to content

Pricing Page Embed

  1. Go to "Embeddables"
  2. Click on Pricing
  3. Copy the HTML given
  4. Paste on your existing site where you would like a pricing page to be generated

Pricing Page options

Attribute Type Description
url string URL of your servicebot instance
selector Element The element you want to turn into a form
handleResponse function(response) a function which gets called after checkout occurs
templateId integer Id of the template you want to display the pricing page for
[forceCard] boolean if true, the customer will be prompted to enter credit card in order to request service
[propertyOverrides] Object Object with keys being property names and values being the value the property will submit with, if these properties are being overriden the customer will not get a chance to fill them out. This is usually used to have an embed for a specific pricing tier, you can find the machine name for a property on the service template edit page
[setPassword] boolean if true, the customer will be asked to enter a password, which you can use to create their account
[redirect] string After the subscription has been requested (and after handleResponse if present,) redirect the customer to this location
[handleCheckout] function(paymentPlanId) Allows for custom actions when a customer selects a tier, good for redirecting to a different checkout page
[email] string Set if you want to prefill the email
[paymentStructureTemplateId] integer If set, sends customer directly to checkout for this payment plan
[token] string JSON Web Token for the user you want to make the request with, set this if you want to request subscriptions with existing users

Example Pricing Page Config

    Servicebot.Tiers({
        url : "https://example.serviceshop.io", 
        templateId: 5,
        selector : document.getElementById('servicebot-management-form'),
        handleResponse : (response) => { 
            console.log(response);
        },
        forceCard : false, 
        setPassword: true,
        propertyOverrides : {
            tier: "Basic"
        }
    })

Tips

  • Any options that can be passed to the checkout embed can be passed to the pricing embed, and will be applied to the checkout form that is used when a customer picks a pricing plan.
  • use the handleCheckout function if you want to use your own checkout flow instead of the Servicebot generated one