Skip to content

Embedding Servicebot in an existing site/app

You can embed a service template request form or a account management page into any existing website/application

Request Form Embed

  1. Go to "Embeddables -> Checkout"
  2. Select the template and plan you would like to embed
  3. Copy the HTML given
  4. Paste on your existing site where you would like customers to sign up for your subscription
Request options

In the config for a request embed, these are the options which can customize the embed

Attribute Type Description
templateId number Id of the template you want to embed
url string URL of your servicebot instance
selector Element The element you want to turn into a form
paymentStructureTemplateId number Payment Structure to purchase
[handleResponse] function(response) a function which gets called after the subscription has been created
[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
[hideSummary] boolean if true, the embed will not include a price summary
[hideHeaders] boolean if true, the embed will not include the service template name and description, only the form
[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
[email] string Set the email field
[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 Request Config
    Servicebot.Checkout({
        templateId : 1,
        paymentStructureTemplateId: 4,
        url : "http://localhost:3000", 
        selector : document.getElementById('servicebot-request-form'),
        handleResponse : async (response) => { //handleResponse can return a promise to be resolved before redirect happens
            await mySaaS.createAccount(response.request.email, response.request.password)
            console.log(response);
        },
        forceCard : false, 
        setPassword: true,
        propertyOverrides : {
            businessName: "MyBiz"
        }
    })
Tips
  • You can add additional javascript logic in the handleResponse function
  • If you are using synchronous webhooks, any responses from your endpoints will show up in the handleResponse payload

Manage account Embed (Add/update card and cancel/reactivate subscription)

Note

This embed will require code to be placed in your server

  1. Go to "Embeddables"
  2. Click on Billing Settings
  3. Select your backend language/framework
  4. Place the server code in your server
  5. Place the client code on the client, and insert the token from the server when a logged in user visits the page
  6. Customers can now add/update a funding source and cancel/reactivate their subscriptions using this page
Management options

In the init for a request embed, these are the options which can customize the embed

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 billing operations occur
token string A JSON web token for the user account being managed (generated by the server code)
[disablePlanChange] boolean if true, a customer will not be able to change their plan using the embeddable
Example Management Config
    Servicebot.BillingSettings({
        url : "http://localhost:3000", 
        selector : document.getElementById('servicebot-management-form'),
        handleResponse : (response) => { 
            console.log(response);
        },
        token: "INSERT_TOKEN_HERE",
        disablePlanChange: false
    })
Tips
  • If your language/framework is not available, you can use a JSON Web Token library to generate a token, or, using an administrator account, use this API to get a token for a specific customer

Pricing Page Embed

Note

This embed is only available for Servicebot customers

  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
[hideSummary] boolean if true, the embed will not include a price summary
[hideHeaders] boolean if true, the embed will not include the service template name and description, only the form
[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"
        }
    })