Skip to content

Commit 665c0ad

Browse files
bredmond5bredmond5
committed
[other] ENGMT-1985: updates to api connectivity
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
1 parent eb97ada commit 665c0ad

File tree

3 files changed

+181
-25
lines changed

3 files changed

+181
-25
lines changed

‎deployment/deploy-qa.sh‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ NC='\033[0m'
2121
aws s3 cp --content-type="text/javascript" --content-encoding="gzip" dist/build.min.js.gz s3://branch-builds/web-sdk/branch-latest.min.js
2222
aws s3 cp --content-type="text/javascript" dist/build.js s3://branch-builds/web-sdk/branch.js
2323

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

2828
echo -en "${GREEN}Pushing to CDN ...${NC}\n"

‎examples/example.template.html‎

Lines changed: 177 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,170 @@
55
<meta content="http://branch.io/img/logo_icon_black.png" property="og:image" />
66
<meta content="Branch Metrics Web SDK Example App" property="og:title" />
77
<meta content="A basic example to demonstrate some of the ways that the Web SDK can be used" property="og:description" />
8-
<meta content='key_place_holder' name='branch_key'/>
98
<title>Branch Metrics Web SDK Example App</title>
109
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
1110
<style type="text/css">
1211
.btn {
1312
margin-top: 5px;
1413
}
15-
.example-input {
16-
width: 125px;
17-
display: inline-block;
18-
margin-top: 5px;
19-
vertical-align: middle;
14+
body {
15+
font-family: Arial, sans-serif;
16+
background-color: #f4f4f9;
17+
color: #333;
18+
margin: 0;
19+
padding: 0;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
height: 100vh;
24+
}
25+
26+
label {
27+
display: block;
28+
font-size: 14px;
29+
margin-bottom: 6px;
30+
font-weight: bold;
2031
}
21-
.radio-input {
22-
margin-right: 10px !important;
23-
margin-left: 20px !important;
32+
33+
input {
34+
width: 100%;
35+
padding: 10px;
36+
margin-bottom: 15px;
37+
border: 1px solid #ccc;
38+
border-radius: 5px;
39+
font-size: 14px;
40+
outline: none;
41+
box-sizing: border-box;
42+
transition: border-color 0.3s ease, box-shadow 0.3s ease;
2443
}
44+
45+
input:focus {
46+
border-color: #007bff;
47+
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
48+
}
49+
2550
.row {
2651
margin-bottom: 30px;
2752
}
53+
54+
#configButtons {
55+
display: flex;
56+
flex-wrap: wrap;
57+
gap: 3px;
58+
margin-bottom: 10px;
59+
}
60+
2861
</style>
62+
<script>
63+
function getFinalValue(inputValue, documentKey) {
64+
if (inputValue) return inputValue;
65+
return document.getElementById(documentKey).value.trim();
66+
}
67+
68+
function updateQueryParams(branchKey, apiUrl, script) {
69+
let finalBranchKey = getFinalValue(branchKey,'branchKeyInput');
70+
let finalApiUrl = getFinalValue(apiUrl,'apiUrlInput');
71+
72+
if (!finalBranchKey && !finalApiUrl) {
73+
alert('Please provide at least one value to update.');
74+
return;
75+
}
76+
77+
const url = new URL(window.location.href);
78+
if (finalBranchKey) url.searchParams.set('branch_key', finalBranchKey);
79+
if (finalApiUrl) url.searchParams.set('api_url', finalApiUrl);
80+
81+
window.location.href = url.toString();
82+
}
83+
84+
function getBranchKey() {
85+
const queryParams = getQueryParams();
86+
return queryParams['branch_key'] || "key_place_holder"
87+
}
88+
89+
function getApiUrlLocal() {
90+
const queryParams = getQueryParams();
91+
return queryParams['api_url'] || "api_place_holder"
92+
}
93+
94+
function getBranchScript() {
95+
return "script_place_holder"
96+
}
97+
98+
function getQueryParams() {
99+
const params = new URLSearchParams(window.location.search);
100+
const queryParams = {};
101+
for (const [key, value] of params.entries()) {
102+
queryParams[key] = value;
103+
}
104+
return queryParams;
105+
}
106+
107+
function setLabelText() {
108+
const keyLabel = document.getElementById('branchKeyLabel');
109+
keyLabel.textContent = `Branch Key: ${getBranchKey()}`;
110+
111+
const apiLabel = document.getElementById('apiUrlLabel');
112+
apiLabel.textContent = `Api Url: ${getApiUrlLocal()}`;
113+
}
114+
115+
function onLoad() {
116+
generateConfigButtons()
117+
setLabelText();
118+
}
119+
120+
window.onload = onLoad;
121+
</script>
122+
<script>
123+
const STAGING = "Staging"
124+
const PRODUCTION = "Production"
125+
const STAGING_AC = "Staging AC"
126+
const PRODUCTION_AC = "Production AC"
127+
const apiConfigurations = {
128+
STAGING_AC: {
129+
name: STAGING_AC,
130+
branchKey: "key_live_juoZrlpzQZvBQbwR33GO5hicszlTGnVT",
131+
apiUrl: "https://protected-api.stage.branch.io",
132+
appId: "1387589751543976586",
133+
},
134+
STAGING: {
135+
name: STAGING,
136+
branchKey: "key_live_plqOidX7fW71Gzt0LdCThkemDEjCbTgx",
137+
apiUrl: "https://api.stage.branch.io",
138+
appId: "436637608899006753",
139+
},
140+
PRODUCTION_AC: {
141+
name: PRODUCTION_AC,
142+
branchKey: "key_live_hshD4wiPK2sSxfkZqkH30ggmyBfmGmD7",
143+
apiUrl: "https://protected-api.branch.io",
144+
appId: "1284289243903971463",
145+
},
146+
PRODUCTION: {
147+
name: PRODUCTION,
148+
branchKey: "key_live_iDiV7ZewvDm9GIYxUnwdFdmmvrc9m3Aw",
149+
apiUrl: "https://api3.branch.io",
150+
appId: "1364964166783226677",
151+
},
152+
};
153+
154+
function generateConfigButtons() {
155+
const configButtonsContainer = document.getElementById('configButtons');
156+
157+
Object.keys(apiConfigurations).forEach(key => {
158+
const config = apiConfigurations[key];
159+
const button = document.createElement('button');
160+
button.classList.add('btn', 'btn-info');
161+
button.textContent = `${config.name}`;
162+
163+
button.onclick = () => {
164+
updateQueryParams(config.branchKey, config.apiUrl);
165+
};
166+
167+
configButtonsContainer.appendChild(button);
168+
});
169+
}
170+
171+
</script>
29172
</head>
30173

31174
<body>
@@ -36,7 +179,7 @@ <h2>Branch Metrics Web SDK Example</h2>
36179
<section>
37180
<div class="row col-lg-8 col-lg-offset-2">
38181
<h4>Session Info</h4>
39-
<pre id="info">Reading session from .init()...</pre>
182+
<pre id="session-info">Reading session from .init()...</pre>
40183
<br>
41184
<h4>Request</h4>
42185
<pre id="request">Click a button!</pre>
@@ -76,14 +219,26 @@ <h4>QR Code</h4>
76219
</div>
77220
</div>
78221
<div class="row col-lg-8 col-lg-offset-2">
222+
<h4>Api Settings</h4>
223+
<div class="group" id="configButtons"></div>
224+
225+
<label id="branchKeyLabel" for="branchKeyInput">Branch Key:</label>
226+
<input type="text" id="branchKeyInput">
227+
<br>
228+
<label id="apiUrlLabel" for="apiUrlInput">Api Url:</label>
229+
<input type="text" id="apiUrlInput">
230+
<br>
231+
<button class="btn btn-info" onclick="updateQueryParams()">
232+
Update
233+
</button>
79234
</div>
80235
</section>
81236
</div>
82237
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
83238
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
84239
<script type="text/javascript">
85-
(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);
86-
branch.setAPIUrl("api_place_holder")
240+
(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);
241+
branch.setAPIUrl(getApiUrlLocal())
87242

88243
branch.setAPIResponseCallback(function(url, method, requestBody, error, status, responseBody) {
89244
console.log('Request: ' + method + ' ' + url + ' body=' + JSON.stringify(requestBody));
@@ -96,9 +251,17 @@ <h4>QR Code</h4>
96251
});
97252

98253
// Take the Branch key from a meta tag
99-
branch.init($('meta[name="branch_key"]').attr('content'), function(err, data) {
254+
branch.init(getBranchKey(), function(err, data) {
100255
// Avoid XSS by HTML escaping the data for display
101-
$('#info').text(JSON.stringify(data));
256+
$('#session-info').text(JSON.stringify(data));
257+
if (err) {
258+
console.log("failed!");
259+
let alertMessage = err.message;
260+
if (getApiUrlLocal().includes('stage')) {
261+
alertMessage += ". Are you connected to VPN?";
262+
}
263+
alert(alertMessage);
264+
}
102265
});
103266
</script>
104267
<script type="text/javascript">
@@ -129,13 +292,6 @@ <h4>QR Code</h4>
129292
}
130293
return DOMPurify.sanitize(inputElement.val());
131294
};
132-
$('#init').click(function() {
133-
request.html('branch.init();');
134-
// Take the Branch key from a meta tag
135-
branch.init($('meta[name="branch_key"]').attr('content'), function(err, data) {
136-
response.html(err || JSON.stringify(data));
137-
});
138-
});
139295
$('#data').click(function() {
140296
request.html('branch.data();');
141297
branch.data(function(err, data) {

‎startDev.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ const serve = require('koa-static');
55
const path = require('path');
66

77
const defaultDev = {
8-
"APIEndpoint": "https://api2.branch.io",
9-
"sdkKey": null,
8+
"APIEndpoint": "https://api.stage.branch.io",
9+
"sdkKey": 'key_live_plqOidX7fW71Gzt0LdCThkemDEjCbTgx',
1010
"port": "3000"
1111
};
1212

0 commit comments

Comments
 (0)