Content API Integration

Click the button to see the latest Update

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:

‍

https://airtable.com/invite/l?inviteId=invSwtSgYoKhQUQlq&inviteToken=271715dc3d9bd03da004d5d058558ac373bc7bfb695ce1bf175560b32423136a&utm_medium=email&utm_source=product_team&utm_content=transactional-alerts

‍

You can find the Airtable API Documentations using the links below:

‍

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 and news 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.

‍

Please note that we've updated and replaced all the scripts mentioned in the video with the one below, starting with .

‍

If you’re using Webflow as your website provider, you can copy the following scripts into the footer code of your Webflow project page. If not, please click the Slater.app link below starting with  to open and add the full script to the dedicated page, making sure to remove the window.Webflow ||= []; window.Webflow.push(() => {}) part.

‍

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://slater.app/6592/31482.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 6^th 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, we 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.

‍

We also recommend using Postman to check or inspect the element’s index number.

‍

If you’re using Webflow as your website provider, you can copy the following scripts into the footer code of your Webflow project page. If not, please click the Slater.app link to open and add the full script to the dedicated page, making sure to remove the window.Webflow ||= []; window.Webflow.push(() => {}) part.

Calculator:

‍

SDLT Calculator:

‍

VAT Calculator:

‍

CIS Calculator: 

Payroll Calculator:

‍

Startup Calculator:

‍

Other Resources:

‍

HMRC Links

‍

Key Tax Dates

‍

Income tax rates and allowances

‍

National Insurance Contributions

‍

Corporation Tax

‍

Registered Pension Scheme Limits

‍

Capital Gains Tax and Inheritance Tax Rates

‍

Car and Fuel Benefits

‍

Stamp Duty Land Tax Rates and Bandings

‍

Annual Tax on Enveloped Dwellings (ATED) Rates

‍

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);

‍

IMPORTANT!

‍

If you’ve opted for the Content only with emails service, it's crucial to ensure that each news article's slug is consistent with its title and URL-friendly. Please follow the instructions below to generate the slug for every news article.‍

‍

Use the generateSlug() function to convert the article's title into a clean, hyphenated, and lowercase version that’s suitable for URLs. The function handles various cases, like punctuation, spaces, and special characters, ensuring the final slug is consistent and correctly formatted.

‍

function generateSlug(title) {
  let slug = title.toLowerCase();

  slug = slug.replaceAll('£', 'ps');

  if (slug.endsWith('.')) {
    slug = slug.slice(0, -1);
  }

  slug = slug
    .replaceAll('–', '-')   // en dash
    .replaceAll('—', '-')   // em dash
    .replaceAll("’", '-')   // curly apostrophe
    .replaceAll("'", '-')   // straight apostrophe
    .replaceAll(".", '-');  // period to hyphen

  slug = slug.replace(/(\d),(\d)/g, '$1-$2');

  const symbols = [':', '?', '!', '%', '…', '&', ',','“','”'];
  symbols.forEach(symbol => {
    slug = slug.replaceAll(symbol, '');
  });

  slug = slug.replace(/\s+/g, ' ');

  slug = slug.trim();

  slug = slug.replaceAll(' ', '-');

  return slug;
}

//Example function call
const title = '£63 billion in new UK investments set to create 38,000 jobs'
const slug = generateSlug(title)
console.log(slug) // Output: "ps63-billion-in-new-uk-investments-set-to-create-38-000-jobs"

Please reach out to Crystal at crystal.foo@2020innovation.com if you need any help.