Create a Dynamic Carousel using Zendesk Help Center Articles

Template
Function
1
Template
Function
by
Zoran Slamkov

Ship a dynamic carousel with Zendesk Help Center articles.

Created:

Heading

Voiceflow APIs used:

Channels
No items found.
Created By
Zoran Slamkov
This is some text inside of a div block.
Overview
This is some text inside of a div block.
by
This is some text inside of a div block.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Heading
Based in
This is some text inside of a div block.
Heading

Function Code Snippet


export default async function main(args) {
// Retrieve input variables: searchQuery, userEmail, and apiKey
const { searchQuery, userEmail, apiKey } = args.inputVars;

// Custom function for base64 encoding
function base64Encode(str) {
const charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
let output = '';

for (let i = 0; i < str.length; i += 3) {
const byte1 = str.charCodeAt(i) & 0xFF;
const byte2 = i + 1 < str.length ? str.charCodeAt(i + 1) & 0xFF : 0;
const byte3 = i + 2 < str.length ? str.charCodeAt(i + 2) & 0xFF : 0;

const enc1 = byte1 >> 2;
const enc2 = ((byte1 & 0x3) << 4) | (byte2 >> 4);
const enc3 = ((byte2 & 0xF) << 2) | (byte3 >> 6);
const enc4 = byte3 & 0x3F;

if (isNaN(byte2)) {
output += charSet.charAt(enc1) + charSet.charAt(enc2) + '==';
} else if (isNaN(byte3)) {
output += charSet.charAt(enc1) + charSet.charAt(enc2) + charSet.charAt(enc3) + '=';
} else {
output += charSet.charAt(enc1) + charSet.charAt(enc2) + charSet.charAt(enc3) + charSet.charAt(enc4);
}
}

return output;
}

// Construct the credentials string and encode it using the custom base64Encode function
const encodedCredentials = base64Encode(`${userEmail}/token:${apiKey}`);

// Set up the headers with the encoded credentials
const headers = {
'Accept': 'application/json',
'Authorization': `Basic ${encodedCredentials}`
};

// The URL for the API endpoint with the search query
const url = `https://voiceflow.zendesk.com/api/v2/help_center/articles/search?query=${encodeURIComponent(searchQuery)}`;

// Make the GET request to the API endpoint
const response = await fetch(url, { method: 'GET', headers: headers });

// Accessing the response body using Voiceflow's fetch API
const responseBody = response.json;

// Create cards for the carousel, limited to 3 articles
const cards = responseBody.results.slice(0, 3).map(article => ({
imageUrl: "https://yourimageurl.com/image.png", // Placeholder image URL
title: article.title,
description: {
text: "Click to read more" // Placeholder description
},
buttons: [{
name: "Read Article",
payload: {
actions: [{
type: "open_url",
url: article.html_url
}]
}
}]
}));

return {
next: {
path: 'success'
},
trace: [{
type: "carousel",
payload: {
cards: cards
}
}]
};
}
copy-icon

Explore More Templates

Build and submit a Template to have it featured in the community.

ghraphic
No items found.
No items found.