Embedding Services Into Your Website using Web Connectors
Ella Buan avatar
Written by Ella Buan
Updated over a week ago

Please note: The Web Connector is only available on our Professional and Scale plans, and is only supported in the Classic Proposal Editor.

Services can be embedded to your website using the Web Connector to assist in generating leads, replacing the need for a 'contact us' form where prospects would normally enter their contact details. 

If you wish to plug in the web connector tool to your website (e.g. Wordpress, Squarespace), we recommend designing a page on your website displaying your packages and pricing with buttons or links to select a package/service which will open up the web connector.

This video will show you how to connect up the Web Connector using the Squarespace platform as an example.

The same principles will apply when using other platforms to connect the Web Connector. For a step by step tutorial, read on below!

Connecting your website to the Web Connector

1. Log into your Ignition account, go into Library, then into Services.

2. Click on the service you would like to connect to your website.

3. Under the Edit Service window, go into the Connect tab and then click on Generate Token.

Clicking this button will generate a token, or a unique string of characters, which the website will use to identify your service. Once you generate the token, you should see more information pop-up that looks like this:

4. Open your company website's HTML file.

Note: You may need someone with suitable technical ability to assist you with these next few steps.

5. Within the file, locate the opening and closing tags.

These should be near the top of the page and should look something like this:

Note: You may see other lines of code between the tags. That’s perfectly normal and will not affect anything you are doing.

6. Back in Ignition, copy the line of code under "Include Script".

Note: You can copy the line of code by clicking the copy icon to the right.

7. Back in your HTML file, paste the code between the opening and closing  tags.

Note: You only need to complete this step once, even if you are including multiple services on your website.

8. Locate the HTML code that contains your service's button.

The chunk of code that will contain your button usually starts with a <div> tag. This is usually found further down the page in the HTML file. You can locate where this is within your HTML file by right-clicking the button on the website’s page and clicking “Inspect Element.”

This should show you where the item is located within the HTML file. The class name may also help you locate where this is.

You can copy this the same way you copied the other line of code by clicking the copy icon to the right.

10. Back in your HTML file, between the button's opening  and closing  tags, paste the line of code.

Each service will have a different string of characters after /public/ so your lines of code will not look exactly like the one listed above.

Also, if you would your button to display text other than “Choose Package” you can replace it with something else, such as “Get Started” or “Select”.

11. Repeat Steps 2-3 & 8-10 for each additional service.

12. Save the HTML file and have it uploaded to your website.

Did this answer your question?