Skip to content

Commit

Permalink
[other] ENGMT-1985: updates to api connectivity
Browse files Browse the repository at this point in the history 
Gives some predefined options for stage, stage_ac, prod, prod_ac like the android and ios mobile apps

Gives the option to specify your own endpoint

Switches the default branch key for staging to the ones we are using for the mobile apps

Adds an error message if branch.init fails
  • Loading branch information
@bredmond5
bredmond5 committed Dec 11, 2024
1 parent eb97ada commit 215d9b9
Show file tree
Hide file tree
Showing 3 changed files with 180 additions and 26 deletions.
4 changes: 2 additions & 2 deletions deployment/deploy-qa.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ NC='\033[0m'
aws s3 cp --content-type="text/javascript" --content-encoding="gzip" dist/build.min.js.gz s3://branch-builds/web-sdk/branch-latest.min.js
aws s3 cp --content-type="text/javascript" dist/build.js s3://branch-builds/web-sdk/branch.js

# Engagement Pro Staging Testing App - ID: 1359637087497768975
./deployment/build-example-html.sh "key_live_bydNZt6LxLEPG6QHe9BY8gbgDFjikcY5" "https://api.stage.branch.io" "https://cdn.branch.io/branch-staging-latest.min.js"
# External services app - ID: 436637608899006753
./deployment/build-example-html.sh "key_live_plqOidX7fW71Gzt0LdCThkemDEjCbTgx" "https://api.stage.branch.io" "https://cdn.branch.io/branch-staging-latest.min.js"
aws s3 cp example.html s3://branch-cdn/example-staging.html

echo -en "${GREEN}Pushing to CDN ...${NC}\n"
Expand Down
198 changes: 176 additions & 22 deletions examples/example.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,170 @@
<meta content="http://branch.io/img/logo_icon_black.png" property="og:image" />
<meta content="Branch Metrics Web SDK Example App" property="og:title" />
<meta content="A basic example to demonstrate some of the ways that the Web SDK can be used" property="og:description" />
<meta content='key_place_holder' name='branch_key'/>
<title>Branch Metrics Web SDK Example App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
.btn {
margin-top: 5px;
}
.example-input {
width: 125px;
display: inline-block;
margin-top: 5px;
vertical-align: middle;
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

label {
display: block;
font-size: 14px;
margin-bottom: 6px;
font-weight: bold;
}
.radio-input {
margin-right: 10px !important;
margin-left: 20px !important;

input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
outline: none;
box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus {
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.row {
margin-bottom: 30px;
}

#configButtons {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-bottom: 10px;
}

</style>
<script>
function getFinalValue(inputValue, documentKey) {
if (inputValue) return inputValue;
return document.getElementById(documentKey).value.trim();
}

function updateQueryParams(branchKey, apiUrl, script) {
let finalBranchKey = getFinalValue(branchKey,'branchKeyInput');
let finalApiUrl = getFinalValue(apiUrl,'apiUrlInput');

if (!finalBranchKey && !finalApiUrl) {
alert('Please provide at least one value to update.');
return;
}

const url = new URL(window.location.href);
if (finalBranchKey) url.searchParams.set('branch_key', finalBranchKey);
if (finalApiUrl) url.searchParams.set('api_url', finalApiUrl);

window.location.href = url.toString();
}

function getBranchKey() {
const queryParams = getQueryParams();
return queryParams['branch_key'] || "key_place_holder"
}

function getApiUrlLocal() {
const queryParams = getQueryParams();
return queryParams['api_url'] || "api_place_holder"
}

function getBranchScript() {
return "script_place_holder"
}

function getQueryParams() {
const params = new URLSearchParams(window.location.search);
const queryParams = {};
for (const [key, value] of params.entries()) {
queryParams[key] = value;
}
return queryParams;
}

function setLabelText() {
const keyLabel = document.getElementById('branchKeyLabel');
keyLabel.textContent = `Branch Key: ${getBranchKey()}`;

const apiLabel = document.getElementById('apiUrlLabel');
apiLabel.textContent = `Api Url: ${getApiUrlLocal()}`;
}

function onLoad() {
generateConfigButtons()
setLabelText();
}

window.onload = onLoad;
</script>
<script>
const STAGING = "Staging"
const PRODUCTION = "Production"
const STAGING_AC = "Staging AC"
const PRODUCTION_AC = "Production AC"
const apiConfigurations = {
STAGING_AC: {
name: STAGING_AC,
branchKey: "key_live_juoZrlpzQZvBQbwR33GO5hicszlTGnVT",
apiUrl: "https://protected-api.stage.branch.io",
appId: "1387589751543976586",
},
STAGING: {
name: STAGING,
branchKey: "key_live_plqOidX7fW71Gzt0LdCThkemDEjCbTgx",
apiUrl: "https://api.stage.branch.io",
appId: "436637608899006753",
},
PRODUCTION_AC: {
name: PRODUCTION_AC,
branchKey: "key_live_hshD4wiPK2sSxfkZqkH30ggmyBfmGmD7",
apiUrl: "https://protected-api.branch.io",
appId: "1284289243903971463",
},
PRODUCTION: {
name: PRODUCTION,
branchKey: "key_live_iDiV7ZewvDm9GIYxUnwdFdmmvrc9m3Aw",
apiUrl: "https://api3.branch.io",
appId: "1364964166783226677",
},
};

function generateConfigButtons() {
const configButtonsContainer = document.getElementById('configButtons');

Object.keys(apiConfigurations).forEach(key => {
const config = apiConfigurations[key];
const button = document.createElement('button');
button.classList.add('btn', 'btn-info');
button.textContent = `${config.name}`;

button.onclick = () => {
updateQueryParams(config.branchKey, config.apiUrl);
};

configButtonsContainer.appendChild(button);
});
}

</script>
</head>

<body>
Expand All @@ -36,7 +179,7 @@ <h2>Branch Metrics Web SDK Example</h2>
<section>
<div class="row col-lg-8 col-lg-offset-2">
<h4>Session Info</h4>
<pre id="info">Reading session from .init()...</pre>
<pre id="session-info">Reading session from .init()...</pre>
<br>
<h4>Request</h4>
<pre id="request">Click a button!</pre>
Expand All @@ -51,7 +194,6 @@ <h3>Methods</h3>
<hr>
<h4>Session and Identity</h4>
<div class="group">
<button id="init" class="btn btn-success">.init()</button>
<button id="data" class="btn btn-info">.data()</button>
<button id="first" class="btn btn-info">.first()</button>
<input class="example-input" type="text" id="identityID" class="form-control" placeholder="[email protected]">
Expand All @@ -76,14 +218,26 @@ <h4>QR Code</h4>
</div>
</div>
<div class="row col-lg-8 col-lg-offset-2">
<h4>Api Settings</h4>
<div class="group" id="configButtons"></div>

<label id="branchKeyLabel" for="branchKeyInput">Branch Key:</label>
<input type="text" id="branchKeyInput">
<br>
<label id="apiUrlLabel" for="apiUrlInput">Api Url:</label>
<input type="text" id="apiUrlInput">
<br>
<button class="btn btn-info" onclick="updateQueryParams()">
Update
</button>
</div>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="script_place_holder";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener banner closeBanner closeJourney data deepview deepviewCta first init link logout removeListener setBranchViewData setIdentity track trackCommerceEvent logEvent disableTracking getBrowserFingerprintId crossPlatformIds lastAttributedTouchData setAPIResponseCallback qrCode setRequestMetaData setAPIUrl getAPIUrl setDMAParamsForEEA".split(" "), 0);
branch.setAPIUrl("api_place_holder")
(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src=getBranchScript();k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener banner closeBanner closeJourney data deepview deepviewCta first init link logout removeListener setBranchViewData setIdentity track trackCommerceEvent logEvent disableTracking getBrowserFingerprintId crossPlatformIds lastAttributedTouchData setAPIResponseCallback qrCode setRequestMetaData setAPIUrl getAPIUrl setDMAParamsForEEA".split(" "), 0);
branch.setAPIUrl(getApiUrlLocal())

branch.setAPIResponseCallback(function(url, method, requestBody, error, status, responseBody) {
console.log('Request: ' + method + ' ' + url + ' body=' + JSON.stringify(requestBody));
Expand All @@ -96,9 +250,16 @@ <h4>QR Code</h4>
});

// Take the Branch key from a meta tag
branch.init($('meta[name="branch_key"]').attr('content'), function(err, data) {
branch.init(getBranchKey(), function(err, data) {
// Avoid XSS by HTML escaping the data for display
$('#info').text(JSON.stringify(data));
$('#session-info').text(JSON.stringify(data));
if (err) {
let alertMessage = err.message;
if (getApiUrlLocal().includes('stage')) {
alertMessage += ". Are you connected to VPN?";
}
alert(alertMessage);
}
});
</script>
<script type="text/javascript">
Expand Down Expand Up @@ -129,13 +290,6 @@ <h4>QR Code</h4>
}
return DOMPurify.sanitize(inputElement.val());
};
$('#init').click(function() {
request.html('branch.init();');
// Take the Branch key from a meta tag
branch.init($('meta[name="branch_key"]').attr('content'), function(err, data) {
response.html(err || JSON.stringify(data));
});
});
$('#data').click(function() {
request.html('branch.data();');
branch.data(function(err, data) {
Expand Down
4 changes: 2 additions & 2 deletions startDev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ const serve = require('koa-static');
const path = require('path');

const defaultDev = {
"APIEndpoint": "https://api2.branch.io",
"sdkKey": null,
"APIEndpoint": "https://api.stage.branch.io",
"sdkKey": 'key_live_plqOidX7fW71Gzt0LdCThkemDEjCbTgx',
"port": "3000"
};

Expand Down

0 comments on commit 215d9b9

Please sign in to comment.