Steve Halvorson - Hello Team, I was directed he...
Hello Team, I was directed here by support so I could post my code. I have things working with Sage and working on a Spotter embedded implementation
Having 2 issues with Spotter:
1. The image doesn't change when attempting to do this according to their docs. Tried a couple different methods. The iconSpriteUrl under customizations is the parameter to modify for this, correct?
2. The initial worksheet defined in the code doesn't load or work. The other ones work fine. Seems weird that a worksheet ID is required to get this to work initially but then that worksheet doesn't work
Here's my embedded implementation:
init({
thoughtSpotHost: "https://abre.thoughtspot.cloud",
authType: AuthType.TrustedAuthTokenCookieless,
autoLogin: true,
username: "<?php echo $_SESSION['useremail']; ?>",
customizations: {
style: {
customCSSUrl: "<?php echo $abreDomain; ?>/core/css/thoughtspot_0.0.1.css"
},
content: {
strings: {
"Spotter": "Abre",
}
},
iconSpriteUrl: "<?php echo $abreDomain; ?>/core/images/abre/abre_ai_glyph.svg"
},
getAuthToken: () => {
return fetch('/modules/Abre-Insights/action_get_thoughtspot_token.php')
.then((response) => response.json())
.then((data) => data.token);
}
});
const embed = new ConversationEmbed('#thoughspot-embed', {
frameParams: {},
worksheetId: "<?php echo $worksheetId; ?>",
disableSourceSelection: false,
hideSourceSelection: false
});
embed
// Register event listeners
.on(EmbedEvent.Init, showLoader)
.on(EmbedEvent.Load, hideLoader)
.on(EmbedEvent.AuthExpire, showAuthExpired)
.render();18 Replies
Hi @Steve Halvorson , these spotter issues are known in 10.5. We had the ConversationEmbed in beta version in this release. We have fixed these issues and the fixes should be available in next release along with GA for spotter embed. cc @jbc for more info
Sweet. Thanks for the response @shikharTS ! @jbc is there an approximate release date for those fixes?
@Steve Halvorson
1. The svg you added would need to include your svg content as a symbol and with an id as
rd-icon-spotter which would then replace our internal svg with this.
eg:
Can you help me with the doc you were refering for this, I'll validate if that is updated correctly
2. We haven't come across any issue with WorksheetId not working, are you passing the correct worksheet? Can you share a screenshot with this issue, so i can take more look at this@jbc
1. Here's your docs: https://visual-embed-sdk.vercel.app/docs/Interface_CustomisationsInterface
I am still messing around with the SVG file to get that to work. Having some issues but will keep troubleshooting.
2. For worksheetId, am I supposed to use the GUID for the worksheet or something else? I was using the GUID for the worksheet
Got it, you can refer this url instead, and we'll cross-link this to the other section, so this is not confused
https://visual-embed-sdk.vercel.app/docs/customize-icons#_testing_an_icon_override_file
Customize icons
Customize icons displayed on the ThoughtSpot application interface
It is supposed to be the GUID, can you share the error you are seeing>
@jbc I think I figured out my issue with worksheetId
With the SVG file, I tried using the SVG file mentioned in your docs in your sandbox and it didn't override the default spotter icon. Still seeing the default dog icon. Attaching a screenshot of what I tried:
@Steve Halvorson The example SVG override in that page is for overriding a different icon, not the spotter icon. This
iconSpriteUrl allows you to override any of the icon within Thoughtspot, by adding a new symbol with id matching the icon you want to replace.
We will update our docs to include an example icon for spotter as well. cc @Shashi Subramanya
Here is a sample icon, one of our teammates created which replaces the spotter icon: https://cdn.jsdelivr.net/gh/bryanthowell-ts/bryanthowell-ts.github.io/icon_6.svgI tried your file and no luck. What am I missing here?
@priyanshu.kumar can you help here?
@Steve Halvorson I believe, the url you are trying to add is not whitelisted. You can add that in the
Develop > Security Settings > "CSP connect-src domains". Can you add the url https://cdn.jsdelivr.net here to whitelist it?Making progress here. I got the image to load. The use tag sets it to 174 x 174 on the initial loading screen. How do I fix this?
Here's my svg right now:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:0;height:0;visibility:hidden;">
<symbol id="rd-icon-spotter" viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(2.000000, 2.000000)">
<circle id="Oval" fill="#FFFFFF" cx="48" cy="48" r="39.6"></circle>
<path d="M47.8758,10.1328 C27.0216,10.1328 10.0554,27.099 10.0554,47.9532 C10.0554,68.808 27.0216,85.7736 47.8758,85.7736 C68.73,85.7736 85.6968,68.808 85.6968,47.9532 C85.6968,27.099 68.73,10.1328 47.8758,10.1328 M0.3684,47.9532 C0.3684,21.7572 21.6798,0.4452 47.8758,0.4452 C74.0724,0.4452 95.3844,21.7572 95.3844,47.9532 C95.3844,74.1492 74.0724,95.4606 47.8758,95.4606 C21.6798,95.4606 0.3684,74.1492 0.3684,47.9532 Z" id="Fill-6" fill="#1B2B5C"></path>
<polyline id="Fill-14" fill="#E84545" points="35.82 67.9152 29.9274 47.4 22.2 67.9152"></polyline>
<polyline id="Fill-8" fill="#1B2B5C" points="40.7076 18.78 55.0446 18.78 47.8764 33.6054 40.7076 18.78"></polyline>
<polyline id="Fill-9" fill="#E84545" points="65.8242 47.4 55.0446 18.7794 47.8758 33.6054 65.8242 47.4"></polyline>
<polyline id="Fill-10" fill="#1B2B5C" points="59.9322 67.9152 47.8764 33.6054 65.8248 47.4 59.9322 67.9152"></polyline>
<polyline id="Fill-11" fill="#E84545" points="59.9322 67.9152 65.8248 47.4 73.5522 67.9152"></polyline>
<polyline id="Fill-12" fill="#E84545" points="29.9274 47.4 40.7076 18.7794 47.8758 33.6054 29.9274 47.4"></polyline>
<polyline id="Fill-13" fill="#1B2B5C" points="35.82 67.9152 47.8758 33.6054 29.9274 47.4 35.82 67.9152"></polyline>
</g>
</g>
</symbol>
</svg>
Taking a look
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:0;height:0;visibility:hidden;" symbol id="rd-icon-spotter" viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(2.000000, 2.000000)">
<circle id="Oval" fill="#FFFFFF" cx="48" cy="48" r="39.6"></circle>
<path d="M47.8758,10.1328 C27.0216,10.1328 10.0554,27.099 10.0554,47.9532 C10.0554,68.808 27.0216,85.7736 47.8758,85.7736 C68.73,85.7736 85.6968,68.808 85.6968,47.9532 C85.6968,27.099 68.73,10.1328 47.8758,10.1328 M0.3684,47.9532 C0.3684,21.7572 21.6798,0.4452 47.8758,0.4452 C74.0724,0.4452 95.3844,21.7572 95.3844,47.9532 C95.3844,74.1492 74.0724,95.4606 47.8758,95.4606 C21.6798,95.4606 0.3684,74.1492 0.3684,47.9532 Z" id="Fill-6" fill="#1B2B5C"></path>
<polyline id="Fill-14" fill="#E84545" points="35.82 67.9152 29.9274 47.4 22.2 67.9152"></polyline>
<polyline id="Fill-8" fill="#1B2B5C" points="40.7076 18.78 55.0446 18.78 47.8764 33.6054 40.7076 18.78"></polyline>
<polyline id="Fill-9" fill="#E84545" points="65.8242 47.4 55.0446 18.7794 47.8758 33.6054 65.8242 47.4"></polyline>
<polyline id="Fill-10" fill="#1B2B5C" points="59.9322 67.9152 47.8764 33.6054 65.8248 47.4 59.9322 67.9152"></polyline>
<polyline id="Fill-11" fill="#E84545" points="59.9322 67.9152 65.8248 47.4 73.5522 67.9152"></polyline>
<polyline id="Fill-12" fill="#E84545" points="29.9274 47.4 40.7076 18.7794 47.8758 33.6054 29.9274 47.4"></polyline>
<polyline id="Fill-13" fill="#1B2B5C" points="35.82 67.9152 47.8758 33.6054 29.9274 47.4 35.82 67.9152"></polyline>
</g>
</g>
</svg>
Let me know if it works
The image you provided is throwing a syntax error.
I threw it into Chat GPT to try and fix it:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:0;height:0;visibility:hidden;" viewBox="0 0 24 24">
<symbol id="rd-icon-spotter" viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(2.000000, 2.000000)">
<circle id="Oval" fill="#FFFFFF" cx="48" cy="48" r="39.6"></circle>
<path d="M47.8758,10.1328 C27.0216,10.1328 10.0554,27.099 10.0554,47.9532 C10.0554,68.808 27.0216,85.7736 47.8758,85.7736 C68.73,85.7736 85.6968,68.808 85.6968,47.9532 C85.6968,27.099 68.73,10.1328 47.8758,10.1328 M0.3684,47.9532 C0.3684,21.7572 21.6798,0.4452 47.8758,0.4452 C74.0724,0.4452 95.3844,21.7572 95.3844,47.9532 C95.3844,74.1492 74.0724,95.4606 47.8758,95.4606 C21.6798,95.4606 0.3684,74.1492 0.3684,47.9532 Z" id="Fill-6" fill="#1B2B5C"></path>
<polyline id="Fill-14" fill="#E84545" points="35.82 67.9152 29.9274 47.4 22.2 67.9152"></polyline>
<polyline id="Fill-8" fill="#1B2B5C" points="40.7076 18.78 55.0446 18.78 47.8764 33.6054 40.7076 18.78"></polyline>
<polyline id="Fill-9" fill="#E84545" points="65.8242 47.4 55.0446 18.7794 47.8758 33.6054 65.8242 47.4"></polyline>
<polyline id="Fill-10" fill="#1B2B5C" points="59.9322 67.9152 47.8764 33.6054 65.8248 47.4 59.9322 67.9152"></polyline>
<polyline id="Fill-11" fill="#E84545" points="59.9322 67.9152 65.8248 47.4 73.5522 67.9152"></polyline>
<polyline id="Fill-12" fill="#E84545" points="29.9274 47.4 40.7076 18.7794 47.8758 33.6054 29.9274 47.4"></polyline>
<polyline id="Fill-13" fill="#1B2B5C" points="35.82 67.9152 47.8758 33.6054 29.9274 47.4 35.82 67.9152"></polyline>
</g>
</g>
</symbol>
</svg>
However, I still got the same issue as before (see attached screenshot)
Hi @Steve Halvorson let me do an coversationEmbed and use iconSprite with ur svg. Can you please answer the following questions:
1. Are u using multiple svg overrides in ur hosted svg file or just rd-icon-spotter one.
2. Are u facing issues with just ur svg or with this url https://cdn.jsdelivr.net/gh/bryanthowell-ts/bryanthowell-ts.github.io/icon_6.svg as well
Thanks
Will update in some time.
@Steve Halvorson Changing the viewBox for symbol to "0 0 100 100" is rendering the full logo. Let me know if it works.
It worked!