Content API Integration
In summary, you’ll need to manually create pages on the client's website and statically map the data/resources from our Airtable using the provided scripts below. The goal is to ensure that any updates made to our data will automatically reflect on the client's website. Please note that JavaScript is heavily involved.
Please first accept the invite below to gain access to our Airtable:
You can find the Airtable API Documentations using the links below:
- https://airtable.com/apphKFqKdClqcgF26/api/docs
- https://airtable.com/developers/web/api/introduction
The integration involves the following steps:
Please note that the set-up and script will be varied for different website platforms.
1. Creation of Individual Pages:
Each resource on the website requires its own dedicated page. The structure of these pages is crucial, as it determines how the data will be presented. You can reference the structure of our site here (located under the resources tab)
2. Insertion of Script:
A corresponding script needs to be inserted into the header of each newly created page. This step ensures that the necessary functionality is enabled for fetching and displaying the data (Unless you intent to write your own script). You can find the script for Calculator and Other Resources below.
3. Attribute/ID Creation:
On each page, attributes or ID need to be created for each data piece or element. These attributes will then be populated with values retrieved from API calls of Airtable.
Let's take HMRC links as an example:
- HMRC Links - <script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@34e51d5/hmrc_links.js"></script>
From one of the lines of the script : document.querySelector('[name1]').textContent = parsed.records[5].fields.Name, we can see that the attribute '[name1]' has set its text content to the value of the 'Name' property of the 6th record from Airtable
It's important to note that the naming conventions of the attribute used on the web page must align with the JavaScript you intend to write. To also further understand the data structure and properties, I would recommend referring to the Airtable API documentation. It provides detailed information on how to interact with the data stored in Airtable, including retrieving specific fields such as the Name property in our example. The data retrieval process described in the example should be applicable to all elements on most pages for the respective resources.
Calculator:
SDLT Calculator:
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@7058f57/index.js"></script>
VAT Calculator:
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@bab34e0/vat.js"></script>
CIS Calculator:
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@392749c/cis.js"></script>
Payroll Calculator:
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@22e30bf/payroll.js"></script>
Startup Calculator:
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@bab34e0/startup.js"></script>
Other Resources:
HMRC Links
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@34e51d5/hmrc_links.js"></script>
Key Tax Dates
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@216020e/keytaxdates.js"></script>
Income tax rates and allowances
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@104bf6e/Income_Tax_Rates_And_Allowances.js"></script>
National Insurance Contributions
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@e702511/National_Insurance_Contributions.js"></script>
Corporation Tax
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@fba0a1f/corporation_tax.js"></script>
Registered Pension Scheme Limits
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@8611029/Registered_Pension_Scheme_Limits.js"></script>
Capital Gains Tax and Inheritance Tax Rates
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@166d25c/Capital_gains_tax_and_inheritance_tax_rates.js"></script>
Car and Fuel Benefits
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@13536b9/Car_And_Fuel_Benefits.js"></script>
Stamp Duty Land Tax Rates and Bandings
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@68d25d2/Stamp_Duty_Land_Tax_Rates_And_Bandings.js"></script>
Annual Tax on Enveloped Dwellings (ATED) Rates
<script defer src="https://cdn.jsdelivr.net/gh/kefrankefran7609/Calculators@78a7a9f/Annual_Tax_On_Enveloped_Dwellings_Rates.js"></script>
News & Budget report
For the News article and Budget report , there is no script provided. However, you can reference the Airtable API documentation below. You might need to write a script to fetch data from our Airtable. Alternatively, you can use automation tools like Zapier to simplify this process.
Here is the link of the Airtable API documentation for the News : https://airtable.com/apphKFqKdClqcgF26/api/docs#curl/table:news
Here is the link of the Airtable API documentation for the Budget Report:
https://airtable.com/apphKFqKdClqcgF26/api/docs#curl/table:budget%20report
Here’s an example script demonstrating how to fetch news from Airtable. You may need to adjust the endpoint to match your specific requirements.
async function fetchData() {
try {
const res = await fetch('https://api.airtable.com/v0/apphKFqKdClqcgF26/News?maxRecords=3&view=Grid%20view', {
headers: {
Authorization: 'YOUR_SECRET_API_TOKEN'
}
});
if (!res.ok) {
throw new Error(`HTTP error! Status: ${res.status}`);
}
const data = await res.json();
return { output: data };
} catch (error) {
console.error('Error fetching data:', error);
throw error;
}
}
fetchData().then(console.log).catch(console.error);Please reach out to Crystal at crystal.foo@2020innovation.com if you need any help.